Рис.2. Таблица в стиле Bootstrap по умолчанию

В Bootstrap встроена возможность стильного оформления таблиц. К сожалению, таблицы по умолчанию выглядят не просто аскетично, а на них вообще неприятно смотреть – отсутствуют отступы в ячейках, рамки, если отображаются, то просто убогие. Потому веб-мастеру уже нужно помнить, что стили таблиц нужно переопределять. Bootstrap об этом тоже помнит и уже содержит заготовленный класс для таблиц.

Рассмотрим работу Bootstrap на примере следующей таблицы:

 

По умолчанию в браузере Internet explorer 10 таблица выглядит так:

Рис.1. Таблица по умолчанию в браузере

Рис.1. Таблица по умолчанию в браузере

Для того, чтобы применить таблице стиль Bootstrap, для нее нужно указать класс "table".

 

Рис.2. Таблица в стиле Bootstrap по умолчанию

Рис.2. Таблица в стиле Bootstrap по умолчанию

 

Стиль Bootstrap по умолчанию добавляет для таблиц:

  • небольшие отступы внутри ячеек;
  • горизонтальные серые разделительные границы между строками;
  • таблица растягивается на максимально возможную ширину.

 

В Bootstrap есть 5 стилей для таблиц. С помощью, например, Intellisense Visual Studio, можно увидеть доступные классы для таблиц (Рис.3). Вот они:

  • table-bordered - границы ко всем ячейкам таблицы;
  • table-condensed – уменьшает внутренние отступы ячеек;
  • table-hover – при наведении мыши подсвечивается строка таблицы серым цветом;
  • table-responsive – если таблица не вписывается по ширине в отведенные ей границы, то появится горизонтальная полоса прокрутки;
  • table-stripped – нечетные строки становятся серыми.

 

Рис.3. Классы для таблиц в Intellisense

Рис.3. Классы для таблиц в Intellisense