таблицы bootstrap

Bootstrap таблицы для начинающих

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

Стандартные бутстраповские таблицы имеют такое оформление:

  • Внутренние отступы ячеек.
  • Нету вертикальных границ, но добавлены серые горизонтальные.

Для этого нужно добавить вашей таблице класс table :

  <table class="table">
    <tbody>
      <tr>
        <th>Имя</th>
        <th>Работа</th>
        <th>Город</th>
      </tr>
      <tr>
        <td>Влад</td>
        <td>Занимаюсь Front end'ом</td>
        <td>Питер</td>
      </tr>
      <tr>
        <td>Андрей</td>
        <td>Back end разработчик</td>
        <td>Минск</td>
      </tr>
      <tr>
        <td>Максим</td>
        <td>Занимаюсь SEO оптимизацией</td>
        <td>Москва</td>
      </tr>
    </tbody>
  </table>


Но их можно улучшить под свои хотелки добавляя определенные классы.

Название класса Что он делает
 table-striped Чередует цвета строк
 table-bordered Добавляет ячейкам границы
 table-hover Изменяет цвета строк при наведении
table-condensed Уменьшает отступы ячеек
 Тут несколько классов Изменяет фон ячеек (смотрите внизу)
table-responsive Таблица становиться адаптивной

Внизу находится подробная информация про каждый класс.

Чередование цвета строк

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

Этот эффект называют — зебра. Он добавляет серый цвет не четным строкам.

В Internet Explorer 8 и ниже вы не заметите никаких изменений (некоторые функции не используются).

Добавление границ

<table class = "table table-bordered"> 
  ...
</table>

У стандартной таблицы ячейки не имеют границ, поэтому нужно их самостоятельно добавлять.

Изменение цвета ячеек при наведении

<table class = "table table-hover"> 
  ...
</table>

При наведении на строки их фон будет становиться сероватым. Скажу сразу, увидеть хоть какие-то изменения сложно.

Компактные отступы

<table class = "table table-condensed"> 
  ...
</table>

Ячейки таблицы будут выглядеть меньше из-за уменьшения отступов (paddind). Так можно сделать таблицу компактнее, если мало места.

Фон ячеек

Bootstrap имеет пять стандартных фонов. Вы можете сделать тоже самое создав свой класс с background-color.

Название класса Что он делает
active Используется когда пользователь навел на строку или ячейку
warning Предупреждение, нужно обратить свое внимание
info Дополнительная информация
success Успешное выполнение
danger Что-то пошло неправильно

 

Адаптивные таблицы

<div class = "table-responsive">
  <table class = "table">
    ...
  </table>
</div>

Таблица автоматически подстраивается под размер окна. Так если ширина окна не вмещает содержимое внизу появится горизонтальный скрол. На ширине больше таблица выглядит как обычно.

Добавление этого класса идет к блоку div, который является родительским для таблицы




Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *