Bootstrap - система сеток
В этой главе мы обсудим сеточную систему Bootstrap.
Что такое сетка?
Как написано википедией -
В графическом дизайне сетка - это структура (обычно двухмерная), состоящая из серии пересекающихся прямых (вертикальных, горизонтальных) линий, используемых для структурирования контента. Он широко используется для разработки макета и структуры контента в полиграфическом дизайне. В веб-дизайне это очень эффективный метод быстрого и эффективного создания согласованного макета с использованием HTML и CSS.
Проще говоря, сетки в веб-дизайне организуют и структурируют контент, упрощают сканирование веб-сайтов и снижают когнитивную нагрузку на пользователей.
Что такое сеточная система Bootstrap?
Как указано в официальной документации Bootstrap для сеточной системы -
Bootstrap включает в себя адаптивную мобильную первую систему гибкой сетки, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает в себя предопределенные классы для простых вариантов макета, а также мощные миксины для создания более семантических макетов.
Давайте разберемся в приведенном выше утверждении. Bootstrap 3 сначала является мобильным в том смысле, что код для Bootstrap теперь начинается с ориентации на небольшие экраны, такие как мобильные устройства, планшеты, а затем «расширяет» компоненты и сетки для больших экранов, таких как ноутбуки, настольные компьютеры.
Мобильная стратегия
Content
- Определите, что наиболее важно.
Layout
- Сначала уменьшите ширину.
- Сначала базовый CSS-адрес мобильного устройства; Адреса медиа-запросов для планшетов, компьютеров.
Progressive Enhancement
- Добавляйте элементы по мере увеличения размера экрана.
Работа системы Bootstrap Grid
Системы сетки используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент. Вот как работает сетка Bootstrap -
Строки должны быть помещены в .container class для правильного выравнивания и заполнения.
Используйте строки для создания горизонтальных групп столбцов.
Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Предопределенные классы сетки, такие как .row and .col-xs-4доступны для быстрого создания макетов сетки. LESS-миксины также могут использоваться для более семантических макетов.
Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца с помощью отрицательного поля на.rows.
Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три.col-xs-4.
Медиа-запросы
Медиа-запрос - это действительно причудливый термин для «условного правила CSS». Он просто применяет некоторый CSS на основе определенных изложенных условий. Если эти условия соблюдены, стиль применяется.
Медиа-запросы в Bootstrap позволяют перемещать, отображать и скрывать контент в зависимости от размера области просмотра. Следующие медиа-запросы используются в файлах LESS для создания ключевых точек останова в сеточной системе Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Иногда они расширяются, чтобы включить max-width ограничить CSS более узким набором устройств.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Медиа-запросы состоят из двух частей: спецификации устройства и правила размера. В приведенном выше случае установлено следующее правило -
Давайте рассмотрим эту строку -
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }Для всех устройств независимо от типа с min-width: @ screen-sm-min, если ширина экрана становится меньше, чем @ screen-sm-max , тогда что-нибудь сделайте .
Параметры сетки
В следующей таблице приведены аспекты того, как сеточная система Bootstrap работает на нескольких устройствах.
| Очень маленькие устройства Телефоны (<768 пикселей) | Маленькие устройства Планшеты (≥768 пикселей) | Средние устройства Настольные компьютеры (≥992 пикселей) | Большие устройства Настольные компьютеры (≥1200 пикселей) | |
|---|---|---|---|---|
| Поведение сетки | Горизонтально всегда | Свернут, чтобы начать, горизонтально над точками останова | Свернут, чтобы начать, горизонтально над точками останова | Свернут, чтобы начать, горизонтально над точками останова |
| Максимальная ширина контейнера | Нет (авто) | 750 пикселей | 970 пикселей | 1170 пикселей |
| Префикс класса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # столбцов | 12 | 12 | 12 | 12 |
| Максимальная ширина столбца | Авто | 60 пикселей | 78 пикселей | 95 пикселей |
| Ширина желоба | 30 пикселей (15 пикселей с каждой стороны столбца) |
30 пикселей (15 пикселей с каждой стороны столбца) |
30 пикселей (15 пикселей с каждой стороны столбца) |
30 пикселей (15 пикселей с каждой стороны столбца) |
| Гнездовой | да | да | да | да |
| Смещения | да | да | да | да |
| Порядок столбцов | да | да | да | да |
Базовая структура сетки
Ниже приводится базовая структура сетки Bootstrap.
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>Давайте посмотрим на несколько простых примеров сетки -
Пример - с накоплением по горизонтали
Пример - среднее и большое устройство
Пример - мобильный телефон, планшет, настольный компьютер.
Адаптивный сброс столбца
С четырьмя доступными уровнями сеток вы обязательно столкнетесь с проблемами, когда в определенных точках останова столбцы не очищаются правильно, поскольку один выше другого. Чтобы исправить это, используйте комбинацию класса.clearfixи отзывчивые служебные классы, как показано в следующем примере -
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>Это даст следующий результат -
Измените размер окна просмотра или проверьте его на своем телефоне, чтобы получить желаемый результат в этом примере.
Смещение колонн
Смещения - полезная функция для более специализированных макетов. Их можно использовать, чтобы сдвинуть столбцы для увеличения расстояния (например). В.col-xs = * классы не поддерживают смещения, но они легко реплицируются с использованием пустой ячейки.
Чтобы использовать смещения на больших дисплеях, используйте .col-md-offset-*классы. Эти классы увеличивают левое поле столбца на* столбцы, где * диапазон от 1 к 11.
В следующем примере у нас есть <div class = "col-md-6"> .. </div>. Мы центрируем это, используя класс .col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>Это даст следующий результат -
Вложенные столбцы
Чтобы вложить контент в сетку по умолчанию, добавьте новый .row и набор .col-md-* столбцы в существующем .col-md-*столбец. Вложенные строки должны включать набор столбцов, в сумме до 12.
В следующем примере макет состоит из двух столбцов, причем второй разделен на четыре блока в двух строках.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>Это даст следующий результат -
Порядок столбцов
Еще одна приятная особенность сеточной системы Bootstrap заключается в том, что вы можете легко писать столбцы в одном порядке и показывать их в другом. Вы можете легко изменить порядок столбцов встроенной сетки с помощью.col-md-push-* а также .col-md-pull-* классы-модификаторы, где * диапазон от 1 к 11.
В следующем примере у нас есть макет из двух столбцов, причем левый столбец является самым узким и действует как боковая панель. Мы изменим порядок этих столбцов, используя.col-md-push-* а также .col-md-pull-* классы.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>Это даст следующий результат -