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

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 Medium


Пример средней сетки

  Extra small Small Medium Large Extra Large
Префикс класса .col- .col-sm- .col-md- .col-lg- .col-xl-
Ширина экрана <576px >=576px >=768px >=992px >=1200px

В предыдущей главе мы представили пример Grid с классами для небольших устройств. Мы использовали два Div (столбцы), и мы дали им 25% 75% Сплит:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Но на средних устройствах дизайн может быть лучше, как 50% 50% Сплит.

Средние устройства определяются как имеющие ширину экрана от 768 пикселей до 991 пикселей.

Для средних устройств мы будем использовать .col-md-* классы:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Теперь Bootstrap собирается сказать "на малых размеров, посмотрите на классы с-SM-в них и использовать их. На средних размерах, посмотрите на классы с-MD-в них и использовать эти".

Следующий пример приведет к 25% 75% Сплит на малых устройствах и 50% 50% разделить на средних (и больших и XLarge) устройств. На дополнительных малых устройствах, он будет автоматически стек (100%):

.col-sm-3 .col-md-6
.col-sm-9 .col-md-6

Пример

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

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

Использование только средних

В приведенном ниже примере мы указываем только .col-md-6 класс (без .col-sm-* ). Это означает, что средние, большие и очень большие устройства будут делить 50%-50%-потому что класс масштабируется вверх. Однако, для малых и экстренных малых приспособлений, оно будет штабелировать вертикально (100% ширины):

Пример

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

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

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

Если размер экрана меньше 768px, столбцы будут складываться горизонтально:

<!-- Two columns: 50% width on medium and up-->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>

<!-- Four columns: 25% width on medium and up -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4

В следующей главе показано, как добавить различный процент разделения для больших устройств.