Приветствую вас, дорогие подписчики и конечно же гости моего блога. Эту статью я писал специально для того, чтобы посвятить вас во все подробности работы с таким элементом, как адаптивная таблица Bootstrap. Это очень полезный и многофункциональный инструмент, который значительно упрощает верстку.
Я расскажу вам обо всех важных встроенных классах, подробно объясню, как они функционируют и конечно же приведу множество примеров. Приступим же!
Шаг 1. Просто создать таблицу
Итак, чтобы создать самое примитивное табличное представление в фреймворке Bootstrap 3, для начала вам нужно прописать разметку на html. Выглядит это вот так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <table>
<thead>
<tr>
<th>Название конфет</th>
<th>Тип</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr>
<td>"Ромашка"</td>
<td>Шоколадные</td>
<td>110.50</td>
</tr>
<tr>
<td>"Шипучка"</td>
<td>Леденец</td>
<td>97.90</td>
</tr>
<tr>
<td>"Мармеладные мишки"</td>
<td>Желатиновые</td>
<td>250.00</td>
</tr>
</tbody>
</table> |
Если вы запустите код, то никакого стилевого оформления не увидите. А теперь используйте класс фреймворка для тега <table>:
<table class="table">
Таблица так и осталась без границ по периметру, однако ее поля разделены горизонтальной линией, и она растянулась на всю ширину экрана.
Шаг 2. Сделать ее полосатой
Теперь чтобы создать полосатую таблицу необходимо только добавить определенный класс в код. И таковым является .table-striped. Строка будет выглядеть следующим образом:
По умолчанию полоса серого цвета чередуется с белой. Однако вы всегда можете залезть в css файл и там поменять значения стилевых свойств или же переопределить их через файл style.css.<table class="table table-striped"> …</table>
Шаг 3. Ограничить ее!
Если же вам не нравятся таблицы без рамочки, то это можно исправить применением класса .table-bordered. Для примера я несколько подкорректировал стилевую разметку, добавив тени вокруг объекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <head>
…
<style>
.container {
margin: 9px;
}
.table-bordered {
box-shadow: 1px 2px 7px #191970;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Название конфет</th>
<th>Тип</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr>
<td>"Ромашка"</td>
<td>Шоколадные</td>
<td>110.50</td>
</tr>
<tr>
<td>"Шипучка"</td>
<td>Леденец</td>
<td>97.90</td>
</tr>
<tr>
<td>"Мармеладные мишки"</td>
<td>Желатиновые</td>
<td>250.00</td>
</tr>
</tbody>
</table>
</div> |
Шаг 4. А я хочу вот эту строку!
Создатели Bootstrap предусмотрели такой класс, как .table-hover специально для тех разработчиков, которые хотят добавить выделение строк при наведении на них курсора. В этом случае в примере вам, дорогие читатели, стоит заменить .table- striped на обсуждаемый класс.
Шаг 5. Подчеркнуть цветом ее содержание
Если же в таблице вам необходимо выделить какие-то строки или ячейки в зависимости от их контекста, то можно обратиться за помощью к контекстуальным (Contextual) классам. Всего их 5 штук.
| Элемент | Описание |
| .active | Раскрашивает строку/ячейку в тот же цвет, как и при использовании прошлого инструмента. |
| .danger | Инициализирует потенциально опасные действия. Выделяется красным цветом. |
| .success | Оповещает об успешном действии (цвет – зеленый). |
| .warning | Светло-розовым цветом выделяет элементы, которым стоит уделить внимание. |
| .info | Указывает голубым на расположение нейтральной информации. |
Так, в нашем примере перечисленные Contextual Classes можно применить, чтобы выделить какие товары есть на складе, а какие не завезли.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div class="container">
<table class="table table-bordered table-hover">
<thead>
<tr >
<th>Название конфет</th>
<th>Тип</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>"Ромашка"</td>
<td>Шоколадные</td>
<td>110.50</td>
</tr>
<tr class="success">
<td>"Шипучка"</td>
<td>Леденец</td>
<td>97.90</td>
</tr>
<tr class="success">
<td>"Мармеладные мишки"</td>
<td>Желатиновые</td>
<td>250.00</td>
</tr>
</tbody>
</table>
</div> |
Шаг 6. Компактнее, друзья, компактнее!
Чтобы уменьшить расстояние между строками был создан такой механизм, как .table-condensed. Он урезает внутренние отступы (padding) в половину. Добавьте его в уже известное вам место в программной реализации и проанализируйте результаты. Я же далее в своей программе этот прием использовать не буду.
Шаг 7. Сделать ее отзывчивой
Фреймворк предоставляет еще один очень полезный класс, который преобразовывает указанные табличные представления в отзывчивые. В этом случае последние сжимаются до размеров веб-страницы, однако само содержимое уменьшается до определенного количества пикселей, а после снизу появляется скролл.
За все названные действия отвечает .table-responsive. Его нужно добавить в блок, охватывающий всю табличную реализацию.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr >
<th>Название конфет</th>
<th>Тип</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>"Ромашка"</td>
<td>Шоколадные</td>
<td>110.50</td>
</tr>
<tr class="success">
<td>"Шипучка"</td>
<td>Леденец</td>
<td>97.90</td>
</tr>
<tr class="success">
<td>"Мармеладные мишки"</td>
<td>Желатиновые</td>
<td>250.00</td>
</tr>
</tbody>
</table>
</div>
</div> |
Вот и все! Очень надеюсь, что вам понравилась моя статья. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на понравившиеся публикации с друзьями. До встречи! Пока-пока!
С уважением, Роман Чуешов
