Создаем адаптивную таблицу на bootstrap 3 с использованием всех возможных классов фреймворка
Приветствую вас, дорогие подписчики и конечно же гости моего блога. Эту статью я писал специально для того, чтобы посвятить вас во все подробности работы с таким элементом, как адаптивная таблица Bootstrap. Это очень полезный и многофункциональный инструмент, который значительно упрощает верстку.
Я расскажу вам обо всех важных встроенных классах, подробно объясню, как они функционируют и конечно же приведу множество примеров. Приступим же!
Шаг 1. Просто создать таблицу
Итак, чтобы создать самое примитивное табличное представление в фреймворке Bootstrap 3, для начала вам нужно прописать разметку на html. Выглядит это вот так:
Название конфет
Тип
Стоимость
«Ромашка»
Шоколадные
110.50
«Шипучка»
Леденец
97.90
«Мармеладные мишки»
Желатиновые
250.00
Если вы запустите код, то никакого стилевого оформления не увидите. А теперь используйте класс фреймворка для тега
:
Таблица так и осталась без границ по периметру, однако ее поля разделены горизонтальной линией, и она растянулась на всю ширину экрана.
Шаг 2. Сделать ее полосатой
Теперь чтобы создать полосатую таблицу необходимо только добавить определенный класс в код. И таковым является .table-striped. Строка будет выглядеть следующим образом:
Шаг 3. Ограничить ее!
Если же вам не нравятся таблицы без рамочки, то это можно исправить применением класса .table-bordered. Для примера я несколько подкорректировал стилевую разметку, добавив тени вокруг объекта.
Название конфет
Тип
Стоимость
«Ромашка»
Шоколадные
110.50
«Шипучка»
Леденец
97.90
«Мармеладные мишки»
Желатиновые
250.00
Шаг 4. А я хочу вот эту строку!
Создатели Bootstrap предусмотрели такой класс, как .table-hover специально для тех разработчиков, которые хотят добавить выделение строк при наведении на них курсора. В этом случае в примере вам, дорогие читатели, стоит заменить .table-striped на обсуждаемый класс.
Шаг 5. Подчеркнуть цветом ее содержание
Если же в таблице вам необходимо выделить какие-то строки или ячейки в зависимости от их контекста, то можно обратиться за помощью к контекстуальным (Contextual) классам. Всего их 5 штук.
Элемент
Описание
.active
Раскрашивает строку/ячейку в тот же цвет, как и при использовании прошлого инструмента.
.danger
Инициализирует потенциально опасные действия. Выделяется красным цветом.
.success
Оповещает об успешном действии (цвет – зеленый).
.warning
Светло-розовым цветом выделяет элементы, которым стоит уделить внимание.
.info
Указывает голубым на расположение нейтральной информации.
Так, в нашем примере перечисленные Contextual Classes можно применить, чтобы выделить какие товары есть на складе, а какие не завезли.
Название конфет
Тип
Стоимость
«Ромашка»
Шоколадные
110.50
«Шипучка»
Леденец
97.90
«Мармеладные мишки»
Желатиновые
250.00
Шаг 6. Компактнее, друзья, компактнее!
Чтобы уменьшить расстояние между строками был создан такой механизм, как .table-condensed. Он урезает внутренние отступы (padding) в половину. Добавьте его в уже известное вам место в программной реализации и проанализируйте результаты. Я же далее в своей программе этот прием использовать не буду.
Шаг 7. Сделать ее отзывчивой
Фреймворк предоставляет еще один очень полезный класс, который преобразовывает указанные табличные представления в отзывчивые. В этом случае последние сжимаются до размеров веб-страницы, однако само содержимое уменьшается до определенного количества пикселей, а после снизу появляется скролл.
За все названные действия отвечает .table-responsive. Его нужно добавить в блок, охватывающий всю табличную реализацию.
Название конфет
Тип
Стоимость
«Ромашка»
Шоколадные
110.50
«Шипучка»
Леденец
97.90
«Мармеладные мишки»
Желатиновые
250.00
Вот и все! Очень надеюсь, что вам понравилась моя статья. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на понравившиеся публикации с друзьями. До встречи! Пока-пока!
На этом уроке Вы научитесь создавать HTML таблицы и оформлять их с помощью CSS классов платформы Twitter Bootstrap 3.
На веб-страницах таблицы используются для того, чтобы представить Ваши данные в виде двухмерной структуры, состоящей из строк, столбцов и ячеек.
Создание таблицы осуществляется посредством тегов языка HTML. После создания таблицы веб-разработчик переходит к её оформлению с помощью написания правил CSS. Данный процесс можно значительно упростить, используя большое количество готовых CSS классов платформы Twitter Bootstrap 3. Процесс оформления таблицы с помощью Twitter Bootstrap осуществляется путём добавления к таблице или к её различным частям (строке, ячейке) соответствующих классов. Задавая те или иные классы, Вы тем самым задаёте то или иное оформление таблицы.
Основы создания таблиц в HTML
Создание таблицы в HTML начинается с элемента table (
.
), внутри которого помещают шапку (
.
) и основное содержимое (
.
). Далее в элемент thead и tbody помещают строки (
.
). После этого в элементе tr (
.
) создают ячейки с помощью элементов td (
.
) и th (
.
), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент th (
.
) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.
Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:
Оформление таблиц с помощью CSS классов Bootstrap
Базовое оформление таблиц
Оформление таблиц по типу полос «зебры»
Создание таблицы с границами
Выше приведенный пример будет выглядеть примерно так:
№ п/п
Имя
Фамилия
E-mail
1
Иван
Чмель
ivan@mail.ru
2
Петр
Щербаков
petr@mail.ru
3
Юрий
Голов
yuri@mail.ru
Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)
Выше приведенный пример будет выглядеть примерно так:
№ п/п
Имя
Фамилия
E-mail
1
Иван
Чмель
ivan@mail.ru
2
Петр
Щербаков
petr@mail.ru
3
Юрий
Голов
yuri@mail.ru
Создание сжатой или компактной таблицы
Выше приведенный пример будет выглядеть примерно так:
Дополнительные акцентные классы для строк таблицы
Существуют вспомогательные классы, которые позволяют выделить строку или отдельные ячейки различным цветом посредством окраски их фона.
Вышеприведенный пример будет выглядеть примерно так:
Создание адаптивной таблицы с помощью Bootstrap
С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.
Табличные теги, поддерживаемые Twitter Bootstrap 3
В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.
Что такое Бутстрап и как его использовать для веб-верстки?
Bootstrap представляет собой js и css-фреймворк с уже написанным кодом. Целью применения этого фреймворка является существенное упрощение процедуры веб-разработки. Bootstrap – это бесплатный инструмент, который позволяет редактировать исходный код в соответствии с задачами разработчика. Данное обстоятельство является одним из главных преимуществ Bootstrap.
Установка Bootstrap
Для подключения файлов фреймворка к html-файлу необходимо скачать нужный фреймворк на сайте getbootstrap.com и скопировать его содержимое в проект. После этого разработчик должен подключить те файлы, которые он планирует использовать. Наиболее востребованными файлами в bootstrap верстке считаются:
Перечисленные файлы являются типичным набором фреймворка. Однако у разработчика есть гораздо больше возможностей. Он может изменять фреймворки под свои требования.
Русскоязычная документация
На сайте getbootstrap.com вся информация указана на английском языке. Из-за этого у некоторых русскоязычных разработчиков могут возникнуть проблемы с пониманием доступных возможностей фреймворка. Русскоязычную справку по Bootstrap можно найти в разделе Getting Started. В самом низу этого раздела будет указана ссылка на переводы, в том числе и на русский. Стоит заметить, что на данный момент еще не вся техническая документация переведена на русский язык (около 75%).
Сетка Бутстрапа
Основным элементом Бутстрапа считается адаптивная сетка. Именно она обуславливает ценность данного фреймворка. Сетка позволяет оперативно создавать адаптивные шаблоны. Что самое главное, разработчикам не потребуется знание и понимание медиа запросов. Верстка сайта Bootstrap берет на себя ответственность за реализацию адаптивности.
Особенности работы с сеткой
Для понимания того, как работать с адаптивной сеткой, необходимо представить ее в виде html-таблицы с рядами и ячейками. Существует два варианта сетки:
Во втором случае используется класс container, который позволяет присвоить общем блоку необходимую ширину в пикселях. Этот блок не будет увеличиваться больше заданной величины.
В сетке Бутстрап также используется container-fluid. Наличие этого класса свидетельствует о том, что сетка является резиновой и не имеет каких-либо ограничений по размеру. Следовательно, пользователи смогут увидеть сайт во всю ширину, вне зависимости от размера монитора.
В container принято размещать ряды сетки. Это означает, что в «контейнер» помещаются все блоки, стоящие в одной строке. Для примера работы «контейнера» можно взять стандартный шаблон сайта:
В этом случае есть 3 колонки – шапка, основной контент и левая колонка, а также футер. Следовательно, для создания подобного сайта будет использоваться такая разметка:
Эту разметку нельзя назвать полноценной, так как в ней нет ячеек. В бутстрап верстке ячейки принято называть колонками. Сетка Bootstrap обычно состоит из 12 колонок. Она может быть внедрена в блок любого размера. Это обусловлено тем, что для обозначения ширины колонок указываются не пиксели, а проценты.
Особенности работы 12-колоночной системы
По мнению опытных разработчиков, самым главным вопросом, относящимся к Бутстрапу, являются нюансы работы 12-колоночной системы. Знание этих нюансов открывает разработчикам путь к оперативной адаптивной верстке.
Верстка на Bootstrap предусматривает использование 4 классов, предназначенных для изменения параметров блоков:
Стоит добавить, что в этой системе с целью изменения размеров принято указывать числа от 1 до 12.
Изучив особенности этой системы, выше указанный код может быть исправлен и написан подобающим образом:
В этой разметке без проблем разберется любой опытный веб-программист. Прежде всего, необходимо создать шапку, которая в принципе может не находится в сетке бутстрапа. Это связано с тем, что шапка, как правило, занимает все 100% ширины сайта. В нашем примере мы все-таки отправим шапку в «контейнер».
Изучая вышеуказанный код, у вас должен возникнуть вопрос: для чего необходим класс col-md-12? Этот класс необходим для передачи браузера следующего сообщения: на устройствах, относящихся к классу md (ноутбуки и нетбуки) ширина сетки должна составлять 12 из 12 колонок. Другими словами, здесь должно использоваться 100% от ширины ряда.
Что происходит с шириной сетки на других устройствах, учитывая отсутствие каких-либо явных указаний в коде? На устройствах, относящихся к классу lg ширина также будет 100%. Это обусловлено тем, что значения для больших дисплеев определяются по принципу наследования. Для меньших дисплеев это правило не действует. Поэтому, если разработчик указал col-xs-6, ширина колонок на любых устройствах будет равна 50%. Если же разработчик указал col-lg-6, то эта ширина будет актуальна исключительно для больших экранов. Об этой особенности должен знать любой веб-разработчик, который использует адаптивную верстку Bootstrap 4.
И все-таки, что происходит с экранами меньшего размера, если ширина блока явно не задана? В данном случае ширина по умолчанию будет равна 100%.
Следующий пример на порядок сложнее. Теперь разработчику необходимо расположить в одном ряду контент-блоки и боковой блок. Данная задача решается следующим образом:
Этот код отправляет браузеру следующее сообщение: ширина контент-блока будет равна 66% на всех экранах кроме экстра-маленьких. А вот на самых маленьких дисплеях по умолчанию сохраняется 100% ширина. Такой вариант кода – это не просто пример. На практике именно эта разметка используется чаще всего.
Что касается боковой колонки, то ее ширина буде равна 33% на маленьких, средних и больших дисплеях. Следовательно, на экране экстра-маленького размера ширина по дефолту будет равна 100%. Все очень просто.
Вложенная сетка Bootstrap
Во всех перечисленных примерах мы разбивали шаблон исключительно на основные блоки. Но стоит понимать, что на практике каждый из блоков может быть разделен на колонки. Тривиальный пример – в контент-блоке может выводиться список услуг в несколько колонок.
В данной ситуации необходимо создать внутри блока вложенную сетку. Она также будет иметь 12 колонок. Стоит заметить, что верстка сайта Bootstrap предусматривает возможность использования неограниченного числа вложенных сеток.
В приведенном ниже примере внутри блока создается вложенная сетка:
В указанном примере внутри контента создается вложенная сетка. Внутри вложен ряд, а в нем три блока с различными товарами (в данном случае велосипедами). Если скопировать класс col-sm-4 и дополнительно вставить его два раза, то получится следующее:
Здесь стоит отметить один важнейший нюанс – для адаптации изображений под блоки, в которых они расположены, необходимо задать класс img-responsive. Альтернативный вариант предусматривает написание такого кода в style.css:
После этого остается только сохранить код и подключить файл css к созданному проекту. Изображения по дефолту будут адаптивными. Без бустрапа процесс адаптации картинок получился бы намного дольше и сложнее.
Отдельно стоит сказать о том, что в процессе создания вложенной сетки не нужно указывать дополнительный блок с классом container. Это обусловлено тем, что «контейнером» является именно тот блок, в котором размещается вложенная сетка.
Резюмируя, необходимо сказать, что благодаря бутстрапу веб-разработчик может создавать безграничное количество колонок в любом блоке. За счет этого есть возможность создавать адаптивный шаблон любой сложности. При этом процесс разработки не займет много времени.
Responsive-утилиты
Среди других возможностей бутсрапа можно отметить наличие так называемых Responsive-утилит. Благодаря этим утилитам, разработчик имеет возможность скрывать или, наоборот, открывать блоки на нужной ширине. Таким образом, у разработчика появляется возможность скрывать боковые блоки на дисплеях смартфонов, добавлять новые элементы верстки на экранах персональных компьютеров и т.д.
Для того чтобы использовать возможности Responsive-утилит, следует добавить классы выбранному блоку. Для скрытия блока следует использовать такой класс:
В этом примере класс hidden-xs необходим для скрытия футера на маленьких дисплеях. На устройствах с большим размером экрана футер будет всегда виден.
Обратный пример. Если на маленьких дисплеях необходимо показать какой-либо блок, веб-разработчик должен указать класс visible-xs-block. Этот код означает, что пользователи будут видеть блок исключительно на дисплеях смартфонов.
Классы Responsive-утилит прописываются следующим образом:
В этой статье разберём сетку Bootstrap 4. Сетка – это базовая часть этого фреймворка, которая позволяет очень быстро и достаточно просто верстать адаптивные шаблоны.
Сетку Bootstrap 4 можно использовать отдельно (без других компонентов). Этот вариант применения фреймворка тоже используется веб-разработчиками, т.к. не всегда готовые Bootstrap элементы, такие как кнопки, навигационные панели, таблицы и прочие компоненты можно использовать в рамках того или иного проекта. Зачастую это касается проектов с уникальным дизайном. В этом случае нужные элементы проще написать с нуля самостоятельно, вместо того чтобы переписывать готовые компоненты Bootstrap.
В этом случае к проекту достаточно подключить из архива только файл «bootstrap-grid.min.css».
Назначение Bootstrap сетки. Контрольные точки
Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.
Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.
Следующий шаг – это разобраться с тем, что такое адаптивный макет сайта.
Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.
Более подробно почитать про адаптивные макеты можно в этой статье.
На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:
Контрольные точки Bootstrap сетки
Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.
Ширина viewport браузера
Контрольная точка (название устройства)
>=0
без обозначения (xs)
>=576px
sm
>=768px
md
>=992px
lg
>=1200px
xl
Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.
Из чего состоит сетка?
Сетка Bootstrap 4 состоит из:
Все эти части сетки – это обычные HTML элементы, к которым просто добавлены определённые классы.
Сетка Bootstrap 4 — Обёрточный контейнер
Ширина viewport браузера
Контрольная точка (название устройства)
Ширина адаптивно-фиксированного контейнера (container)
>=0
без обозначения (xs)
100%
>=576px
sm
540px
>=768px
md
720px
>=992px
lg
960px
>=1200px
xl
1140px
Это означает, что адаптивно-фиксированный контейнер будет иметь :
При верстке макета не следует одни обёрточные контейнеры помещать внутрь других.
Ряды (.row)
Ряд – это элемент бутстрап сетки, который выступает в роли непосредственного контейнера для адаптивных блоков (других элементов сетки, которые мы рассмотрим ниже).
С точки зрения CSS Flexbox, ряд – это flex-контейнер, а адаптивные блоки – это flex-элементы.
Компенсация внутренних padding полей осуществляется так же как и в Bootstrap 3, за счёт отрицательных левых и правых внешних отступов, равных 15px ( margin-left:-15px и margin-right:-15px ).
Пример, в котором показано, что вне зависимости от того, как на каком уровне вложенности непосредственно находится некоторый контент, его отступ от левого и правого края при правильной HTML структуре всегда будет равняться 15px:
Адаптивные блоки (.col)
Создание адаптивного блока осуществляется очень просто посредством добавления одного или нескольких классов col-?-? к необходимому HTML элементу, расположенному непосредственно в ряду.
Данное число определяет, какую часть ширины будет занимать адаптивный блок начиная с указанной контрольной точки от ширины родительского блока, т.е. ряда. При этом ширина ряда в числовом выражении (колонках Bootstrap) по умолчанию равна 12.
Например, блок с классом col-md-4 начиная с контрольной точки md будет занимать 4/12 ширины ряда, т.е. 33,3% (т.е. 4/12*100% = 33.3%).
Ширина viewport
Контрольная точка
Класс
Ширина адаптивного блока
Крохотная ширина (>=0)
без обозначения (xs)
col-?
от col-1 до col-12
Маленькая ширина (>=576px)
sm
col-sm-?
от col-sm-1 до col-sm-12
Средняя ширина (>=768px)
md
col-md-?
от col-md-1 до col-md-12
Большая ширина (>=992px)
lg
col-lg-?
от col-lg-1 до col-lg-12
Очень большая ширина (>=1200px)
xl
col-xl-?
от col-xl-1 до col-xl-12
Например, рассмотрим, какую ширину будет иметь следующий адаптивный блок:
Список, объясняющий какую ширину адаптивный блок, будет иметь на разных контрольных точках:
При указании ширины адаптивному блоку мы указываем класс, содержащий контрольную точку, начиная с которой данная ширина будет действовать. Эту ширину данный блок будет иметь до тех пор, пока она будет переопределена с помощью другого класса, действие которого начинается с более большой ширины viewport.
Адаптивные блоки без указания количества колонок
Рассмотрим несколько примеров.
1. Создание в ряду 5 адаптивных блоков с одинаковой шириной.
2. Ширина блоков с классом col при наличии в линии адаптивного блока с количеством колонок.
В некоторых версиях браузерах Safari есть ошибка при использовании такой разметки, она может быть разбита на несколько линий.
Исправить это можно 2 способами:
Кроме этого, сетка Bootstrap 4 позволяет располагать адаптивные блоки без указания количества колонок на нескольких линиях.
Если данное действие необходимо использовать только для некоторых контрольных точек, то к нему (классу w-100 ) дополнительно нужно ещё добавить служебные отзывчивые классы Bootstrap 4.
В этом примере переноситься на новую линию адаптивные блоки будут только до действия контрольной точки md :
Расположение адаптивных блоков в ряду
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.
Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:
Основной принцип верстки макета
Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.
При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.
Размещать контент веб-страницы следует только в адаптивных блоках.
Например, в имеющийся макет, а именно в адаптивный блок col-8 вложим ещё 2 блока:
Для этого предварительно необходимо в блок col-8 положить ряд (контейнер для адаптивных блоков):
После этого добавим 2 адаптивных блока в ряд:
Выравнивание адаптивных блоков
Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.
Вертикальное выравнивание адаптивных блоков
Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к row :
Например, выровняем все адаптивные блоки по центру линии ряда:
По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.
Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:
Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.
Например, выравниваем адаптивный блок 2 по нижнему краю линии:
Горизонтальное выравнивание адаптивных блоков
Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:
Например, распределим адаптивные блоки в горизонтальном направлении равномерно:
Адаптивная разметка без полей
Обратите внимание, что данный класс ( no-gutters ) действует только на адаптивные блоки, которые непосредственно размещены в этом ряду. Т.е. на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию padding не распространятся.
Смещение адаптивных блоков
В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:
Классы offset
Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.
Данные классы имеют следующий синтаксис:
– контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).
<2>– величина смещения, указываемая с помощью количества колонок Bootstrap.
В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.
Смещение с помощью margin классов
Изменение визуального порядка следования адаптивных блоков
По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.
Вместо необходимо указать число от 1 до 12.
Например, изменим порядок следования двух адаптивных блоков:
Ещё один пример (с использованием адаптивных классов order ):
Пример с использованием классов order как с числом, так и со словами first и last :
Пример адаптивной вёрстки на сетке Boostrap 4
1. Создаём разметку блока для мобильных устройств ( xs ).
2. Настраиваем разметку для контрольной точки sm :
3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах md и lg :
4. Создаём разметку для xl :
Убираем ненужные контрольные точки у адаптивных блоков:
Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).
