Bootstrap 3. Контейнер и сетка
12.01.2016
Теги: Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк • ШаблонСайта
Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрого создания адаптивных дизайнов сайтов. В сущности — это просто набор сss- и js-файлов. После подключения этих файлов к странице станут доступны большое количество готовых классов и компонентов.
Сетка
Сетка — это набор предопределённых css-классов, с помощью которых можно задать необходимое поведение блокам и построить с их помощью адаптивный макет сайта.
Оберточный контейнер
Оберточный контейнер — это элемент сетки, с которого начинается создание макета для всей страницы или её части (шапка, основной области, подвал). Контейнер может быть адаптивно-фиксированным (класс container) или адаптивно-резиновым (класс container-fluid).
- Адаптивно-фиксированный контейнер имеет постоянную ширину в пределах некоторого диапазона ширины окна браузера. Кроме того, контейнер центрирует себя в горизонтальном направлении и задает внутренние отступы (
padding) слева и справа по15рх. - Адаптивно-резиновый контейнер занимает всю ширину окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер, задает внутренние отступы (
padding) слева и справа по15рх.
.container { /* адаптивно-фиксированный контейнер */
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid { /* адаптивно-резиновый контейнер */
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Ряды и адаптивные блоки
Следующий элемент сетки — это ряд (блок div с классом row), который применяется только для оборачивания других элементов (адаптивных блоков). Его основное назначение — это нейтрализация положительного внутреннего отступа (15px слева и справа) контейнера.
.row {
margin-right: -15px;
margin-left: -15px;
}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
/* .......... */
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-right: 15px;
padding-left: 15px;
}
Последний элемент сетки — адаптивные блоки (div с классом col-?-?). Эти блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру. Адаптивный блок на разных устройствах может иметь разную ширину.
Медиа-запросы
/* Очень маленькие устройства (телефоны, менее чем 768px) */ /* Без медиа запросов, так как в Bootstrap это по умолчанию */ /* Небольшие устройства (планшеты, 768px и выше) */ @media (min-width: @screen-sm-min) { ... } /* Средние устройства (ноутбуки, 992px и выше) */ @media (min-width: @screen-md-min) { ... } /* Большие устройства (компьютеры, 1200px и выше) */ @media (min-width: @screen-lg-min) { ... }
| Телефоны (<768px) | Планшеты (≥768px) | Ноутбуки (≥992px) | Настольные (≥1200px) | |
|---|---|---|---|---|
| Ширина контейнера | auto | 750px | 970px | 1170px |
| Класс префикса | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Ширина колонки | auto | ~62px | ~81px | ~97px |
Заготовка страницы
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> .......... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
/*
Стили для самых маленьких устройств, концепция «Mobile First». Эти стили будут применяться
и для всех других экранов (sm, md, lg), если не будут переопределены в media-запросах.
*/
body {
font-family: 'Open Sans', sans-serif;
}
img {
max-width: 100%;
}
/* Небольшие устройства (планшеты, 768px и выше) */
@media only screen and (min-width: 768px) {
.....
}
/* Средние устройства (ноутбуки, 992px и выше) */
@media only screen and (min-width: 992px) {
.....
}
/* Большие устройства (компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px) {
.....
}Сброс обтекания
<div class="row"> <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">...</div> <!-- Сброс обтекания для md и lg устройств --> <div class="clearfix visible-md-block visible-lg-block"></div> <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">...</div> </div>
Смещение блоков
<div class="row"> <div class="col-md-4">...</div> <!-- Смещение вправо на 4 колонки для md-устройств--> <div class="col-md-4 col-md-offset-4">...</div> </div>
<div class="row"> <div class="col-xs-6 col-sm-4">...</div> <div class="col-xs-6 col-sm-4">...</div> <!-- Смещение на 3 колонки для xs-устройств, отмена смещения для sm-устройств --> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">...</div> </div>
Изменение порядка следования
Вот так можно поменять местами блоки main и aside для md-устройств:
<div class="row"> <!-- Смещаем блок main шириной 9 колонок вправо на 3 колонки --> <main class="col-md-9 col-md-push-3">...</main> <!-- Смещаем блок aside шириной 3 колонки влево на 9 колонок --> <aside class="col-md-3 col-md-pull-9">...</aside> </div>
Служебные классы
| Телефоны (<768px) | Планшеты (≥768px) | Ноутбуки (≥992px) | Настольные (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
| Группа классов | Свойство display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
| Телефоны (<768px) | Планшеты (≥768px) | Ноутбуки (≥992px) | Настольные (≥1200px) | |
|---|---|---|---|---|
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Быстрое выравнивание
<div class="clearfix"> <div class="pull-left">...</div> <!-- Смещаем блок влево --> <div class="pull-right">...</div> <!-- Смещаем блок вправо --> </div>
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}Вариант сетки без зазора между адаптивными блоками:
.row {
margin-left: 0;
margin-right: 0;
}
.row > [class^="col-"], .row > [class*=" col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}Стили, чтобы сразу видеть, какая сейчас ширина окна браузера:
.container > .row > *:not(.clearfix) {
background: #eee;
border: 1px solid #93f;
}
@media (min-width: 768px) {
.container > .row > *:not(.clearfix) {
border: 1px solid #09f;
}
}
@media (min-width: 992px) {
.container > .row > *:not(.clearfix) {
border: 1px solid #6c6;
}
}
@media (min-width: 1200px) {
.container > .row > *:not(.clearfix) {
border: 1px solid #f99;
}
}Поиск: CSS • HTML • Web-разработка • Верстка • Шаблон • Bootstrap • Сетка • Фреймворк • Шаблон сайта