1. Bootstrap Grid System
2. Контейнеры
3. Контейнеры с фиксированной шириной
4. Контейнеры для жидкости
5. Колонны и ряды
6. Добавление столбцов
7. Настройка колонок для разных устройств
8. Вложенные столбцы

Эта статья была обновлена ​​для работы с Bootstrap v.4.2.

Bootstrap - это фреймворк для создания сайта. Это исключает необходимость создания базы для сайта. Вместо этого вы можете загрузить файлы Bootstrap на свой сервер, а затем добавить шаблон Bootstrap. Есть инструкции о том, как это сделать в нашем Настройка Bootstrap статья.

Это даст вам базовый сайт. Тем не менее, что действительно делает Bootstrap впечатляющим, так это широкий спектр компонентов сайта, которые можно добавлять на сайт. Поскольку Bootstrap уже имеет встроенные CSS и Javascript, компоненты уже стилизованы и функциональны. Конечно, вы можете редактировать CSS и Javascript, чтобы настроить свой сайт по своему вкусу.

Bootstrap Grid System

Bootstrap использует сеточную систему для правильного масштабирования компонентов для разных экранов просмотра. Это может показаться странным, но в этой статье мы расскажем о том, как работает система сетки.

Сетка Bootstrap состоит из контейнеров, строк и столбцов, которые используются для определения макета сайта.

Контейнеры

Контейнеры начальной загрузки используются для определения ширины макета. Элементы добавляются в контейнеры и будут зависеть от ширины контейнера. Контейнер - это элемент <div> с class = «container». Контейнер повлияет на все элементы в контейнере <div>.

<div class = «container»> <! - содержимое контейнера перейдите сюда -> </ div>

Контейнеры имеют отступ по 15 пикселей по умолчанию, который защищает его от конца страницы и от других контейнеров.

Строки и столбцы будут добавлены внутри контейнеров.

Не вкладывайте контейнер в контейнер.

Контейнеры с фиксированной шириной

Контейнеры имеют фиксированную ширину по умолчанию, которая будет меняться в зависимости от размера устройства просмотра. Ширина устройства просмотра и соответствующая ширина контейнера указаны в таблице ниже:

Ширина устройства просмотра Ширинаконтейнера

менее 575 пикселей Автоматически от 576 до 767 пикселей 540 пикселей от 768 до 991 пикселей 720px от 992 до 1199 пикселей 960 пикселей 1200 пикселей или выше 1140 пикселей

Контейнеры для жидкости

Если вы не хотите, чтобы контейнеры изменяли размеры при фиксированной ширине, вы можете использовать class = ”container-liquid” вместо class = ”container”. Это приведет к тому, что контейнеры будут всегда соответствовать ширине экрана просмотра, а не изменяться до фиксированной ширины.

Колонны и ряды

Сетка Bootstrap позволяет разместить до 12 столбцов на странице. Эти столбцы могут быть использованы отдельно или сгруппированы вместе. Чтобы сгруппировать столбцы вместе, вам нужно создать строки. Чтобы создать строки, добавьте div с class = «row», который содержит код столбца.

Ряды всегда должны быть размещены внутри контейнера.

Пример:

<div class = ”container”> <div class = ”row”> <div class = ”col-xs-6 col-md-4”> Содержимое в столбце. </ div> </ div> </ div >

Ряды охватывают ширину контейнера. Они имеют отрицательное поле в 15 пикселей в конце, по существу удаляя поле в 15 пикселей, установленное его контейнером. Это связано с тем, что каждый столбец имеет собственное поле в 15 пикселей, которое заменяет поле контейнера.

Строки имеют отступ -15 пикселей, который отменяет заполнение контейнера 15 пикселей.

Столбцы, выровненные рядом друг с другом, будут иметь отступ в 15 пикселей, в результате чего между двумя столбцами будет отступ в 30 пикселей. Содержимое в столбце будет зависеть от поля в 15 пикселей.

Столбцы имеют отступ 15 пикселей. Столбцы рядом друг с другом будут заполнены 15 пикселями, что приведет к буферу 30 пикселов.

Добавление столбцов

Размеры столбцов начальной загрузки можно различить по классам столбцов. Классы столбцов обычно устанавливаются в формате « col- prefix - ColumnNumber », который будет напоминать этот пример:

<div class = «container»> <div class = «row»> <div class = «col-sm-8»> Содержимое </ div> <div class = «col-sm-4»> Содержимое </ div> </ div> </ div>

Столбцы должны быть размещены внутри ряда.

Замените префикс и ColumnNumber предпочтительным размером префикса и количеством столбцов.

Префиксы определяют, для какого устройства предназначен столбец. Например, sm предназначен для небольших экранов, таких как телефоны.

Столбецпрефиксаразмерадля очень

малого Нет (по умолчанию) .col- <576 Small (телефоны) sm .col-sm- ≥576px Средний (планшеты) md .col-md- ≥768px Large (ноутбуки) lg .col-lg- ≥ 992px Extra Large (рабочие столы) xl .col-xl- ≥1200px

ColumnNumber в конце класса сетки, например class = «col-md-4», определяет, сколько столбцов он должен охватывать. В примере class = «col-md-4» содержимое внутри <div> столбца будет охватывать четыре столбца на устройстве среднего размера, например на ноутбуке. Если для столбца установлен префикс для меньшего устройства, такого как sm , он будет отображаться аналогично на больших устройствах. Другими словами, столбец, определенный как sm, будет работать для устройств с размером планшета или больше.

Чтобы столбцы были расположены рядом друг с другом, включите их в один ряд.

<div class = "row"> <div class = "col-md-4"> Содержимое </ div> <div class = "col-md-8"> Содержимое </ div> </ div>

В конце вы хотите, чтобы количество столбцов в строке составляло до двенадцати.

Настройка колонок для разных устройств

Вы также можете настроить столбцы так, чтобы они имели разную ширину столбцов в зависимости от размера устройства. Чтобы сделать это, вы просто включаете в свой класс еще один col-prefix-columnNumber. Это будет выглядеть примерно так:

<div class = ”container”> <div class = ”row”> <div class = ”col-xs-6 col-sm-4”> Content </ div> </ div> </ div>

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

Вложенные столбцы

Вы можете вкладывать столбцы, если у вас есть настроенный контейнер, строка и столбец. Для этого добавьте новую строку <div> в коде родительского столбца, затем добавьте вложенные столбцы. Он будет функционировать так, как если бы область внутри новой строки представляла собой собственную сеточную систему.

<div class = «container»> <div class = «row»> <div class = «col-sm-6»> Содержание родительского столбца <div class = «row»> <div class = «col-xs-6» > Содержимое дочернего столбца </ div> </ div> </ div> </ div> </ div>

Похожие