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