Bootstrap 4. Контейнер и сетка. Часть 1
17.06.2019
Теги: Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк • ШаблонСайта
Bootstrap 4 — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрого создания адаптивных дизайнов сайтов. В сущности — это просто набор сss- и js-файлов. После подключения этих файлов к странице станут доступны большое количество готовых классов и компонентов.
Сетка
Сетка — это набор предопределённых css-классов, с помощью которых можно задать необходимое поведение блокам и построить с их помощью адаптивный макет сайта.
Оберточный контейнер
Оберточный контейнер — это элемент сетки, с которого начинается создание макета для всей страницы или её части (шапка, основной области, подвал). Контейнер может быть адаптивно-фиксированным (класс container) или адаптивно-резиновым (класс container-fluid).
- Адаптивно-фиксированный контейнер имеет постоянную ширину в пределах некоторого диапазона ширины окна браузера. Кроме того, контейнер центрирует себя в горизонтальном направлении и задает внутренние отступы (
padding) слева и справа по15рх. - Адаптивно-резиновый контейнер занимает всю ширину окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер, задает внутренние отступы (
padding) слева и справа по15рх.
.container { /* адаптивно-фиксированный контейнер */
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid { /* адаптивно-резиновый контейнер */
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Ряды и адаптивные блоки
Следующий элемент сетки — это ряд (блок div с классом row), который применяется для оборачивания других элементов (адаптивных блоков). Первое назначение ряда — это нейтрализация положительного внутреннего отступа (15px слева и справа) контейнера. А второе — он служит flex-контейнером для flex-элементов (адаптивных блоков). Как нетрудно догадаться, сетка Bootstrap 4 построена на Flexbox.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
Последний элемент сетки — адаптивные блоки (div с классом col-{1…12} или col-{sm…xl}-{1…12}). Эти блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру. Адаптивный блок на разных устройствах может иметь разную ширину.
/* xs устройства */
.col, .col-auto,
.col-1, .col-2, ..., .col-11, .col-12,
/* sm устройства */
.col-sm, .col-sm-auto,
.col-sm-1, .col-sm-2, ..., .col-sm-11, .col-sm-12,
/* md устройства */
.col-md, .col-md-auto,
.col-md-1, .col-md-2, ..., .col-md-11, .col-md-12,
/* lg устройства */
.col-lg, .col-lg-auto,
.col-lg-1, .col-lg-2, ..., .col-lg-11, .col-lg-12,
/* xl устройства */
.col-xl, .col-xl-auto,
.col-xl-1, .col-xl-2, ..., .col-xl-11, .col-xl-12 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
Адаптивные блоки (или колонки) имеют горизонтальные отступы, но их можно удалить, если добавить класс no-gutters для ряда:
<div class="container"> <div class="row no-gutters"> <div class="col-md-4">.....</div> <div class="col-md-4">.....</div> <div class="col-md-4">.....</div> </div> </div>
.no-gutters > .col, .no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}Медиа-запросы
/* Очень маленькие устройства (xs, менее чем 576px) */
/* Без медиа запросов, так как в Bootstrap это по умолчанию */
/* Маленькие устройства (sm, 576px и выше) */
@media (min-width: 576px) { ... }
/* Средние устройства (md, 768px и выше) */
@media (min-width: 768px) { ... }
/* Большие устройства (lg, 992px и выше) */
@media (min-width: 992px) { ... }
/* Очень большие устройства (xl, 1200px и выше) */
@media (min-width: 1200px) { ... }| Extra small (<576px) | Small (≥576px) | Medium (≥768px) | Large (≥992px) | Extra large (≥1200px) | |
|---|---|---|---|---|---|
| Ширина контейнера | auto | 540 | 720 | 960 | 1140 |
| Класс префикса | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Заготовка страницы
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
/*
Стили для самых маленьких устройств, концепция «Mobile First». Эти стили будут применяться
и для всех других экранов (sm, md, lg, xl), если не будут переопределены в media-запросах.
*/
body {
font-family: 'Open Sans', sans-serif;
}
img {
max-width: 100%;
}
/*
Медиа-запросы, переопределяющие стили для xs-устройств
*/
/* Маленькие устройства (sm, 576px и выше) */
@media (min-width: 576px) { ... }
/* Средние устройства (md, 768px и выше) */
@media (min-width: 768px) { ... }
/* Большие устройства (lg, 992px и выше) */
@media (min-width: 992px) { ... }
/* Очень большие устройства (xl, 1200px и выше) */
@media (min-width: 1200px) { ... }Примеры использования сетки
Первый пример
<div class="row"> <div class="col-12 col-sm-9 col-md-7 col-lg-5 col-xl-3">.....</div> </div>
Данный адаптивный блок будет иметь:
- на
xs-устройствах: ширину, равную 12 колонкам - на
sm-устройствах: ширину, равную 9 колонкам - на
md-устройствах: ширину, равную 7 колонкам - на
lg-устройствах: ширину, равную 5 колонок - на
xl-устройствах: ширину, равную 3 колонкам
Второй пример
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию, переходят на следующую.
<div class="row"> <div class="col-6">1</div> <div class="col-6">2</div> <div class="col-12">3</div> <div class="col-8">4</div> </div>
Третий пример
При указании ширины адаптивному блоку для какой-то контрольной точки, она будет распространяться не только на эту точку, но и на все следующие, если они не заданы.
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-4">Sidebar left</div> <div class="col-md-6 col-sm-8">Page content</div> <div class="col-md-3">Sidebar right</div> </div> </div>
На устройствах md, lg и xl:
На устройствах sm:
На устройствах xs:
Четвертый пример
Группа классов col, col-sm, col-md, col-lg, col-xl предназначена для создания адаптивных блоков, ширина которых будет зависеть от свободного пространства линии. Распределение не занятой ширины (свободного пространства) линии между всеми такими блоками осуществляется равномерно.
<!-- Пять колонок одинаковой ширины --> <div class="row"> <div class="col">1/5</div> <div class="col">1/5</div> <div class="col">1/5</div> <div class="col">1/5</div> <div class="col">1/5</div> </div>
<!-- Расчет ширины блоков при наличии блока с указанием ширины --> <div class="row"> <div class="col">Ширина 1/3 свободного пространства</div> <div class="col-7">Блок с указанием ширины</div> <div class="col">Ширина 1/3 свободного пространства</div> <div class="col">Ширина 1/3 свободного пространства</div> </div>
<!-- Четыре адаптивных блока по 50% ширины в двух линиях --> <div class="row"> <div class="col">.....</div> <div class="col">.....</div> <!-- Имеет ширину 100%, что позволяет перенести блоки на вторую линию --> <div class="w-100"></div> <div class="col">.....</div> <div class="col">.....</div> </div>
Если данное действие необходимо использовать только для некоторых контрольных точек, то к классу w-100 дополнительно нужно добавить служебные отзывчивые классы — например, d-sm-none или d-lg-none.
Пятый пример
Группа классов col-auto, col-sm-auto, col-md-auto, col-lg-auto и col-xl-auto предназначена для создания адаптивных блоков, ширина которых будет определяться в соответствии с их содержимым.
<div class="row"> <div class="col">Ширина определяется оставшимся пространством</div> <div class="col-md-6">Блок с указанием ширины — 50%</div> <div class="col-auto">Ширина блока определяется содержимым</div> </div>
Стили, чтобы сразу видеть, какая сейчас ширина окна браузера:
.container > .row > [class^="col"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: #FF6666;
border: 1px solid #000;
color: #000;
}
@media (min-width: 576px) {
.container > .row > [class^="col"] {
background-color: #FF8C00;
}
}
@media (min-width: 768px) {
.container > .row > [class^="col"] {
background-color: #FFFF00;
}
}
@media (min-width: 992px) {
.container > .row > [class^="col"] {
background-color: #32CD32;
}
}
@media (min-width: 1200px) {
.container > .row > [class^="col"] {
background-color: #00BFFF;
}
}Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк • Шаблон сайта • Сетка