В этой статье мы обсудим систему Bootstrap Grid.
Содержание:
Что такое сетка?
В графическом дизайне сетка Bootstrap представляет собой структуру (обычно двумерную), состоящую из серии пересекающихся прямых (вертикальных, горизонтальных) линий, используемых для структурирования контента. Он широко используется для проектирования макета и структуры контента в дизайне печати. В веб-дизайне это очень эффективный способ быстрого и эффективного создания согласованного макета с использованием HTML и CSS.
Проще говоря, сетки в веб-дизайне организуют и структурируют контент, упрощают сканирование веб-сайтов и уменьшают когнитивную нагрузку на пользователей.
Что такое система загрузочной сетки?
Как указано официальной документацией Bootstrap для сетчатой системы -
Bootstrap включает в себя гибкую мобильную первую систему флюидов, которая соответственно масштабирует до 12 столбцов при увеличении размера устройства или видового экрана. Он включает в себя предопределенные классы для простых вариантов макета, а также мощные микшины для создания более семантических макетов.
Поясним сказанное выше. Bootstrap 3 является мобильным первым в том смысле, что код для Bootstrap теперь начинается с таргетинга на меньшие экраны, такие как мобильные устройства, планшеты, а затем «расширяет» компоненты и сетки для больших экранов, таких как ноутбуки, настольные компьютеры.
Мобильная стратегия
- Содержание
- Определите, что является самым важным.
- Макет
- Сначала создайте меньшую ширину.
- Сначала базовое мобильное устройство с адресом CSS; медиа-запросы для планшетов, настольных компьютеров.
- Прогрессивное улучшение
- Добавьте элементы по мере увеличения размера экрана.
Работа системы сетки Bootstrap
Сетевые системы используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент. Вот как работает сетка Bootstrap -
- Строки должны быть помещены в класс
.container
для правильного выравнивания и заполнения. - Используйте строки для создания горизонтальных групп столбцов.
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.
- Для быстрого создания раскладки сетки доступны предопределенные классы сетки, такие как
.row
и.col-xs-4
. LESS mixins также могут использоваться для более семантических раскладок. - Столбцы создают водосточные желоба (промежутки между содержимым столбца) через прокладку. Это заполнение смещается в строках для первого и последнего столбцов с помощью отрицательного поля на
.rows
. - Столбцы сетки создаются с указанием количества двенадцати доступных столбцов вы хотите охватить. Например, три равных столбца будут использовать три
.col-xs-4
.
Запросы мультимедиа
Медиа-запрос - действительно причудливый термин для «условного правила CSS». Он просто применяет некоторые CSS, основанные на определенных условиях. Если эти условия выполнены, применяется стиль.
Медиа-запросы в Bootstrap позволяют перемещать, отображать и скрывать контент на основе размера вида экрана. Следующие медиа-запросы используются в файлах LESS для создания ключевых контрольных точек в сетке Bootstrap.
Иногда они расширяются до максимальной ширины для ограничения CSS для более узкого набора устройств.
Запросы для СМИ имеют две части: спецификацию устройства, а затем правило размера. В приведенном выше случае устанавливается следующее правило:
Рассмотрим эту линию -
Для всех устройств, независимо от типа с минимальной шириной: @screen-sm-min
, если ширина экрана становится меньше, чем @screen-sm-max
, тогда сделайте что-нибудь.
Параметры сетки
В следующей таблице приведены аспекты того, как grid-система Bootstrap работает на нескольких устройствах -
Экстренные мелкие устройства Телефоны (меньше 768px) | Маленькие устройства Планшеты (больше или равно 768px) | Средние устройства Настольные компьютеры (больше или равно 992px) | Крупные устройства Настольные компьютеры (больше или равно 1200px) | |
---|---|---|---|---|
Поведение сетки | Горизонтально во все времена | Свернуто, чтобы начать, горизонтально выше точек останова | Свернуто, чтобы начать, горизонтально выше точек останова | Свернуто, чтобы начать, горизонтально выше точек останова |
Максимальная ширина контейнера | Нет (авто) | 750px | 970px | 1170px |
Префикс класса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Количество столбцов | 12 | 12 | 12 | 12 |
Максимальная ширина столбца | Авто | 60px | 78px | 95px |
Ширина желоба | 30px (15 пикселей на каждой стороне столбца) | 30px (15 пикселей на каждой стороне столбца) | 30px (15 пикселей на каждой стороне столбца) | 30px (15 пикселей на каждой стороне столбца) |
Вкладываемые | да | да | да | да |
Смещения | да | да | да | да |
Колонка заказа | да | да | да | да |
Основная структура сетки
Ниже приведена базовая структура сетки Bootstrap -
Рассмотрим некоторые простые примеры сетки -
- Пример - Сложенные в горизонтальные
- Пример - Среднее и крупное устройство
- Пример: мобильные, планшеты, настольные компьютеры
Отзывчивый столбец сбрасывается
Имея четыре уровня доступных сеток, вы должны столкнуться с проблемами, когда в определенных точках прерывания столбцы не совсем понятны, поскольку один выше других. Чтобы исправить это, используйте комбинацию класса .clearfix
и отвечающих классов утилиты, как показано в следующем примере -
Это приведет к следующему результату - Посмотреть
Измените размер окна просмотра или проверьте его на телефоне для получения желаемого результата в этом примере.
Офсетные столбцы
Смещения являются полезной функцией для более специализированных макетов. Они могут использоваться для перетаскивания столбцов для большего расстояния (например). В .col-хs-*
классы не поддерживают смещения, но они легко тиражироваться с помощью пустой ячейки.
Чтобы использовать смещения на больших дисплеях, используйте классы .col-md-offset-*
. Эти классы увеличивают левое поле столбца на * столбцы, где * варьируются от 1 до 11 .
В следующем примере мы имеем div class = "col-md-6"
. Мы центрируем это, используя класс .col-md-offset-3
.
Это приведет к следующему результату - Посмотреть
Вложенные столбцы
Чтобы вложить содержимое в сетку по умолчанию, добавьте новый .row
и набор столбцов .col-md-*
в пределах существующего столбца .col-md-*
. Вложенные строки должны содержать набор столбцов, которые составляют до 12.
В следующем примере макет имеет два столбца, а второй разбит на четыре прямоугольника на две строки.
Это приведет к следующему результату - Посмотреть
Заказ столбцов
Еще одна приятная особенность системы сетки Bootstrap заключается в том, что вы можете легко писать столбцы в порядке и показывать их в другом. Вы можете легко изменить порядок встроенных столбцов сетки с классами .col-md-push-*
и .col-md-pull-*
, где * варьируется от 1 до 11 .
В следующем примере у нас есть два расположения столбцов, причем левый столбец является самым узким и действует как боковая панель. Мы поменяем порядок этих столбцов, используя классы .col-md-push-*
и .col-md-pull-*
.
Это приведет к следующему результату - Посмотреть
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Бутстрап - Значки - 22/09/2018 17:23
- Бутстрап - Ярлыки - 22/09/2018 17:22
- Бутстрап - Пагинация - разбиение на страницы - 22/09/2018 17:20
- Bootstrap - Breadcrumb - хлебные крошки - 22/09/2018 17:20
- Bootstrap - Navbar - 22/09/2018 17:18
- Бутстрап - Элементы навигации - 22/09/2018 17:17
- Bootstrap - Группы ввода - 22/09/2018 17:17
- Bootstrap - Выпадающие окна и кнопки - 22/09/2018 17:16
- Bootstrap - Группы загрузки - кнопки - 22/09/2018 17:16
- Бутстрап - Выпадающие окна - 22/09/2018 17:15
- Бутстрап - Глификон - 22/09/2018 17:15
- Bootstrap - Отзывчивые утилиты - 22/09/2018 17:14
- Bootstrap - Вспомогательные классы - 22/09/2018 17:14
- Bootstrap - Изображения - 22/09/2018 17:13
- Бутстрап - Кнопки - 22/09/2018 17:13
- Бутстрап - Формы - 22/09/2018 17:12
- Бутстрап - Таблицы - 22/09/2018 17:12
- Бутстрап - Вставка кода - 22/09/2018 17:11
- Бутстрап - Типография - 22/09/2018 17:10
- Bootstrap - Обзор CSS - 22/09/2018 17:10
Предыдущие статьи
- Bootstrap - Настройка среды - 22/09/2018 17:09
- Bootstrap - Обзор - 22/09/2018 17:08
- Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3 - 31/12/2017 16:54
- Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 - 23/12/2017 20:44
- Подключение фреймворка Bootstrap 3 к сайту. Основы сетки шаблона. Часть 1 - 15/12/2017 15:47