Таблицы
Table
# | Имя | Фамилия | Никнейм |
---|---|---|---|
1 | Марк | Атман | @atman |
2 | Андрей | Торнтон | @vector |
3 | Ларри | Кинг | @king |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Никнейм</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Марк</td>
<td>Атман</td>
<td>@atman</td>
</tr>
<tr>
<td>2</td>
<td>Андрей</td>
<td>Торнтон</td>
<td>@vector</td>
</tr>
<tr>
<td>3</td>
<td>Ларри</td>
<td>Кинг</td>
<td>@king</td>
</tr>
</tbody>
</table>
Striped
# | Имя | Фамилия | Никнейм |
---|---|---|---|
1 | Марк | Атман | @atman |
2 | Андрей | Торнтон | @vector |
3 | Ларри | Кинг | @king |
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Никнейм</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Марк</td>
<td>Атман</td>
<td>@atman</td>
</tr>
<tr>
<td>2</td>
<td>Андрей</td>
<td>Торнтон</td>
<td>@vector</td>
</tr>
<tr>
<td>3</td>
<td>Ларри</td>
<td>Кинг</td>
<td>@king</td>
</tr>
</tbody>
</table>
Bordered
# | Имя | Фамилия | Никнейм |
---|---|---|---|
1 | Марк | Атман | @atman |
2 | Андрей | Торнтон | @vector |
3 | Ларри | Кинг | @king |
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Никнейм</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Марк</td>
<td>Атман</td>
<td>@atman</td>
</tr>
<tr>
<td>2</td>
<td>Андрей</td>
<td>Торнтон</td>
<td>@vector</td>
</tr>
<tr>
<td>3</td>
<td>Ларри</td>
<td>Кинг</td>
<td>@king</td>
</tr>
</tbody>
</table>
Table Hover
# | Имя | Фамилия | Никнейм |
---|---|---|---|
1 | Марк | Атман | @atman |
2 | Андрей | Торнтон | @vector |
3 | Ларри | Кинг | @king |
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Никнейм</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Марк</td>
<td>Атман</td>
<td>@atman</td>
</tr>
<tr>
<td>2</td>
<td>Андрей</td>
<td>Торнтон</td>
<td>@vector</td>
</tr>
<tr>
<td>3</td>
<td>Ларри</td>
<td>Кинг</td>
<td>@king</td>
</tr>
</tbody>
</table>
table-condensed
# | Имя | Фамилия | Никнейм |
---|---|---|---|
1 | Марк | Атман | @atman |
2 | Андрей | Торнтон | @vector |
3 | Ларри | Кинг | @king |
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Никнейм</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Марк</td>
<td>Атман</td>
<td>@atman</td>
</tr>
<tr>
<td>2</td>
<td>Андрей</td>
<td>Торнтон</td>
<td>@vector</td>
</tr>
<tr>
<td>3</td>
<td>Ларри</td>
<td>Кинг</td>
<td>@king</td>
</tr>
</tbody>
</table>
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
Хостинг
Стандартный
$20/месяц
- 1 пользователь
- 10 Гб места на диске
- Email priority support
- Free
- 24/7 поддержка
Основной
$30/месяц
- 10 users
- 30 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
Профессиональный
$50/месяц
- Unlimited user
- 100 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
Ультра
$99/месяц
- Unlimited user
- 300 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
<div class="table-price-1 has-linear-gradient">
<div class="row">
<h2 class="title text-center">Хостинг</h2>
<div class="items-wrapper col-lg-20 col-md-24 col-sm-24 col-xs-24 col-lg-offset-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Стандартный</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$20</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>1 пользователь</li>
<li><i class="fa fa-check"></i>10 Гб места на диске</li>
<li class="disabled"><i class="fa fa-times"></i>Email priority support</li>
<li class="disabled"><i class="fa fa-times"></i>Free </li>
<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center best-buy">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Основной</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$30</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>10 users</li>
<li><i class="fa fa-check"></i>30 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="clearfix visible-sm-block visible-xs-block"></div>
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading popular">
<h3 class="title">Профессиональный</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$50</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>Unlimited user</li>
<li><i class="fa fa-check"></i>100 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li><i class="fa fa-check"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-primary btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Ультра</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$99</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>Unlimited user</li>
<li><i class="fa fa-check"></i>300 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li><i class="fa fa-check"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
</div><!--//items-wrapper-->
</div>
</div><!--//row-->
Четыре спецпредложения
Хостинг
Стандартный
$20/месяц
- 1 пользователь
- 10 Гб места на диске
- Email priority support
- Free
- 24/7 поддержка
Основной
$30/месяц
- 10 users
- 30 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
Профессиональный
$50/месяц
- Unlimited user
- 100 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
Ультра
$99/месяц
- Unlimited user
- 300 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
<div class="table-price-1">
<div class="row">
<h2 class="title text-center">Хостинг</h2>
<div class="items-wrapper col-lg-20 col-md-24 col-sm-24 col-xs-24 col-lg-offset-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Стандартный</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$20</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>1 пользователь</li>
<li><i class="fa fa-check"></i>10 Гб места на диске</li>
<li class="disabled"><i class="fa fa-times"></i>Email priority support</li>
<li class="disabled"><i class="fa fa-times"></i>Free </li>
<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center best-buy">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Основной</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$30</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>10 users</li>
<li><i class="fa fa-check"></i>30 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="clearfix visible-sm-block visible-xs-block"></div>
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading popular">
<h3 class="title">Профессиональный</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$50</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>Unlimited user</li>
<li><i class="fa fa-check"></i>100 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li><i class="fa fa-check"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-primary btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Ультра</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$99</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>Unlimited user</li>
<li><i class="fa fa-check"></i>300 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li><i class="fa fa-check"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
</div><!--//items-wrapper-->
</div>
</div><!--//row-->
Три спецпредложения
Хостинг
Стандартный
$20/месяц
- 1 пользователь
- 10 Гб места на диске
- Email priority support
- Free
- 24/7 поддержка
Основной
$30/месяц
- 10 users
- 30 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
Профессиональный
$50/месяц
- Unlimited user
- 100 Гб места на диске
- Email priority support
- Free update
- 24/7 поддержка
<div class="table-price-1">
<div class="row">
<h2 class="title text-center">Хостинг</h2>
<div class="items-wrapper col-lg-20 col-md-24 col-sm-24 col-xs-24 col-lg-offset-2 col-md-offset-3 col-sm-offset-0 col-xs-offset-0">
<div class="table-item col-lg-8 col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Стандартный</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$20</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>1 пользователь</li>
<li><i class="fa fa-check"></i>10 Гб места на диске</li>
<li class="disabled"><i class="fa fa-times"></i>Email priority support</li>
<li class="disabled"><i class="fa fa-times"></i>Free </li>
<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="table-item col-lg-8 col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center best-buy">
<div class="table-item-inner">
<div class="heading">
<h3 class="title">Основной</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$30</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>10 users</li>
<li><i class="fa fa-check"></i>30 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-default btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
<div class="clearfix visible-sm-block visible-xs-block"></div>
<div class="table-item col-lg-8 col-md-6 col-sm-12 col-xs-12 col-xxs-24 col-xs-offset-6 col-sm-offset-6 col-md-offset-0 text-center">
<div class="table-item-inner">
<div class="heading popular">
<h3 class="title">Профессиональный</h3>
<div class="price-figure">
<span class="price-figure-inner">
<span class="price">$50</span><span class="period">/месяц</span>
</span>
</div>
</div>
<div class="content">
<ul class="list-unstyled">
<li><i class="fa fa-check"></i>Unlimited user</li>
<li><i class="fa fa-check"></i>100 Гб места на диске</li>
<li><i class="fa fa-check"></i>Email priority support</li>
<li><i class="fa fa-check"></i>Free update</li>
<li><i class="fa fa-check"></i>24/7 поддержка</li>
</ul>
<a href="#" class="btn btn-primary btn-block">Купить</a>
</div><!--//content-->
</div><!--//item-inner-->
</div><!--//item-->
</div><!--//items-wrapper-->
</div>
</div><!--//row-->