Варианты структурирования страниц с Bootstrap, включая глобальные стили, требуется монтаж, блочная система и более.
Обзор
Bootstrap включает в себя несколько компонентов и вариантов для создания вашего проекта, в том числе упаковочной тары, мощная блочная система, гибкий медиа объект и aдаптивные полезные классы.
Контейнеры
Контейнеры являются самыми основными элементом разметки Bootstrap и необходим при использовании нашей блочной системы. Выбрать из aдаптивных, контейнер фиксированной ширины (то есть max-width изменения в каждой контрольной точке) или fluid-width (то есть 100% ширины всегда).
Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.
Для того чтобы растянуть контейнер по всей ширине используйте .container-fluid
Адаптивные точки прерывания
Поскольку Bootstrap разработан, чтобы быть mobile first, мы используем небольшое количество медиа запросы для создания разумной точки прерывания для нашей разметки и интерфейсов. Эти точки в основном на основе минимальной ширины области просмотра и позволяют масштабировать элементы при изменении области просмотра.
Bootstrap в первую очередь используются следующие медиа колеблется—или запрос точки останова—в нашем источнике Sass файлы для нашего разметка, блочная система, и компоненты.
Так как мы пишем наш источник CSS в Sass, Все медиа запросы доступны через Sass примеси:
Мы изредка используем медиа запросы, которые идут в другую сторону (данный Размер экрана or smaller):
В очередной раз эти медиа запросы через Sass примеси:
Мы также имеем медиа от минимальной точки прерывания и максимальное значение только для данного размера экрана:
Эти медиа запросы через Sass примеси:
И, наконец, медиа, Что охватывает несколько точек прерывания ширины:
В Sass mixin Для приведенного выше примера выглядят, как показано ниже: