ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap 4 Grid Stacked-to-horizontal


Пример сетки Bootstrap 4: стек по горизонтали

Мы создадим базовую систему Grid, которая начнет складываться на дополнительных небольших устройствах, прежде чем стать горизонтальной на больших устройствах.

В следующем примере показан простой макет с двумя колонками с накоплением по горизонтали, что означает, что на всех экранах будет разбито 50% на 50%, за исключением лишних маленьких экранов, которые будут автоматически складываться (100%):

col-sm-6
col-sm-6

Пример: стек по горизонтали

<div class="container">
  <div class="row">
    <div class="col-sm-6 bg-success">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-warning">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Совет: Числа в классах .col-sm-* указывают количество столбцов, которые должен охватывать Div (из 12). Таким образом, .col-sm-1 пролетов 1 столбец, .col-sm-4 пролетов 4 колонки, .col-sm-6 пролетов 6 столбцов и т.д.

Примечание: Убедитесь, что сумма добавляет до 12 или меньше (не обязательно использовать все 12 доступных столбцов):

Совет: Любой макет с фиксированной шириной можно превратить в макет с полной шириной, изменив .container класс на .container-fluid:

Пример: жидкий контейнер

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Автоматические столбцы макета

В Bootstrap 4 имеется простой способ создания столбцов с одинаковой шириной для всех устройств: просто удалите номер из .col-size-* и используйте только .col-size класс на указанное число элементов Col. Bootstrap будет распознать количество столбцов, и каждый столбец будет иметь одинаковую ширину. Классы size определяют, когда столбцы должны отвечать на запросы:

<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>

<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4