Grid system
Содержание:
- Отображение и скрытие контента
- Установка ширины одной колонки
- Модули, navbars, и виртуальные клавиатуры
- Пример
- Responsive classes
- Автоматическая разметка колонок
- Alignment
- Сортировка колонок
- Как это устроено
- Основные концепции
- Auto-layout columns#
- Accented tables
- Вложенность
- Быстрое создания плавающих элементов (float)
- Grid Options
- How they work
- Назначение Bootstrap сетки. Контрольные точки
- Выравнивание адаптивных блоков
- Grid System Rules
- Как это работает
- Медиа-запросы
Отображение и скрытие контента
Чтобы заставить элемент отобразиться или скрыться вы можете использовать классы () и (). Эти классы так же как классы и имеют правило , которое повышает приоритет стилей данных классов перед стилями других классов или селекторов, которые могут эти стили вытеснить. Данные классы можно применять только к блочным элементам HTML.
Кроме того, в Bootstrap есть ещё один класс , который предназначен для отключения видимости элемента, к которому он применён. Но, в отличие от вышеперечисленных классов, данный класс не изменяет свойство у элемента и, следовательно, он по-прежнему занимает место, хоть и становится не видимым.
<div class="show">...</div> <div class="hidden">...</div> <div class="invisible">...</div>
Установка ширины одной колонки
Еще одна фишка Bootstrap 4 — это возможность создать колонки, в которых явно (с помощью соответствующего класса) указывается только ширина одной из колонок, а другие колонки имеют ширину, которая рассчитывается браузером автоматически.
Ширина одной колонки
<div class=»container»>
<h2>Установка ширины одной колонки</h2>
<div class=»row mb-3″>
<div class=»col bg-danger»>
1 из 3
</div>
<div class=»col-8 bg-secondary»>
2 из 3 (широкая) .col-8
</div>
<div class=»col bg-danger»>
3 из 3
</div>
</div><!— /.row —>
<div class=»row mb-3″>
<div class=»col bg-info»>
1 из 3
</div>
<div class=»col-6 bg-warning»>
2 из 3 (широкая) .col-6
</div>
<div class=»col bg-info»>
3 из 3
</div>
</div><!— /.row —>
<div class=»row»>
<div class=»col bg-dark text-white»>
1 из 3
</div>
<div class=»col-5 bg-success»>
2 из 3 (широкая) .col-5
</div>
<div class=»col bg-dark text-white»>
3 из 3
</div>
</div><!— /.row —>
</div><!— /.container —>
|
1 |
<div class=»container»> <h2>Установкашириныоднойколонки<h2> <div class=»row mb-3″> <div class=»col bg-danger»> 1из3 <div> <div class=»col-8 bg-secondary»> 2из3(широкая).col-8 <div> <div class=»col bg-danger»> 3из3 <div> <div><!—.row—> <div class=»row mb-3″> <div class=»col bg-info»> 1из3 <div> <div class=»col-6 bg-warning»> 2из3(широкая).col-6 <div> <div class=»col bg-info»> 3из3 <div> <div><!—.row—> <div class=»row»> <div class=»col bg-dark text-white»> 1из3 <div> <div class=»col-5 bg-success»> 2из3(широкая).col-5 <div> <div class=»col bg-dark text-white»> 3из3 <div> <div><!—.row—> <div><!—.container—> |
В примере явно прослеживается, что средняя колонка становится меньше при уменьшении цифры после префикса в используемом класса.
See the Pen Bootstrap 4 .col-auto-* class by Elen (@ambassador) on CodePen.dark
Если мы поменяем класс .col на один из классов с префиксами (), то колонки будут перестраиваться в зависимости от разрешений экранов в одну колонку. Но на больших разрешениях визуально примеры выглядят одинаково.
See the Pen Bootstrap 4 wide column by Elen (@ambassador) on CodePen.dark
Переполнение и прокрутка
Поддержка на элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.
текстовых полей iOS и прокрутки
Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста или В содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.
Виртуальная клавиатура
Обратите внимание — если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы , или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную
Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.
Меню Навигации
Элемент не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или ).
Пример
Система сеток Bootstrap использует серию контейнеров, строк и колонок для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное объяснение того, как объединяется сетка.
Новичок или незнаком с flexbox? для получения справочной информации, терминологии, рекомендаций и фрагментов кода.
Колонка
Колонка
Колонка
В приведенном выше примере создаются три колонки одинаковой ширины на всех устройствах и в окнах просмотра с использованием наших предопределенных классов сетки. Эти колонки центрируются на странице с родительским .
Responsive classes
Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the and classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .
col
col
col
col
col-8
col-4
Stacked to horizontal
Using a single set of classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint ().
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mix and match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Row columns
Use the responsive classes to quickly set the number of columns that best render your content and layout. Whereas normal classes apply to the individual columns (e.g., ), the row columns classes are set on the parent as a shortcut. With you can give the columns their natural width.
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
You can also use the accompanying Sass mixin, :
Автоматическая разметка колонок
2.1 Колонки одинаковой ширины
С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.
Например:
2.2 Установка ширины одной колонки
Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.
<div class="row"> <div class="col">1 из 3</div> <div class="col-6">2 из 3 (широкое)</div> <div class="col">3 из 3</div> </div> <div class="row"> <div class="col">1 из 3</div> <div class="col-5">2 из 3 (широкое)</div> <div class="col">3 из 3</div> </div>
В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая все оставшееся пространство.
2.3 Контент переменной ширины
Можно использовать класс «col-{breakpoint}-auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint — размер экрана (xl, lg, md или sm).
<div class="row justify-content-sm-center"> <div class="col col-md-2">1 из 3</div> <div class="col-sm-auto">Контент переменной ширины</div> <div class="col col-md-2">3 из 3</div> </div> <div class="row"> <div class="col">1 из 3</div> <div class="col-sm-auto">Контент переменной ширины номер два</div> <div class="col col-md-2">3 из 3</div> </div>
Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.
2.4 Мульти-ряд
Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="w-100"></div> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
Horizontal alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.
Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple s, but not every implementation method can account for this.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
You may also apply this break at specific breakpoints with our responsive display utilities.
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Сортировка колонок
В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.
Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:
- .flex-first – отображается первым
- .flex-last – отображается последним
- .flex-unordered – отображается между первым и последним
Java
<div class=»container»>
<div class=»row»>
<div class=»col flex-unordered»>
Первый, но не первый и не последний
</div>
<div class=»col flex-last»>
Второй, но последний
</div>
<div class=»col flex-first»>
Третий, но первый
</div>
</div>
</div>
|
1 |
<div class=»container»> <div class=»row»> <div class=»col flex-unordered»> Первый,нонепервыйинепоследний <div> <div class=»col flex-last»> Второй,нопоследний <div> <div class=»col flex-first»> Третий,нопервый <div> <div> <div> |
Как это устроено
Вот как объединяется сетка:
-
Наша сетка поддерживает шесть адаптивных контрольных точек. Контрольные точки основаны на медиа-запросах , то есть они влияют на эту контрольную точку и все вышеперечисленные (например, применяется к , , , и ). Это означает, что Вы можете управлять размером и поведением контейнера и колонки с помощью каждой контрольной точки.
-
Контейнеры центрируют и размещают Ваш контент по горизонтали. Используйте для адаптивной ширины в пикселях, для во всех окнах просмотра и на всех устройствах или адаптивный контейнер (например, ) для комбинации подвижной и пиксельной ширины.
-
Ряды (rows) являются оболочками для колонок. Каждая колонка имеет горизонтальный (называемый промежутком) для управления пространством между ними. Затем этому противодействуют строки с отрицательными полями, чтобы обеспечить визуальное выравнивание содержимого колонок по левой стороне. Строки также поддерживают классы модификаторов для и классов промежутков для изменения интервала Вашего контента.
-
Колонки невероятно гибкие. В каждой строке доступно 12 шаблонов колонок, что позволяет создавать различные комбинации элементов, охватывающих любое количество колонок. Классы колонок указывают количество колонок шаблона, которые необходимо охватить (например, охватывает четыре). задаются в процентах, поэтому Вы всегда имеете одинаковый относительный размер.
-
Промежутки также являются адаптивными и настраиваемыми. Доступны классы промежутков во всех контрольных точках с теми же размерами, что и наши поля и отступы. Измените горизонтальные промежутки на классы , вертикальные промежутки на , или все промежутки на классы . также доступен для удаления промежутков.
-
Переменные Sass, карты и миксины питают сетку. Если Вы не хотите использовать предопределенные классы сетки в Bootstrap, Вы можете использовать наш чтобы создать свой собственный с большим количеством семантическая разметка. Мы также включаем некоторые настраиваемые свойства CSS для использования этих переменных Sass для еще большей гибкости для Вас.
Помните об ограничениях и ошибках вокруг flexbox, таких как .
Основные концепции
-
Контрольные точки — это строительные блоки адаптивного дизайна. Используйте их, чтобы контролировать, когда Ваш макет может быть адаптирован для определенного окна просмотра или размера устройства.
-
Используйте медиа-запросы для построения Вашего CSS по контрольной точке. Медиа-запросы — это функция CSS, которая позволяет Вам условно применять стили на основе набора параметров браузера и операционной системы. Чаще всего мы используем в наших медиа-запросах.
-
Прежде всего мобильные, цель — адаптивный дизайн. CSS Bootstrap нацелен на применение минимального количества стилей, чтобы макет работал с минимальной контрольной точкой, а затем на слои стилей, чтобы настроить этот дизайн для более крупных устройств. Это оптимизирует Ваш CSS, сокращает время рендеринга и обеспечивает отличный опыт для Ваших посетителей.
Auto-layout columns#
When no column widths are specified the component will render equal width columns
<Container>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
<Container> <Row> <Col>1of2</Col> <Col>2of2</Col> </Row> <Row> <Col>1of3</Col> <Col>2of3</Col> <Col>3of3</Col> </Row> </Container>
Copy
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
<Container>
<Row>
<Col>1 of 3</Col>
<Col xs={6}>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col xs={5}>2 of 3 (wider)</Col>
<Col>3 of 3</Col>
</Row>
</Container>
<Container>
<Row>
<Col>1of3</Col>
<Colxs={6}>2of3(wider)</Col>
<Col>3of3</Col>
</Row>
<Row>
<Col>1of3</Col>
<Colxs={5}>2of3(wider)</Col>
<Col>3of3</Col>
</Row>
</Container>
Copy
Variable width content
Set the column value (for any breakpoint size) to to size columns based on the natural width of their content.
<Container>
<Row className=»justify-content-md-center»>
<Col xs lg=»2″>
1 of 3
</Col>
<Col md=»auto»>Variable width content</Col>
<Col xs lg=»2″>
3 of 3
</Col>
</Row>
<Row>
<Col>1 of 3</Col>
<Col md=»auto»>Variable width content</Col>
<Col xs lg=»2″>
3 of 3
</Col>
</Row>
</Container>
<Container> <RowclassName="justify-content-md-center"> <Colxslg="2"> 1of3 </Col> <Colmd="auto">Variable width content</Col> <Colxslg="2"> 3of3 </Col> </Row> <Row> <Col>1of3</Col> <Colmd="auto">Variable width content</Col> <Colxslg="2"> 3of3 </Col> </Row> </Container>
Copy
Accented tables
Striped rows
Use to add zebra-striping to any table row within the .
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
These classes can also be added to table variants:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Hoverable rows
Add to enable a hover state on table rows within a .
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
These hoverable rows can also be combined with the striped variant:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Active tables
Highlight a table row or cell by adding a class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Вложенность
Подобно нашей сетке по умолчанию, наша CSS Grid позволяет легко встраивать файлы . Однако, в отличие от значения по умолчанию, эта сетка наследует изменения в строках, столбцах и промежутках. Рассмотрим пример ниже:
- Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной CSS: .
- В первом автоматическом столбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
- Во втором автоматическом столбце мы сбросили счетчик столбцов во вложенном на 12 (наше значение по умолчанию).
- В третьем автоколонке нет вложенного содержимого.
На практике это позволяет создавать более сложные и настраиваемые макеты по сравнению с нашей сеткой по умолчанию.
Первая автоколонка
Автоколонка
Автоколонка
Вторая автоколонка
6 of 12
4 of 12
2 of 12
Третья автоколонка
Быстрое создания плавающих элементов (float)
Данные классы предназначены для создания плавающих элементов, которые смещаются насколько возможно влево (класс ) или вправо (). Кроме этого в данные классы добавлено правило , которое повышает приоритет свойства и предотвращает данные классы Bootstrap от возможных проблем.
<div class="pull-left">...</div> <div class="pull-right">...</div>
Примечание: классы и нельзя использовать для выравнивания элементов в компоненте . Если вы хотите выровнять некоторые элементы в навигационном меню, то используйте специальные предназначенные для этого служебные классы и . Более подробно познакомиться с данными классами можно в статье, посвященной рассмотрению компонента navbar.
Grid Options
The following table summarizes how the Bootstrap grid system works across multiple devices:
| Extra small<768px | Small>=768px | Medium>=992px | Large>=1200px | |
|---|---|---|---|---|
| Class prefix | ||||
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
How they work
-
Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and . You choose how columns grow, shrink, or otherwise change.
-
When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
-
Bootstrap includes predefined classes for creating fast, responsive layouts. With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.
Назначение Bootstrap сетки. Контрольные точки
Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.
Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.
Следующий шаг – это разобраться с тем, что такое адаптивный макет сайта.
Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.
В Bootstrap изменения вида макета реализовано через медиа-запросы. Каждый медиа-запрос в Bootstrap строится на основании минимальной ширины viewport браузера. В Bootstrap ключевое значение ширины viewport в медиа-запросе называется breakpoint (контрольной точкой, или более просто классом устройства).
На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:
Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.
Контрольные точки имеют обозначение. Первый breakpoint не имеет обозначения (), второй называется – , третий – , четвёртый – и пятый – . Эти обозначения необходимо запомнить, т.к. они используются в классах, которые мы будем добавлять к элементам. Эти обозначения в имени класса будут указывать на то с какой ширины viewport стили, определённые в нём, будут применяться к элементу.
| Ширина viewport браузера | Контрольная точка (название устройства) |
|---|---|
| >=0 | без обозначения (xs) |
| >=576px | sm |
| >=768px | md |
| >=992px | lg |
| >=1200px | xl |
При этом, контрольные точки задают только минимальную ширину. Т.е., например, если вы определили макет, используя в нём классы без обозначения контрольной точки () и с использованием , то он на будет иметь такую же структуру как на , а на и — как на .
Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.
Выравнивание адаптивных блоков
Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.
Вертикальное выравнивание адаптивных блоков
Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к :
- (относительно начала линии);
- (по центру);
- (относительно конца).
Например, выровняем все адаптивные блоки по центру линии ряда:
<div class="row align-items-center"> <div class="col"> 1/2 </div> <div class="col"> 2/2 </div> </div>
По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.
Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:
- (относительно начала линии);
- (по центру);
- (относительно конца).
Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.
Например, выравниваем адаптивный блок 2 по нижнему краю линии:
<div class="row align-items-center">
<div class="col"> (1) </div>
<div class="col align-self-end"> (2) </div>
</div>
Горизонтальное выравнивание адаптивных блоков
Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:
- (относительно начала линии ряда — по умолчанию);
- (по центру);
- (относительно конца линии);
- (равномерно, с учётом пространства перед первым и последним адаптивным блоком);
- (равномерно, с одинаковым пространством между адаптивными блоками).
Например, распределим адаптивные блоки в горизонтальном направлении равномерно:
<div class="row justify-content-around">
<div class="col-4"> (1) </div>
<div class="col-4"> (2) </div>
</div>
Grid System Rules
Some Bootstrap 4 grid system rules:
- Rows must be placed within a (fixed-width) or (full-width) for proper alignment and padding
- Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
- Predefined classes like and are available for quickly making grid layouts
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three
- Column widths are in percentage, so they are always fluid and sized relative to their parent element
- The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as «equal width columns» (and equal height). Example: Three elements with will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.
Note that Flexbox is not supported in IE9 and earlier versions.
If you require IE8-9 support, use Bootstrap 3. It is the most
stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to
it.
Как это работает
На высоком уровне, блочная система работает так:
- Существует три основных компонента—контейнера, строки и столбцы.
- Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
- «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
- Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
- Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
- Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
- Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
- Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
- Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
- Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.
Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.
Медиа-запросы
Поскольку Bootstrap в первую очередь разработан для мобильных устройств, мы используем несколько медиа-запросов для создания разумных контрольных точек для наших макетов и интерфейсов. Эти контрольные точки в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.
Минимальная ширина
Bootstrap в основном использует следующие диапазоны медиа-запросов — или контрольные точки — в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов.
Эти миксины Sass переводятся в наш скомпилированный CSS с использованием значений, объявленных в наших переменных Sass. Например:
Максимальная ширина
Иногда мы используем медиа-запросы, идущие в другом направлении (заданный размер экрана или меньше):
Эти миксины берут объявленные контрольной точки, вычитают из них и используют их как наши значения . Например:
Зачем вычитать .02px? В настоящее время браузеры не поддерживают , поэтому мы обходим ограничения и области просмотра с дробной шириной (что может происходить при определенных условиях на высоких -dpi устройства, например), используя значения с более высокой точностью.
Одиночная контрольная точка
Существуют также медиа-запросы и миксины для нацеливания на один сегмент размеров экрана с использованием минимальной и максимальной ширины контрольной точки.
Например, приведет к:
