Варианты структурирования страниц с Bootstrap, включая глобальные стили, необходимые инструменты, блочная система и другие.
Фантазии более современную блочная система? Включить flexbox поддержки в Bootstrap чтобы воспользоваться всеми преимуществами CSS’гибкий модуль коробка для еще большего контроля над %вашего сайта 3%, выравнивания и распределения информации.
Bootstrap flexbox грид включает поддержку для каждого объекта из нашего по умолчанию значение блочная система, а затем некоторые. Пожалуйста, прочитайте по умолчанию значение блочная система документы прежде чем перейти через эту страницу. Особенности, которые покрыты подводятся только здесь. Обратите внимание, что Internet Explorer 9 не поддерживает flexbox, поэтому с осторожностью при включении его.
Внимание! этот flexbox грид документация приводится в действие дополнительный файл CSS, который переопределяет по умолчанию блочная система с CSS. Это только в нашей принимала документы и отключена в развитии.
В flexbox блочная система ведет себя похожими на наши по умолчанию значение блочная система, но с некоторыми существенными отличиями:
xs
уровня, flexbox требует .col-{breakpoint}
класс для каждого уровня.Холодок? Awesome—продолжайте чтение для получения дополнительной информации и некоторые фрагменты кода.
Когда flexbox поддержки, вы можете использовать точки останова конкретных классов столбца равной ширины столбцов. Добавить любое количество .col-{breakpoint}
s для каждой точки необходимо и вы хорошо идти. Например, вот два грид разметки, которые применяются к каждому устройству и возможность просмотра.
<div class="container">
<div class="row">
<div class="col-xs">
1 of 2
</div>
<div class="col-xs">
1 of 2
</div>
</div>
<div class="row">
<div class="col-xs">
1 of 3
</div>
<div class="col-xs">
1 of 3
</div>
<div class="col-xs">
1 of 3
</div>
</div>
</div>
Авто-%и 2% flexbox грид столбцы также означает, что вы можете установить ширину одного столбца, а остальные автоматически изменяет вокруг него. Вы можете использовать предопределенный грид классов (как показано ниже), грид примеси, или рядные шириной. Обратите внимание, что другие столбцы изменится независимо от ширины центральной колонки.
<div class="container">
<div class="row">
<div class="col-xs">
1 of 3
</div>
<div class="col-xs-6">
2 of 3 (wider)
</div>
<div class="col-xs">
3 of 3
</div>
</div>
<div class="row">
<div class="col-xs">
1 of 3
</div>
<div class="col-xs-5">
2 of 3 (wider)
</div>
<div class="col-xs">
3 of 3
</div>
</div>
</div>
В отличие от По умолчанию значение блочная система, в flexbox грид требуется класс для полной ширины столбцов. Если у вас есть .col-sm-6
и не добавить .col-xs-12
ваш xs
грид не будет правильно отображаться. Обратите внимание, что flexbox грид уровни еще шкалу в точки останова, так что если вы хотите два 50% широкие столбцы через sm
, md
и lg
, нужно только установить .col-sm-6
.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
1 of 2 (stacked on mobile)
</div>
<div class="col-xs-12 col-sm-6">
1 of 2 (stacked on mobile)
</div>
</div>
</div>
Используйте flexbox коммунальные услуги выравнивание вертикальное выравнивание столбцов.
<div class="container">
<div class="row flex-items-xs-top">
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
</div>
<div class="row flex-items-xs-middle">
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
</div>
<div class="row flex-items-xs-bottom">
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
<div class="col-xs">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs flex-xs-top">
One of three columns
</div>
<div class="col-xs flex-xs-middle">
One of three columns
</div>
<div class="col-xs flex-xs-bottom">
One of three columns
</div>
</div>
</div>
Flexbox утилиты для горизонтального выравнивания существуют по ряду разметка вариантов.
<div class="container">
<div class="row flex-items-xs-left">
<div class="col-xs-4">
One of two columns
</div>
<div class="col-xs-4">
One of two columns
</div>
</div>
<div class="row flex-items-xs-center">
<div class="col-xs-4">
One of two columns
</div>
<div class="col-xs-4">
One of two columns
</div>
</div>
<div class="row flex-items-xs-right">
<div class="col-xs-4">
One of two columns
</div>
<div class="col-xs-4">
One of two columns
</div>
</div>
<div class="row flex-items-xs-around">
<div class="col-xs-4">
One of two columns
</div>
<div class="col-xs-4">
One of two columns
</div>
</div>
<div class="row flex-items-xs-between">
<div class="col-xs-4">
One of two columns
</div>
<div class="col-xs-4">
One of two columns
</div>
</div>
</div>