Приветствую вас, дорогие подписчики и конечно же гости моего блога. Эту статью я писал специально для того, чтобы посвятить вас во все подробности работы с таким элементом, как адаптивная таблица 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> |
Вот и все! Очень надеюсь, что вам понравилась моя статья. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на понравившиеся публикации с друзьями. До встречи! Пока-пока!
С уважением, Роман Чуешов