Как делаются в Bootstrap таблицы?

От автора: я приветствую вас. В прошлых статьях мы рассматривали, как с помощью фреймворка сделать горизонтальное и вертикальное меню. Сегодняшняя же статья будет посвящена тому, как делать с помощью bootstrap таблицы.

Про таблицы в bootstrap говорить особо нечего. Тут есть пару классов для оформления, а также возможность сделать таблицу полностью адаптивной. Сейчас все это рассмотрим. Делайте такую же таблицу, какую делаете обычно: с помощью тегов table, tr и td. Например:

По умолчанию без стилей бутстрап выглядит она совсем бедно:

Но стоит только добавить тегу table класс table (банально, не так ли?) и все становится на свои места:

Дело в том, что если таблицу просто вставить в body, то она будет растянута на весь экран, даже если в ней всего 1 ячейка, поэтому вставляйте таблицу непосредственно в какой-то блок, который имеет ограничения по ширине.

С помощью дополнительного класса table-striped вы можете сделать так, чтобы ряды таблицы окрашивались поочередно в 2 разных цвета:

Собственно, если вы хотите, чтобы ячейки имели границы со всех сторон, а не только сверху, добавьте таблице класс table-bordered. Так она будет выглядеть по-стандартному:

Вот и все, что есть в Bootstrap для таблиц. Очень мало, не так ли? Все остальное вы можете стилизовать сами, а фреймворк свою основную задачу выполняет – придает таблицам нормальный вид. А оформление в данном случае полностью на вас.

Адаптивность и ширина таблицы

Вижу, что многих из вас беспокоят вопросы, связанные с тем, как сделать в bootstrap адаптивную таблицу и как вообще управлять ее шириной. Как я уже сказал, никакой шириной управлять не нужно, да и никакую адаптивность тоже не стоит реализовывать. Все очень просто, вам достаточно обернуть таблицу в div с классом table-responsive:

Таблица по умолчанию будет сжиматься до тех пор, пока это возможно. Если же содержимое ячеек просто перестанет помещаться на странице, образуется горизонтальная прокрутка. Чтобы убрать ее, как раз и используют класс table-responsive, но он задается не таблице, а блоку, который выступает для нее контейнером.

Что делает этот класс? Во-первых, при нем не будет происходить съезжание текста в ячейках. Во-вторых, даже если сама таблица не поместится по ширине, появится горизонтальная прокрутка, но не для окна в целом, а только в пределах самой таблицы.

Окрашивание рядов и ячеек

Используйте классы active, success, info, warning и danger для применения фонового цвета к целым рядам или отдельным ячейкам. Пример:

В общем, мы рассмотрели общие моменты работы с таблицами, которые есть в Bootstrap по умолчанию. Как видите, ничего сложного нет.

Комментарии Вконтакте: