Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Создаем адаптивную таблицу на bootstrap 3 с использованием всех возможных классов фреймворка

Приветствую вас, дорогие подписчики и конечно же гости моего блога. Эту статью я писал специально для того, чтобы посвятить вас во все подробности работы с таким элементом, как адаптивная таблица 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. Строка будет выглядеть следующим образом:

<table class="table table-striped"> …</table>

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

Шаг 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>

Вот и все! Очень надеюсь, что вам понравилась моя статья. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на понравившиеся публикации с друзьями. До встречи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 137 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: