Формы

Изменение визуального порядка следования адаптивных блоков

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.

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

order-{breakpoint}-{visual_number}

Вместо необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс , то по умолчанию он имеет значение 0.

Например, изменим порядок следования двух адаптивных блоков:

<div class="row">
  <div class="col">
    Первый (не упорядоченный, без класса order-)
    <!-- По умолчанию order, равно 0, поэтому он и первый-->
  </div>
  <div class="col order-12">
    Второй, но будет отображаться последним
  </div>
  <div class="col order-1">
    Третий, но будет отображаться вторым
  </div>
</div>

Ещё один пример (с использованием адаптивных классов ):

<div class="row">
  <div class="col-md-8 order-2 order-md-1">
    Первый (на xs, sm будет отображаться вторым)
  </div>
  <div class="col-md-4 order-1 order-md-2">
    Второй (на xs, sm будет отображаться первым)
  </div>
</div>

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова и . Эти классы (, , , ) позволяют соответственно визуально сместить элемент в начало или конец.

Классы и оказывают своё действие посредством установки элементу CSS свойства со значением -1 (), а классы и — CSS свойства со значением 13 ().

Перепишем вышеприведённый пример с использованием классов , в которых используются ключевые слова и :

<div class="row">
  <div class="col-md-8 order-last order-md-first">
    Первый (на xs, sm будет отображаться последним)
  </div>
  <div class="col-md-4 order-first order-md-last">
    Последний (на xs, sm будет отображаться первым)
  </div>
</div>

Пример с использованием классов как с числом, так и со словами и :

<div class="row">
  <div class="col-3 order-sm-last order-md-1">#1 (XS), #LAST (SM), #1 (MD, LG и XL)</div>
  <div class="col-3 order-md-7">#2 (XS), #7 (MD, LG и XL)</div>
  <div class="col-3 order-md-6">#3 (XS), #6 (MD, LG и XL)</div>
  <div class="col-3 order-md-5">#4 (XS), #5 (MD, LG и XL)</div>
  <div class="col-3 order-md-4">#5 (XS), #4 (MD, LG и XL)</div>
  <div class="col-3 order-md-3">#6 (XS), #3 (MD, LG и XL)</div>
  <div class="col-3 order-md-2">#7 (XS), #2 (MD, LG и XL)</div>
  <div class="col-3 order-sm-first order-md-8">#8 (XS), #FIRST (SM), #8 (MD, LG и XL)</div>
</div>

Основные правила создания макета с помощью элементов сетки Bootstrap

Основные этапы создания макета веб-страницы:

1. создать основные секции (например: , , );
2. создать внутри каждой секции обёрточный контейнер;
3. поместить внутрь каждого обёрточного контейнера, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
4. создать внутри каждого ряда необходимую структуру с помощью адаптивных блоков;
5. поместить внутрь необходимых адаптивных блоков, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
6. выполнить пункт 5;
7. выполнять пункты 6 и 7 до тех пор, пока не будет достигнута необходимая структура создаваемого макета.

В качестве примера создадим нижеприведённый макет на Bootstrap 3 и 4.

Верстка вышеприведённого макета на Bootstrap 3:

<header>
  <div class="container-fluid">
    HEADER
  </div>
</header>
<section class="a">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-lg-4 a1">A1</div>
      <div class="col-sm-6 col-lg-4 a2">A2</div>
      <div class="clearfix visible-sm-block visible-md-block"></div>
      <div class="col-sm-6 col-lg-4 a3">A3</div>
      <div class="clearfix visible-lg-block"></div>
      <div class="col-sm-6 col-lg-4 a4">A4</div>
      <div class="clearfix visible-sm-block visible-md-block"></div>
      <div class="col-sm-6 col-lg-4 a5">A5</div>
      <div class="col-sm-6 col-lg-4 a6">A6</div>
    </div>
  </div>
</section>
<section class="b">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-lg-3 b1">B1</div>
      <div class="col-sm-6 col-lg-3 b2">B2</div>
      <div class="clearfix visible-sm-block visible-md-block"></div>
      <div class="col-sm-6 col-lg-3 b3">B3</div>
      <div class="col-sm-6 col-lg-3 b4">B4</div>
    </div>
  </div>
</section>
<footer>
  <div class="container-fluid">
    FOOTER
  </div>
</footer>

Верстка вышепредставленного макета на Bootstrap 4:

<header>
  <div class="container-fluid">
    HEADER
  </div>
</header>
<section class="a">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xl-4 a1">A1</div>
      <div class="col-md-6 col-xl-4 a2">A2</div>
      <div class="col-md-6 col-xl-4 a3">A3</div>
      <div class="col-md-6 col-xl-4 a4">A4</div>
      <div class="col-md-6 col-xl-4 a5">A5</div>
      <div class="col-md-6 col-xl-4 a6">A6</div>
    </div>
  </div>
</section>
<section class="b">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xl-3 b1">B1</div>
      <div class="col-md-6 col-xl-3 b2">B2</div>
      <div class="col-md-6 col-xl-3 b3">B3</div>
      <div class="col-md-6 col-xl-3 b4">B4</div>
    </div>
  </div>
</section>
<footer>
  <div class="container-fluid">
    FOOTER
  </div>
</footer>

Позиционирование элементов

Последнее обновление: 31.10.2015

При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы
посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком
расположены как бы в три столбца и составляют одну строку:

Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>.............</p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>.............</p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>.............</p>
    </div>
</div>

Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно,
но в данном случае у нас одна строка.

Для создания отдельного столбца строки используется класс . , как ясно из названия, обозначает столбец.

Дальше идет — идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от
ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных
единиц в строке будет занимать данный блок. Таким образом, получается, что класс означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины
экрана устройства с экраном шириной от 992 пикселей.

И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов),
подобный класс мог бы быть таким col-xs-4.

Все типы классов:

• col-xs-*: для устройств с шириной экрана меньше 768 пикселей

• col-sm-*: для устройств с шириной экрана от 768 пикселей и выше

• col-md-*: для устройств с шириной экрана от 992 пикселя и выше

• col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше

Хотя даже на мобильных устройствах блок с классом будет выглядеть вполне неплохо, но мы можем установить сразу два класса,
чтобы еще больше детализировать отображение на различных устройствах, например:

<div class="col-xs-12 col-md-4">

И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать
любую другую ширину, позиционируя их по собственному усмотрению. Например:

Отступы

Специальные классы позволяют задать смещение относительно левого блока или начала строки в условных единицах.
Например, у нас есть такая строка:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-offset-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

Класс будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов и мы можем переопределить порядок блоков в строке.
Например, класс сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс
сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-push-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-pull-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:

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

НазадВперед

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

See it in action in this rendered example.

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

More Equal Columns

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

6 of 6

Example

<!— Two equal columns —><div class=»row»>
  <div class=»col»>1 of 2</div>
  <div class=»col»>2 of 2</div></div><!— Four equal columns —><div class=»row»>
  <div class=»col»>1 of 4</div>
  <div class=»col»>2 of 4</div>  <div class=»col»>3
of 4</div>
  <div class=»col»>4 of 4</div></div><!— Six equal columns —><div class=»row»>
  <div class=»col»>1 of 6</div>
  <div class=»col»>2 of 6</div>  <div class=»col»>3
of 6</div>
  <div class=»col»>4 of 6</div>    <div class=»col»>5
of 6</div>
  <div class=»col»>6 of 6</div></div>

Grid System Rules

Some Bootstrap 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

Auto-layout columns

You can utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like
.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. You may add any number of
unit-less
classes for each breakpoint you need and every column will be the same width.

Equal-width columns can be broken into multiple lines, but there is a Safari flexbox bug that prevents this from
working
without an explicit flex-basis or border. There are workarounds for older browser versions, but they shouldn’t be
necessary
if you’re up-to-date.

Setting a single 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.

Variable width content

Using the
classes, columns can size themselves based on the natural width of their content. This
is particularly
handy when dealing with single line content (like inputs, numbers, etc.) or in conjunction with

classes when centering layouts with uneven column sizes as viewport width changes.

Equal-width multi-row

You can create equal-width columns that span multiple rows by inserting a
where class you want the columns to break to a new line. You may also make the breaks responsive by mixing the
class with some

responsive display utilities.

Responsive classes

Bootstrap’s grid includes five 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 particular sized column; otherwise, feel
free to stick
to
.

Stacked to horizontal

Using a single set of
classes, you can create a basic grid system that starts out stacked before becoming
horizontal on desktop
(medium) devices.

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.

Gutters

Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the and matching padding utilities on the s. The or parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.

Here’s an example of customizing the Bootstrap grid at the large () breakpoint and above. We’ve increased the padding with , counteracted that with on the parent and then adjusted the wrapper with .

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.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

You can also use the accompanying Sass mixin, :

Основы создания таблиц в HTML

Создание таблицы в HTML начинается с элемента (…), внутри которого помещают шапку (…) и основное содержимое (…). Далее в элемент и помещают строки (…). После этого в элементе (…) создают ячейки с помощью элементов (…) и (…), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент (…) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.

Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:

• — объединяет ячеек по вертикали;
• — объединяет ячеек по горизонтали.

Применять данные атрибуты можно для элементов и .

Например:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Содержимое ячейки</td>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td>Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td rowspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
  </tbody>
</table>

Для указанания названия таблицы используется элемент (…), который размещается внутри элемента сразу же после его открывающего тега.

<table>
  <caption>
    Название таблицы
  </caption>
  ...
</table>

Основные параметры сетки по-умолчанию

По-умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.

Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» — это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.

За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс.
Средние разрешения отрабатываются от 768 пикс. Ширина контейнера — 720 пикс.
Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера — 960 пикс.
И самые большие — от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.

Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена

Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.

Назначение 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, то в ней количество контрольных точек равнялось четырём.

Grid Options

The following table summarizes how the Bootstrap 4 grid system works across
different screen sizes:

	Extra small (<576px)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Extra Large (>=1200px)
Class prefix
Grid behaviour	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	540px	720px	960px	1140px
Suitable for	Portrait phones	Landscape phones	Tablets	Laptops	Laptops and Desktops
# of columns	12	12	12	12	12
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)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes	Yes

Выравнивание

Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей — вертикальное и горизонтальное выравнивание.

4.1 Вертикальное выравнивание

<div class="row align-items-start">
	<div class="col">Верх</div>
	<div class="col">Верх</div>
	<div class="col">Верх</div>
</div>
<div class="row align-items-center">
	<div class="col">Середина</div>
	<div class="col">Середина</div>
	<div class="col">Середина</div>
</div>
<div class="row align-items-end">
	<div class="col">Низ</div>
	<div class="col">Низ</div>
	<div class="col">Низ</div>
</div>

Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:

<div class="row">
	<div class="col align-self-start">Верх</div>
	<div class="col align-self-center">Середина</div>
	<div class="col align-self-end">Низ</div>
</div>

4.2 Горизонтальное выравнивание

Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».

<div class="row justify-content-start">
	<div class="col-4">row justify-content-start</div>
	<div class="col-4">row justify-content-start</div>
</div>
<div class="row justify-content-center">
	<div class="col-4">row justify-content-center</div>
	<div class="col-4">row justify-content-center</div>
</div>
<div class="row justify-content-end">
	<div class="col-4">justify-content-end</div>
	<div class="col-4">justify-content-end</div>
</div>
<div class="row justify-content-around">
	<div class="col-4">justify-content-around</div>
	<div class="col-4">justify-content-around</div>
</div>
<div class="row justify-content-between">
	<div class="col-4">justify-content-between</div>
	<div class="col-4">justify-content-between</div>
</div>

4.3 Удаление полей между колонками

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

Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».

<div class="row no-gutters">
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
</div>

4.4 Перенос колонок на новую строку

Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.

<div class="row">
	<div class="col-9">.col-9</div>
	<div class="col-4">.col-4<br>9 + 4 = 13 колонок - это больше 12. Данный элемент шириной в 4 колонки будет перенесён на новую строку.</div>
	<div class="col-6">.col-6<br>Следующие колонки расположатся вдоль строки.</div>
</div>

Порядок элементов

5.1 Классы порядка элементов

Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-вёрсткой, данные правила будут вам знакомы. Bootstrap 4 даёт возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):

<div class="row">
	<div class="col">Первый неупорядоченный элемент</div>
	<div class="col order-12">Второй, упорядоченный как последний</div>
	<div class="col order-1">Третий, упорядоченный как первый</div>
</div>

Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):

<div class="row">
	<div class="col">Первый неупорядоченный</div>
	<div class="col order-last">Второй, упорядоченный как последний</div>
	<div class="col order-first">Третий, упорядоченный как первый</div>
</div>

5.2 Смещение колонок

По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».

5.2.1 Классы смещения

Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:

<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
	<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Сетка и колонки

Бут­страп для себя делит экран на 12 коло­нок, неза­ви­си­мо от раз­ме­ра экра­на. Даже малень­кий экран ста­ро­го теле­фо­на Бут­страп разо­бьёт на 12 коло­нок и будет ими управ­лять. На этом хол­сте вы може­те созда­вать бло­ки шири­ной с какое-то коли­че­ство коло­нок. Напри­мер, что­бы напи­сать текст на поло­ви­ну шири­ны экра­на, нуж­но создать блок шири­ной 6 коло­нок.

Бло­ки живут не сами по себе, а как бы в таб­ли­цах. Вы гово­ри­те Бут­стра­пу: «Создай мне кон­тей­нер для бло­ка, в кон­тей­не­ре — стро­ку, внут­ри стро­ки — колон­ку, а внутрь колон­ки — поло­жи этот текст». Сей­час это выгля­дит стран­но, но поз­же вы при­вык­не­те.

Стро­ка запол­ня­ет­ся ячей­ка­ми сле­ва напра­во. Когда кон­ча­ет­ся стро­ка, мож­но создать новую стро­ку и сно­ва запол­нить её ячей­ка­ми раз­ной шири­ны. Шири­на яче­ек выра­жа­ет­ся в колон­ках. Ячей­ка шири­ной на весь экран будет иметь шири­ну 12 коло­нок, на пол-экрана — 6 коло­нок. Что­бы раз­бить экран на три части по гори­зон­та­ли, нуж­но 3 ячей­ки шири­ной по 4 колон­ки. Что­бы сде­лать сет­ку, как у обыч­но­го трёх­ко­ло­ноч­но­го сай­та, попро­буй­те три ячей­ки: 2 колон­ки, 8 коло­нок, 2 колон­ки. 

Мож­но ска­зать Бут­стра­пу: «Когда экран малень­кий, эту колон­ку выво­ди на всю шири­ну, а ту вооб­ще прячь». Напри­мер, у нас в левой колон­ке было меню сай­та, в цен­траль­ной — основ­ной текст, а в пра­вой — вся­кие вспо­мо­га­тель­ные ссыл­ки. Тогда гово­рим левой колон­ке на мобил­ке выве­стись на всю шири­ну, основ­ной колон­ке — тоже на всю шири­ну, а пра­вой — скрыть­ся. Полу­чит­ся мобиль­ная вер­сия сай­та.

И так мож­но дол­го кура­жить­ся. Если инте­рес­но, про­чи­тай­те доку­мен­та­цию по сет­кам Бут­стра­па — там всё понят­но по кар­тин­кам. 

Как это работает

На высоком уровне, блочная система работает так:

• Существует три основных компонента—контейнера, строки и столбцы.
• Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
• «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
• Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
• Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
• Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
• Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
• Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
• Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
• Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while allows breakpoint-specific widths that are divided evenly across and for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you’d update the and to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.

II. Классы и компоненты

глава третья

Оформление контента

• Оформление и работа с текстом
• Стилизация HTML списков
• Средства Bootstrap для оформления изображений

• Оформление HTML таблиц

• CSS для HTML элемента figure

• Классы платформы для HTML форм

• Примеры оформления форм

• Вспомогательные классы

• Оформление заголовков

глава четвёртая

Компоненты

• Breadcrumb (навигационные
  цепочки, хлебные крошки)
• Collapse и создание на базе него
  аккордеона
• Dropdowns (выпадающие
  списки)
• Jumbotron
  (оформление ключевой информации)
• Modal (модальные окна для
  веб-страницы)
• Navs (навигационные
  блоки)
• Navbar (основное меню
  сайта)
• Panels (Bootstrap 3
  панели)
• Popovers (всплывающие панели)
• Scrollspy (выделение ссылок на
  основании положения прокрутки)
• Tabs (Bootstrap 3 вкладки)
• Thumbnails (Bootstrap 3
  галерея)
• Alerts (сообщения)
• Badges (бейджи)
• Buttons (кнопки)
• Carousel (карусель)
• Pagination (навигационный блок для пагинации)
• Progress (индикаторы выполнения)
• Tooltips (всплывающие подсказки)

только для Bootstrap 3

• Иконки Glyphicons
• Affix (sticky-позиционирование
  элементов)

только для Bootstrap 4

• Card (карточка)
• Spinners (Спиннеры)
• Navbar (основное меню)

глава пятая

Классы помощники

• Управление отображением элементов (Bootstrap 4)

• Классы для работы с flexbox (Bootstrap 4)

• Управление margin и padding отступами (Bootstrap 4)

• Управление границами и скруглениями углов элементов (Bootstrap 4)

Bootstrap Grid Example: Medium Devices

	Extra small	Small	Medium	Large
Class prefix
Screen width	<768px	>=768px	>=992px	>=1200px

In the previous chapter, we presented a grid example with classes for small
devices. We used two divs (columns) and we gave them
a
25%/75% split:

<div class=»col-sm-3″>….</div>
<div class=»col-sm-9″>….</div>

But on medium devices the design may be better as a 50%/50% split.

Tip: Medium devices are defined as having a screen width
from 992 pixels to 1199 pixels.

For medium devices we will use the classes.

Now we will add the column widths for medium devices:

<div class=»col-sm-3 col-md-6″>….</div>
<div class=»col-sm-9 col-md-6″>….</div>

Now Bootstrap is going to say «at the small size, look at classes with
-sm- in them and use those. At the medium size, look at classes with
-md- in them and use those».

The following example will result in a 25%/75% split on small devices and a
50%/50% split on medium (and large) devices. On extra small devices, it will
automatically stack (100%):

Example

<div class=»container-fluid»>  <h1>Hello World!</h1>  <div class=»row»>    <div class=»col-sm-3 col-md-6″ style=»background-color:yellow;»>      <p>Lorem ipsum…</p>    </div>    <div class=»col-sm-9 col-md-6″ style=»background-color:pink;»>      <p>Sed ut perspiciatis…</p>    </div>  </div>
</div>

Note: Make sure that the sum always adds up to 12.

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.