Bootstrap xs md sm lg: Grid system · Bootstrap

Grid System — Bootstrap — Университет Хьюстона

• UH Home
• Университетский маркетинг и коммуникации
• Ресурсы
• Bootstrap
• Layout
• Система сетки

Bootstrap включает в себя отзывчивую, мобильную First Fluid Systec до 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 работают на нескольких устройствах, с помощью удобной таблицы.

0 8 Поведение в сетке

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

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

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

.col-md-1

.col-md-1

.col-md-1

9. 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