StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
14.09.2016
09:45
7535
пока нет
Таблицы. Основы bootstrap 3 для начинающих. Урок №13
Всем привет!
В сегодняшнем уроке вы научитесь создавать таблицы в bootstrap 3.
Не рекомендую игнорировать эту тему, так часто на сайтах используют таблицы для вывода, например, списка товара на сайте, пользователей, прайс и т.д.
Таблица в bootstrap 3 создается абсолютно одинаково, как и в HTML, но, благодаря CSS стилям, которые предлагает bootstrap 3, табличка может приобрести новые и интересные виды, плюс ко всему, она может быть и адаптивной под мобильные устройства.
Если вы каким-то чудом попали на эту страничку и не знаете, как создавать таблицы в HTML, настойчиво рекомендую это сделать.
Вот так выглядит стандартный вид таблицы на HTML:
<table> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> </tr> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> </tr> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> </tr> </table>
Базовый метод оформления таблицы в bootstrap 3
В bootstrap 3 для базового оформления таблицы достаточно добавить класс «table» к тегу <table>.
<table class="table"> ... </table>
Пример:
<table class="table"> <thead> <tr> <th>№ п/п</th> <th>Адрес сайта</th> <th>Владелец сайта</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>BlogGood.ru</td> <td>Костаневич Степан</td> <td>test-1@mail.ru</td> </tr> <tr> <td>2</td> <td>StepkinBlog.ru</td> <td>Костаневич Степан</td> <td>test-2@mail.ru</td> </tr> <tr> <td>3</td> <td>nocrisise.ru</td> <td>Костаневич Степан</td> <td>test-3@mail.ru</td> </tr> </tbody> </table>
Результат:
| № п/п | Адрес сайта | Владелец сайта | |
|---|---|---|---|
| 1 | BlogGood.ru | Костаневич Степан | test-1@mail.ru |
| 2 | StepkinBlog.ru | Костаневич Степан | test-2@mail.ru |
| 3 | nocrisise.ru | Костаневич Степан | test-3@mail.ru |
Границы таблицы в bootstrap 3
Чтобы добавить границы со всех сторон таблицы и ячеек, нужно добавить класс «table-bordered» к тегу <table>:
<table class="table table-bordered"> ... </table>
Пример:
<table class="table table-bordered"> <thead> <tr> <th>№ п/п</th> <th>Адрес сайта</th> <th>Владелец сайта</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>BlogGood.ru</td> <td>Костаневич Степан</td> <td>test-1@mail.ru</td> </tr> <tr> <td>2</td> <td>StepkinBlog.ru</td> <td>Костаневич Степан</td> <td>test-2@mail.ru</td> </tr> <tr> <td>3</td> <td>nocrisise.ru</td> <td>Костаневич Степан</td> <td>test-3@mail.ru</td> </tr> </tbody> </table>
Результат:
| № п/п | Адрес сайта | Владелец сайта | |
|---|---|---|---|
| 1 | BlogGood.ru | Костаневич Степан | test-1@mail.ru |
| 2 | StepkinBlog.ru | Костаневич Степан | test-2@mail.ru |
| 3 | nocrisise.ru | Костаневич Степан | test-3@mail.ru |
Таблица «Зебра» в bootstrap 3
Не зря эта таблица несет название «Зебра», так как действительно этот эффект напоминает полоски зебры.
Добавьте класс «table-striped» к тегу <table>:
<table class="table table-striped"> … </table>
Пример:
<table class="table table-striped"> <thead> <tr> <th>№ п/п</th> <th>Адрес сайта</th> <th>Владелец сайта</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>BlogGood.ru</td> <td>Костаневич Степан</td> <td>test-1@mail.ru</td> </tr> <tr> <td>2</td> <td>StepkinBlog.ru</td> <td>Костаневич Степан</td> <td>test-2@mail.ru</td> </tr> <tr> <td>3</td> <td>nocrisise.ru</td> <td>Костаневич Степан</td> <td>test-3@mail.ru</td> </tr> </tbody> </table>
Результат:
| № п/п | Адрес сайта | Владелец сайта | |
|---|---|---|---|
| 1 | BlogGood.ru | Костаневич Степан | test-1@mail.ru |
| 2 | StepkinBlog.ru | Костаневич Степан | test-2@mail.ru |
| 3 | nocrisise.ru | Костаневич Степан | test-3@mail.ru |
Таблица с подсветкой
Очень прикольный эффект. При наведении курсора мыши на любую ячейку таблицы, она подсвечивается. Добавьте класс «table-hover» к тегу <table>:
<table class="table table-hover"> … </table>
Пример:
<table class="table table-hover"> <thead> <tr> <th>№ п/п</th> <th>Адрес сайта</th> <th>Владелец сайта</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>BlogGood.ru</td> <td>Костаневич Степан</td> <td>test-1@mail.ru</td> </tr> <tr> <td>2</td> <td>StepkinBlog.ru</td> <td>Костаневич Степан</td> <td>test-2@mail.ru</td> </tr> <tr> <td>3</td> <td>nocrisise.ru</td> <td>Костаневич Степан</td> <td>test-3@mail.ru</td> </tr> </tbody> </table>
Результат:
| № п/п | Адрес сайта | Владелец сайта | |
|---|---|---|---|
| 1 | BlogGood.ru | Костаневич Степан | test-1@mail.ru |
| 2 | StepkinBlog.ru | Костаневич Степан | test-2@mail.ru |
| 3 | nocrisise.ru | Костаневич Степан | test-3@mail.ru |
Цветные строки в таблице
Для цвета строки таблицы или отдельных ячеек существуют такие классы как:
| Класс | Описание |
| .active | Применяет цвет при наведении на конкретную строку или ячейку |
| .success | Указывает на успешное или позитивное действие |
| .info | Указывает на нейтральные информативные изменения или действия |
| .warning | Указывает на предупреждения, которые могут потребовать внимания |
| .danger | Указывает на опасное или потенциально негативное действие |
Вот так заполняются классы:
<tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr>
Пример:
<table class="table table-bordered"> <thead> <tr> <th>№ п/п</th> <th>Адрес сайта</th> <th>Владелец сайта</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="info">BlogGood.ru</td> <td class="warning">Костаневич Степан</td> <td class="danger">test-1@mail.ru</td> </tr> <tr class="active"> <td>2</td> <td>StepkinBlog.ru</td> <td>Костаневич Степан</td> <td>test-2@mail.ru</td> </tr> <tr class="success"> <td>3</td> <td>nocrisise.ru</td> <td>Костаневич Степан</td> <td>test-3@mail.ru</td> </tr> </tbody> </table>
Результат:
| № п/п | Адрес сайта | Владелец сайта | |
|---|---|---|---|
| 1 | BlogGood.ru | Костаневич Степан | test-1@mail.ru |
| 2 | StepkinBlog.ru | Костаневич Степан | test-2@mail.ru |
| 3 | nocrisise.ru | Костаневич Степан | test-3@mail.ru |
Адаптивная таблица
Для небольших экранов (до 768px) будет горизонтальное прокручивание:
Это удобно, так как таблица читабельности не теряет.
При просмотре на экранах с разрешением больше чем 768px, вы увидите обычную таблицу
Добавьте над тегом <table> тег <div> с классом «table-responsive»:
<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>
Пример:
<div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>№ п/п</th> <th>Адрес сайта</th> <th>Владелец сайта</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="info">BlogGood.ru</td> <td class="warning">Костаневич Степан</td> <td class="danger">test-1@mail.ru</td> </tr> <tr class="active"> <td>2</td> <td>StepkinBlog.ru</td> <td>Костаневич Степан</td> <td>test-2@mail.ru</td> </tr> <tr class="success"> <td>3</td> <td>nocrisise.ru</td> <td>Костаневич Степан</td> <td>test-3@mail.ru</td> </tr> </tbody> </table> </div>
Вот и все. С таблицами Bootstrap покончено.
И к дополнению к уроку:
Табличные теги, поддерживаемые Twitter Bootstrap 3
| Тег | Описание |
| <table> | Контейнер для элементов, определяющих содержимое таблицы |
| <caption> | Заголовок таблицы |
| <thead> | Контейнер для элементов, формирующих «шапку» таблицы |
| <tbody> | Контейнер для элементов, формирующих основную часть таблицы |
| <tr> | Контейнер для ячеек, являющихся элементами одной строки |
| <th> | Специальная табличная ячейка для заголовков столбцов |
| <td> | Табличная ячейка, предназначенная для размещения основных табличных данных |
Если понравился урок, жмите на кнопки социальных сетей, делитесь урокам и рассказывайте друзьям – вам же не жалко этой информации.
Удачи! Жду Вас на следующих уроках.