10 Лютий 2015
Рубрика: уроки

Уроки по Bootstrap. Урок №3: таблицы

Продолжаем серию уроков по Bootstrap. На этот раз поговорим о таблицах. BS поможет вашим таблицам выглядеть значительно более привлекательно, чем в стандартном оформлении. Для этого им достаточно добавить один класс, а об остальном позаботится фреймворк. Как это сделать? Читайте ниже.

Продолжим серию уроков по самому популярному html/css фреймворку Bootstrap. О том, что такое Bootstrap, и как его правильно подключить, вы можете узнать из предыдущих уроков. Сегодня речь пойдёт о таблицах.

Если вы не знаете, что такое Bootstrap, рекомендую вам начать с первого урока: что такое Bootstrap.

В Бутстрапе есть возможность добавлять оформление к любым таблицам. Для того, чтобы созданная вами таблица была оформлена в стиле Bootstrap, ей нужно назначить класс table:

<table class="table">

По умолчанию Bootstrap добавляет таблицам такой стиль:

  • небольшие внутренние отступы внутри ячеек
  • горизонтальные серые разделительные границы между строками

Таблица в стандартном оформлении будет выглядеть так:

Имя Фамилия Почта
Иван Николайчук ivan@example.com
Мария Иванова mary@example.com
Юлия Петренко julia@example.com

В результате код таблицы будет таким:

 <table class="table">
 <thead>
 <tr>
 <th>Имя</th>
 <th>Фамилия</th>
 <th>Почта</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Иван</td>
 <td>Николайчук</td>
 <td>ivan@example.com</td>
 </tr>
 <tr>
 <td>Мария</td>
 <td>Иванова</td>
 <td>mary@example.com</td>
 </tr>
 <tr>
 <td>Юлия</td>
 <td>Петренко</td>
 <td>julia@example.com</td>
 </tr>
 </tbody>
 </table>

Как видите, никаких дополнительных манипуляций от вас не требуется. Если класс таблице не назначать, стили Bootstrap ей назначены не будут.

Чередование фона в строках

Класс .table-striped, назначенный таблице, добавит серый фон её нечётным строкам:

<table class="table table-striped">

Результат:

Имя Фамилия Почта
Иван Николайчук ivan@example.com
Мария Иванова mary@example.com
Юлия Петренко julia@example.com

Вертикальные и горизонтальные границы в ячейках

Класс .table-bordered добавляет горизонтальные и вертикальные границы ко всем ячейкам вашей таблицы:

<table class="table table-bordered">
Имя Фамилия Почта
Иван Николайчук ivan@example.com
Мария Иванова mary@example.com
Юлия Петренко julia@example.com

Кстати, у этого урока есть видеоверсия: видеоурок №3: таблицы в Bootstrap.

Подсветка ячеек при наведении

Класс .table-hover, назначенный таблице, добавит серый фон строкам таблицы при наведении курсора мыши.

<table class="table table-hover">
Имя Фамилия Почта
Иван Николайчук ivan@example.com
Мария Иванова mary@example.com
Юлия Петренко julia@example.com

Компактные отступы

При помощи класса .table-condensed вы можете уменьшить внутренние отступы для ячеек таблицы, чтобы она выглядела более компактно. Это удобно для больших таблиц.

<table class="table table-condensed">
Имя Фамилия Почта
Иван Николайчук ivan@example.com
Мария Иванова mary@example.com
Юлия Петренко julia@example.com

Контекстные фоны ячеек

Классы контекста можно применять, чтобы добавить различный цвет фона строкам (<tr>) или ячейкам (<td>) вашей таблицы:

Имя Фамилия Почта
Иван Николайчук ivan@example.com
Мария Иванова mary@example.com
Юлия Петренко julia@example.com

Вы можете использовать пять стандартных классов для оформления фона:

Класс Описание
.active Добавляет класс с серым фоном, который используется при наведении на ячейку или строку
.success Используется для сообщения об успехе
.info Нейтральное информационное сообщение
.warning Предупреждение, требующее внимания
.danger Используется для сообщения об ошибке, опасности или каком-то негативном действии

Responsive (отзывчивые) таблицы

Класс .table-responsive делает таблицу восприимчивой к размерам экрана, на котором отображается страница. На небольших устройствах (до 769 пикселей по ширине) таблица будет отображаться с горизонтальным скроллом, если не влезает в экран полностью. При отображении на любом экране шире 768 пикселей таблица будет отображаться как обычно.

<div class="table-responsive">
 <table class="table">
   ... 
 </table> 
</div>

Обратите внимание: класс нужно назначить не самой таблице, а родительскому элементу, в котором она будет находиться.

О том, какие ещё есть компоненты в Bootstrap, вы можете узнать урока №2: из чего он состоит и как его настроить.

Тепер я хочу бачити коментарі 6