Bootstrap , несомненно, является одной из самых популярных фреймворков. Bootstrap, имеющий более 73 тыс. Звезд и 27 тыс. Вилок, также является одним из самых популярных репозиториев GitHub. В моей последней статье « Советы по адаптивному веб-дизайну из CSS» от Bootstrap я объяснил, как Bootstrap функционирует как адаптивный фреймворк. В этой статье мы обсудим смежную тему: Grid System , одна из самых важных концепций в Bootstrap.
Что такое система начальной загрузки?
Как и любая сеточная система, сетка Bootstrap представляет собой библиотеку компонентов HTML / CSS, которые позволяют структурировать веб-сайт и легко размещать его содержимое в нужных местах.
Подумайте о миллиметровке, где каждая страница имеет набор вертикальных и горизонтальных линий. Когда эти линии пересекаются, мы получаем квадраты или прямоугольники.
По Sfoerster (собственная работа) CC-BY-SA-3.0 , через Wikimedia Commons
Ну, это также верно для системы сетки Bootstrap. Это позволяет создавать строки и столбцы, а затем размещать содержимое в «пересекающихся» областях.
Теперь вопрос в том, сколько строк и столбцов вы можете создать, используя систему сетки Bootstrap? Bootstrap позволяет создавать до 12 столбцов и неограниченное количество строк — отсюда и название 12-Grid System . Итак, давайте посмотрим, как мы можем использовать эту систему сетки для создания различных типов макетов.
Начало работы с грид-системой Bootstrap
Естественно, для начала вам понадобятся ресурсы, необходимые для работы Bootstrap. Если вы новичок в Bootstrap, вы можете обратиться к нашей предыдущей статье « Начало работы с Bootstrap» или моей книге « Jump Start Bootstrap» , чтобы глубже понять.
Сетка Bootstrap состоит из 3 вещей:
- Контейнер
- Ряды
- Колонны
Давайте рассмотрим каждое из вышеперечисленных подробнее.
Создание контейнера
Сетка системы Bootstrap нуждается в контейнере для хранения строк и столбцов. Контейнер — это простой элемент <div> с классом .container . Контейнер используется для обеспечения правильной ширины макета, выступая в качестве оболочки для содержимого.
Взгляните на следующую демонстрацию CodePen:
Здесь элемент контейнера оборачивает содержимое и устанавливает левые и правые поля. Он также имеет разную фиксированную ширину в устройствах разных размеров. Посмотрите на следующую таблицу:
| Ширина устройства | Ширина контейнера |
|---|---|
| 1200px или выше | 1170px |
| От 992 до 1199 пикселей | 970px |
| От 768 до 991 пикселей | 750px |
| Менее чем 768 пикселей | авто |
Вы можете выбрать контейнер для жидкости, если вы не любите фиксированный макет. Для этого вы используете класс .container-fluid . Контейнер для жидкости не имеет фиксированной ширины; его ширина всегда будет шириной устройства.
Просто обратите внимание, что как фиксированные, так и жидкостные контейнеры имеют отступ 15 пикселей на левой и правой сторонах
Создание строки
Ряд действует как обертка вокруг столбцов. Строка обнуляет отступ, установленный элементом контейнера, используя отрицательное значение поля -15px как с левой, так и с правой стороны.
Ряд простирается от левого края до правого края элемента контейнера. Он создается путем добавления класса .row к элементу уровня блока внутри контейнера.
Посмотрите на следующий CodePen:
В этой демонстрации вы видите текст, касающийся левого края элемента контейнера. Это связано с тем, что отступ строки был удален строкой из-за отрицательных полей в строке.
Наконец, нет ограничений на количество строк, которые вы можете создать.
Создание столбцов
Bootstrap использует разные префиксы классов столбцов для устройств разных размеров. Эти префиксы показаны в таблице ниже:
| Префикс класса | Размер устройства |
|---|---|
| .col-xs- | <768px |
| .col-SM- | От 768 до 991 пикселей |
| .col-MD- | От 992 до 1199 пикселей |
| .col-LG- | ≥ 1200 пикселей |
Итак, давайте создадим наш первый столбец Bootstrap:
В приведенной выше демонстрации я использовал класс .col-xs-12 для создания одного столбца, который охватывает 12 виртуальных столбцов Bootstrap. Следовательно, ширина этого столбца будет шириной строки.
В приведенной выше демонстрации вы также увидите, что отступы в 15px вновь появляются, чтобы оттолкнуть элемент от контейнера. Это потому, что каждый столбец в Bootstrap имеет отступ 15px.
Вы, должно быть, удивляетесь, почему я использовал префикс класса, который принадлежал к более маленьким устройствам, а именно .col-xs- . В Bootstrap, если для определенного типа устройства определен столбец, он гарантированно будет вести себя аналогичным образом и на более крупных устройствах. Следовательно, столбец, определенный для устройств меньшего размера, будет работать на всех типах устройств .
Давайте теперь создадим макет с двумя столбцами для небольших устройств и проверим его поведение на более крупных устройствах и очень маленьких устройствах. Мы будем использовать префикс класса .col-sm- здесь. Чтобы создать 2 столбца одинаковой ширины, мы должны назначить 6 виртуальных столбцов Bootstrap каждому из них. Таким образом, мы поддерживаем ограничение в 12 виртуальных столбцов Bootstrap для одной строки.
Вот демо:
Вложенность с помощью грид-системы
Вложенность — это один из способов создания сложных дизайнов с использованием системы сетки Bootstrap. Это также тот раздел, где у многих новичков возникают проблемы.
Мы понимаем, что для использования грид-системы Bootstrap нам нужны 3 вещи: контейнер, строки и столбцы. Итак, чтобы вложить систему сетки в столбец, нам понадобятся те же три вещи. Но единственное отличие состоит в том, что контейнер уже определен . В этом случае столбцы будут вести себя как контейнеры для вложенной сетки.
Вот логика: контейнеры обеспечивают заполнение 15px, которое аннулируется строкой. Затем мы определяем столбцы, которые снова имеют отступы в 15 пикселей слева и справа. Итак, чтобы вложить систему сетки в столбец, нам просто нужны строки и столбцы. Для вложенной сетки не .container элементы .container или .container-fluid .
Вот пример вложенной грид-системы:
А как насчет более 12 столбцов?
Это одна из основных причин неупорядоченных макетов Bootstrap. Неправильный расчет при определении количества виртуальных столбцов Bootstrap может привести к неправильной компоновке.
В таком случае будет создана виртуальная строка, а несвязанные столбцы перейдут к следующей строке. Например, если вы определили 2 столбца с классами .col-md-8 и .col-md-5 , второй столбец переместится в новую строку, поскольку для него требуется 5 виртуальных столбцов начальной загрузки, тогда как осталось только 4.
Вспомогательные классы
Bootstrap предоставляет различные вспомогательные классы, которые могут быть полезны в определенных ситуациях при работе с сетками. Эти классы:
-
.clearfix: Обычно используется для очистки чисел с плавающей точкой , добавление этого класса в любой столбец приведет к его автоматическому переключению на новую строку, чтобы помочь вам исправить проблемы, возникающие при неравномерной высоте столбца. - Смещение столбцов : вам не нужно занимать все 12 виртуальных столбцов. Вы можете использовать классы смещения, такие как
.col-xs-offset-*или.col-md-offset-*чтобы оставить определенное количество виртуальных столбцов Bootstrap слева от любого столбца (вроде как невидимые заполнители). - Изменение порядка : Используйте классы, такие как
.col-md-push-*.col-md-pull-*.col-md-push-*и.col-md-pull-*чтобы сместить столбец вправо или влево соответственно.
Бесплатный фрагмент кода
В заключение приведем бесплатный фрагмент кода для 3-х колоночного макета с отзывчивой панелью навигации Bootstrap. Получайте удовольствие и дайте мне знать в комментариях, если в сеточной системе Bootstrap есть что-то, что я не обсуждал здесь, что вы находите интересным, проблемным и т. Д.
(Просто обратите внимание, что макет с тремя столбцами не будет отображаться в CodePen, встроенном выше, но вы можете просмотреть его в полноэкранном режиме).