Обзор
Bootstrap включает в себя несколько компонентов и вариантов для размещения вашего проекта, включая упаковку контейнеров, мощную систему gridbox, гибкий медиа-объект и гибкие классы утилиты.
Содержание
Контейнеры
Контейнеры являются самым основным элементом компоновки в 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
-ы чтобы гарантировать, что они перекрывают окружающий контент.