Обзор
Компоненты и опции для создания вашего проекта Bootstrap, включая контейнеры для упаковки, мощную сетчатую систему, гибкий медиа-объект и отзывчивые служебные классы.
Контейнеры
Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width
изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100%
всегда).
Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.
Используйте .container-fluid
для создания контейнера полной ширины, занимающий 100% зоны просмотра.
Отзывчивые брейкпойнты
Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.
В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.
Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:
По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):
Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения min-
и max-
prefixes префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.
Опять же, эти @media доступны через Sass миксины:
Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.
Эти @media также доступны из миксинов Sass:
Также, @media могут занимать несколько значений ширин брейкпойнта:
Миксины Sass для захвата таких же параметров (выше) выглядели бы так:
Z-индекс
Несколько компонентов Bootstrap используют данный индекс z-index
, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).
Эти высшие значения могут начинаться с любого числа, в идеале достаточно большого и специфичного, чтобы избежать конфликтов. Нам нужен стандартный набор этих чисел для использования с нашими компонентами: всплывающими подсказками, окнами, навбарами, выпадающими элементами, модальными элементами - так, чтобы мы могли бы разумно стандартизировать их поведение. Не существует ограничений - используйте хоть 100
, хоть 500
и более.
Мы не советуем настраивать эти значения самому, т.к. если потребуется изменить одно, придется менять все.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения z-index 1,2,3
, а также hover и "активные состояния". В hover/focus/active мы подводим частный элемент к "переднему краю" использованием более высокого z-индекса
, для показа его границы над вложенными элементами.