Обзор

Bootstrap включает в себя несколько компонентов и вариантов для размещения вашего проекта, включая упаковку контейнеров, мощную систему gridbox, гибкий медиа-объект и гибкие классы утилиты.

Содержание

• Содержание
• Контейнеры
• Контрольные точки останова
• Z-индекс

Контейнеры

Контейнеры являются самым основным элементом компоновки в Bootstrap и ребуются при использовании нашей сетки по умолчанию. Выбирайте из гибкого контейнера фиксированной ширины (что означает его изменение max-width в каждой точке останова) или fluid-width ((это значит, что она постоянно 100%).

Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.

<div class="container">
  <!-- Content here -->
</div>

Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину экрана.

<div class="container-fluid">
  ...
</div>

Контрольные точки останова

Поскольку Bootstrap разработан для мобильных устройств, мы используем несколько медиа-запросов для создания разумных точек останова для наших макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине видового экрана и позволяют нам масштабировать элементы при изменении области просмотра.

Bootstrap в основном использует следующие диапазоны медиа-запросов (или точек останова) в исходных файлах Sass для нашего макета, grid-системы и компонентов.

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

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

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Мы иногда используем медиа-запросы, которые идут в другом направлении (данный размер экрана или меньше):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Опять же, эти медиа-запросы также доступны через миксы Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Существуют также медиа-запросы и миксы для таргетинга на один сегмент размеров экрана с использованием минимальной и максимальной ширины точки останова.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Эти медиа-запросы также доступны через миксы Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Аналогично, медиа-запросы могут охватывать несколько точек останова:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199px) { ... }

Sass миксин для таргетинга одного и того же размера экрана будет выглядеть следующим образом:

@include media-breakpoint-between(md, xl) { ... }

Z-индекс

В некоторых компонентах Bootstrap используется z-index, свойство CSS, которое помогает управлять макетом, предоставляя третью ось для размещения контента. Мы используем стандартную шкалу z-index в Bootstrap, которая была разработана для правильной навигации по слою, всплывающих подсказок и всплывающих окон, модальных окон и других функций.

Мы не поощряем настройку этих значений; если вы меняете один из них, вам, вероятно, придется изменить их все.

$zindex-dropdown-backdrop:  990 !default;
$zindex-navbar:            1000 !default;
$zindex-dropdown:          1000 !default;
$zindex-fixed:             1030 !default;
$zindex-sticky:            1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Фоновые элементы, такие как фоны, разрешающие щелчок, обычно расположены на более низких z-index-ах, в то время как навигация и информеры используют более высокие z-index-ы чтобы гарантировать, что они перекрывают окружающий контент.