Grid-система — Bootstrap — Хьюстонский университет

  • UH Home
  • University Marketing and Communications
  • Ресурсы
  • Bootstrap
  • Макет
  • Grid-система

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

Введение

Системы сеток используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот как работает система сетки Bootstrap:

  • Строки должны быть помещены в .container (фиксированная ширина) или .container-fluid (полная ширина) для правильного выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.
  • Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки.
  • Столбцы создают желоба (промежутки между содержимым столбцов) через заполнение . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row с.
  • Из-за отрицательного поля приведенные ниже примеры имеют выступ. Это так, что содержимое в столбцах сетки выровнено с содержимым вне сетки.
  • Столбцы сетки создаются путем указания числа из двенадцати доступных столбцов, которые вы хотите охватить. Например, три одинаковых столбца будут использовать три
    .col-xs-4     .
  • Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов будет как единое целое переноситься на новую строку.
  • Классы сетки применяются к устройствам с шириной экрана, превышающей или равной размерам точки останова, и переопределяют классы сетки, предназначенные для меньших устройств. Поэтому, например. применение любого класса .col-md-* к элементу повлияет не только на его стиль на средних устройствах, но и на больших устройствах, если класс
    .col-lg-*     отсутствует.

Посмотрите примеры применения этих принципов в вашем коде.

Медиа-запросы

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

 /* Очень маленькие устройства (телефоны, менее 768 пикселей) */
/* Нет медиа-запроса, так как это значение по умолчанию в Bootstrap */
/* Небольшие устройства (планшеты, 768px и выше) */
@media (минимальная ширина: @screen-sm-min) { ... }
/* Устройства среднего размера (настольные компьютеры, 992px и выше) */
@media (минимальная ширина: @screen-md-min) { ... }
/* Большие устройства (большие рабочие столы, 1200 пикселей и выше) */
@media (минимальная ширина: @screen-lg-min) { ... }

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

 @media (max-width: @screen-xs-max) { ... }
@media (минимальная ширина: @screen-sm-min) и (максимальная ширина: @screen-sm-max) { ... }
@media (минимальная ширина: @screen-md-min) и (максимальная ширина: @screen-md-max) { ... }
@media (минимальная ширина: @screen-lg-min) { ... }

Варианты сетки

Узнайте, как аспекты системы сетки Bootstrap работают на нескольких устройствах, с помощью удобной таблицы.

Очень маленькие устройства Телефоны (<768px) Малые устройства Планшеты (≥768px) Устройства среднего размера Настольные компьютеры (≥992 пикселей) Большие устройства Настольные компьютеры (≥1200 пикселей)
Поведение сетки Всегда горизонтально Свернуто для начала, горизонтально выше контрольных точек
Ширина контейнера Нет (авто) 750px
970px		 1170px
Префикс класса . col-xs- .col-sm- .col-md- .col-lg-
Количество столбцов 12
Ширина столбца Авто ~62px ~81px ~97px
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца)
Нестейбл Да
Смещения Да
Порядок столбцов Да

Пример: Сложенные по горизонтали

Используя один набор классов сетки .col-md-* , вы можете создать базовую систему сетки, которая начинается со стека на мобильных устройствах и планшетных устройствах (диапазон от сверхмалого до малого), а затем становится горизонтальной на настольном компьютере (средний размер). устройства. Поместите столбцы сетки в любые .строка .

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

. col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col- md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md- 6

 <дел>
  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1

  
.col-md-1
<дел>
.col-md-8
.col-md-4