Система сеток
Используйте нашу мощную сетку flexbox, ориентированную на мобильные устройства, для создания макетов всех форм и размеров благодаря системе из двенадцати колонок, шести адаптивным уровням по умолчанию, переменным и миксинам Sass, а также десяткам предопределенных классов.
Пример
Система сеток Bootstrap использует серию контейнеров, строк и колонок для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное объяснение того, как объединяется сетка.
Новичок или незнаком с flexbox? Прочтите это руководство по flexbox на CSS Tricks для получения справочной информации, терминологии, рекомендаций и фрагментов кода.
div class="container"> div class="row"> div class="col"> Колонка div> div class="col"> Колонка div> div class="col"> Колонка div> div> div>В приведенном выше примере создаются три колонки одинаковой ширины на всех устройствах и в окнах просмотра с использованием наших предопределенных классов сетки. Эти колонки центрируются на странице с родительским .container .
Как это устроено
Вот как объединяется сетка:
- Наша сетка поддерживает шесть адаптивных контрольных точек. Контрольные точки основаны на медиа-запросах min-width , то есть они влияют на эту контрольную точку и все вышеперечисленные (например, .col-sm-4 применяется к sm , md , lg , xl и xxl ). Это означает, что Вы можете управлять размером и поведением контейнера и колонки с помощью каждой контрольной точки.
- Контейнеры центрируют и размещают Ваш контент по горизонтали. Используйте .container для адаптивной ширины в пикселях, .container-fluid для width: 100% во всех окнах просмотра и на всех устройствах или адаптивный контейнер (например, .container-md ) для комбинации подвижной и пиксельной ширины.
- Ряды (rows) являются оболочками для колонок. Каждая колонка имеет горизонтальный padding (называемый промежутком) для управления пространством между ними. Затем этому padding противодействуют строки с отрицательными полями, чтобы обеспечить визуальное выравнивание содержимого колонок по левой стороне. Строки также поддерживают классы модификаторов для единообразного применения размеров колонок и классов промежутков для изменения интервала Вашего контента.
- Колонки невероятно гибкие. В каждой строке доступно 12 шаблонов колонок, что позволяет создавать различные комбинации элементов, охватывающих любое количество колонок. Классы колонок указывают количество колонок шаблона, которые необходимо охватить (например, col-4 охватывает четыре). width задаются в процентах, поэтому Вы всегда имеете одинаковый относительный размер.
- Промежутки также являются адаптивными и настраиваемыми.Доступны классы промежутков во всех контрольных точках с теми же размерами, что и наши поля и отступы. Измените горизонтальные промежутки на классы .gx-* , вертикальные промежутки на .gy-* , или все промежутки на классы .g-* . .g-0 также доступен для удаления промежутков.
- Sass переменные, карты и миксины управляют сеткой. Если вы не хотите использовать предопределенные классы сетки в Bootstrap, вы можете использовать наш источник сетки Sass для создания собственных с большей семантической разметкой. Мы также включаем некоторые пользовательские свойства CSS для использования этих переменных Sass для еще большей гибкости для вас.
Параметры сетки
Система сеток Bootstrap может адаптироваться ко всем шести контрольным точкам по умолчанию и любым настраиваемым Вами контрольным точкам. Шесть уровней сетки по умолчанию следующие:
- Очень маленький — Extra small (xs)
- Маленький — Small (sm)
- Средний — Medium (md)
- Большой — Large (lg)
- Очень большой — Extra large (xl)
- Огромный — Extra extra large (xxl)
Как отмечалось выше, каждая из этих контрольных точек имеет собственный контейнер, уникальный префикс класса и модификаторы. Вот как меняется сетка в этих контрольных точках:
| xs | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px | |
|---|---|---|---|---|---|---|
| Container max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Колонки с автоматической компоновкой
Используйте классы колонок, специфичные для контрольной точки, для удобного определения размера колонки без явного нумерованного класса, например .col-sm-6 .
Равная ширина
Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs до xxl . Добавьте любое количество классов без единиц измерения для каждой нужной контрольной точки, и каждая колонка будет одинаковой ширины.
Разметка
Варианты структурирования страниц с Bootstrap, включая глобальные стили, необходимые инструменты, блочная система и другие.
Flexbox блочная система
Фантазии более современную блочная система? Включить flexbox поддержки в Bootstrap чтобы воспользоваться всеми преимуществами CSS’гибкий модуль коробка для еще большего контроля над %вашего сайта 3%, выравнивания и распределения информации.
Bootstrap flexbox грид включает поддержку для каждого объекта из нашего по умолчанию значение блочная система, а затем некоторые. Пожалуйста, прочитайте по умолчанию значение блочная система документы прежде чем перейти через эту страницу. Особенности, которые покрыты подводятся только здесь. Обратите внимание, что Internet Explorer 9 не поддерживает flexbox, поэтому с осторожностью при включении его.
Внимание! этот flexbox грид документация приводится в действие дополнительный файл CSS, который переопределяет по умолчанию блочная система с CSS. Это только в нашей принимала документы и отключена в развитии.
Как это работает
В flexbox блочная система ведет себя похожими на наши по умолчанию значение блочная система, но с некоторыми существенными отличиями:
- Грид примеси и для создания более смысловых макетов включить поддержку flexbox. Просто включить flexbox поддержки, чтобы использовать их, как вы бы в противном случае.
- Вложения, зачеты, толкает, и тянет все поддерживается в flexbox блочная система.
- Flexbox грид столбиками без ширины установить автоматически разметка с одинаковой шириной. Например, четыре столбца автоматически быть шириной 25%.
- Flexbox грид столбцы имеют значительно более доступные варианты выравнивания, включая выравнивание по вертикали.
- В отличие от По умолчанию значение блочная система где грид столбец начинается в полную ширину в xs уровня, flexbox требует .col- класс для каждого уровня.
Холодок? Awesome—продолжайте чтение для получения дополнительной информации и некоторые фрагменты кода.
Авто-разметка столбцов
Когда flexbox поддержки, вы можете использовать точки останова конкретных классов столбца равной ширины столбцов. Добавить любое количество .col- s для каждой точки необходимо и вы хорошо идти. Например, вот два грид разметки, которые применяются к каждому устройству и возможность просмотра.
Система сеток
Используйте нашу мощную сетку flexbox, ориентированную на мобильные устройства, для создания макетов всех форм и размеров благодаря системе из двенадцати колонок, шести адаптивным уровням по умолчанию, переменным и миксинам Sass, а также десяткам предопределенных классов.
Пример
Система сеток Bootstrap использует серию контейнеров, строк и колонок для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное объяснение того, как объединяется сетка.
Новичок или незнаком с flexbox? Прочтите это руководство по flexbox на CSS Tricks для получения справочной информации, терминологии, рекомендаций и фрагментов кода.
div class="container"> div class="row"> div class="col"> Колонка div> div class="col"> Колонка div> div class="col"> Колонка div> div> div>В приведенном выше примере создаются три колонки одинаковой ширины на всех устройствах и в окнах просмотра с использованием наших предопределенных классов сетки. Эти колонки центрируются на странице с родительским .container .
Как это устроено
Вот как объединяется сетка:
- Наша сетка поддерживает шесть адаптивных контрольных точек. Контрольные точки основаны на медиа-запросах min-width , то есть они влияют на эту контрольную точку и все вышеперечисленные (например, .col-sm-4 применяется к sm , md , lg , xl и xxl ). Это означает, что Вы можете управлять размером и поведением контейнера и колонки с помощью каждой контрольной точки.
- Контейнеры центрируют и размещают Ваш контент по горизонтали. Используйте .container для адаптивной ширины в пикселях, .container-fluid для width: 100% во всех окнах просмотра и на всех устройствах или адаптивный контейнер (например, .container-md ) для комбинации подвижной и пиксельной ширины.
- Ряды (rows) являются оболочками для колонок. Каждая колонка имеет горизонтальный padding (называемый промежутком) для управления пространством между ними. Затем этому padding противодействуют строки с отрицательными полями, чтобы обеспечить визуальное выравнивание содержимого колонок по левой стороне. Строки также поддерживают классы модификаторов для единообразного применения размеров колонок и классов промежутков для изменения интервала Вашего контента.
- Колонки невероятно гибкие. В каждой строке доступно 12 шаблонов колонок, что позволяет создавать различные комбинации элементов, охватывающих любое количество колонок. Классы колонок указывают количество колонок шаблона, которые необходимо охватить (например, col-4 охватывает четыре). width задаются в процентах, поэтому Вы всегда имеете одинаковый относительный размер.
- Промежутки также являются адаптивными и настраиваемыми.Доступны классы промежутков во всех контрольных точках с теми же размерами, что и наши поля и отступы. Измените горизонтальные промежутки на классы .gx-* , вертикальные промежутки на .gy-* , или все промежутки на классы .g-* . .g-0 также доступен для удаления промежутков.
- Переменные Sass, карты и миксины питают сетку. Если Вы не хотите использовать предопределенные классы сетки в Bootstrap, Вы можете использовать наш источник Sass сетки чтобы создать свой собственный с большим количеством семантическая разметка. Мы также включаем некоторые настраиваемые свойства CSS для использования этих переменных Sass для еще большей гибкости для Вас.
Параметры сетки
Система сеток Bootstrap может адаптироваться ко всем шести контрольным точкам по умолчанию и любым настраиваемым Вами контрольным точкам. Шесть уровней сетки по умолчанию следующие:
- Очень маленький — Extra small (xs)
- Маленький — Small (sm)
- Средний — Medium (md)
- Большой — Large (lg)
- Очень большой — Extra large (xl)
- Огромный — Extra extra large (xxl)
Как отмечалось выше, каждая из этих контрольных точек имеет собственный контейнер, уникальный префикс класса и модификаторы. Вот как меняется сетка в этих контрольных точках:
| xs | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px | |
|---|---|---|---|---|---|---|
| Container max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Колонки с автоматической компоновкой
Используйте классы колонок, специфичные для контрольной точки, для удобного определения размера колонки без явного нумерованного класса, например .col-sm-6 .
Равная ширина
Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs до xxl . Добавьте любое количество классов без единиц измерения для каждой нужной контрольной точки, и каждая колонка будет одинаковой ширины.