Содержание
В чем разница между col-lg-*, col-md-* и col-sm-* в Bootstrap?
Давайте не будем усложнять Бутстрэп!
Обратите внимание, как col-sm занимает ширину 100% (другими словами, разбивается на новую строку) ниже 576px
, но col этого не делает. Вы можете заметить текущую ширину в верхнем центре в gif.
А вот и код:
<div>
<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
<div>
<div>col-sm</div>
<div>col-sm</div>
<div>col-sm</div>
</div>
</div>
Bootstrap по умолчанию выравнивает все столбцы (col) в одной строке равной ширины. В этом случае три col
будут занимать 100%/3 ширины каждый, независимо от размера экрана. Вы можете заметить это в gif.
Теперь, что, если мы хотим отобразить только один столбец в строке, то есть дать ширину 100% каждому столбцу, но только для небольших экранов ? Теперь идет col-xx
класса!
Я использовал col-sm
, потому что хотел разбить столбцы на отдельные строки ниже 576 пикселей. Эти 4 col-xx
класса предоставляются Bootstrap для различных устройств отображения, таких как мобильные телефоны, планшеты, ноутбуки, большие мониторы и т.д.
Таким образом, col-sm
сломается ниже 576px, col-md
сломается ниже 768px, col-lg
сломается ниже 992px и col-xl
сломается ниже 1200px
Обратите внимание, что в bootstrap 4 нет класса
col-xs
.
Это в значительной степени подводит итог. Ты можешь вернуться к работе.
Но это еще не все. Теперь идут col-*
и col-xx-*
для настройки ширины.
Помните, в приведенном выше примере я упоминал, что col
или col-xx
занимает равную ширину в строке. Поэтому, если мы хотим дать больше ширины конкретному col
, мы можем это сделать.
Строка начальной загрузки разделена на 12 частей, поэтому в приведенном выше примере было 3 col
, поэтому каждый из них занимает 12/3 = 4 части. Вы можете рассматривать эти детали как способ измерения ширины.
Мы также могли бы написать это в формате col-*
, т. е. col-4
, как это :
<div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
И это не имело бы никакого значения, потому что по умолчанию bootstrap дает равную ширину col
(4 + 4 + 4 = 12).
Но что, если мы хотим дать 7 частей 1-й col
, 3 части 2-й col
и rest 2 части (12-7-3 = 2) 3-й col
(7+3+2 таким образом, всего 12), мы можем просто сделать это:
<div>
<div>col-7</div>
<div>col-3</div>
<div>col-2</div>
</div>
и вы также можете настроить ширину классов col-xx-*
.
<div>
<div>col-sm-7</div>
<div>col-sm-3</div>
<div>col-sm-2</div>
</div>
Как это выглядит в действии?
Что делать, если сумма col
больше 12? Затем col
сдвинется/отрегулируется на нижнюю линию. Да, в строке может быть любое количество столбцов!
<div>
<div>col-12</div>
<div>col-9</div>
<div>col-6</div>
<div>col-6</div>
</div>
Что делать, если нам нужно 3 столбца в строке для больших экранов, но разделить эти столбцы на 2 строки для маленьких экранов?
<div>
<div>col-12 col-sm TOP</div>
<div>col col-sm</div>
<div>col col-sm</div>
</div>
Вы можете поиграть здесь: https://jsfiddle.net/JerryGoyal/6vqno0Lm/
Bootstrap Бутстрап примеры сетки
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.
Три равные колонки
.col-sm-4
.col-sm-4
.col-sm-4
В следующем примере показано, как получить три столбца одинаковой ширины, начиная с планшетов и масштабирования до больших рабочих столов.
На мобильных телефонах столбцы будут автоматически складываться:
Пример
<div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
<div>.col-sm-4</div>
</div>
Три неравные колонки
.col-sm-3
.col-sm-6
.col-sm-3
В следующем примере показано, как получить три столбца разной ширины, начиная с планшетов и масштабирование до больших рабочих столов:
Пример
<div>
<div>.col-sm-3</div>
<div>.col-sm-6</div>
<div>.col-sm-3</div>
</div>
Две неравные колонки
В следующем примере показано, как получить два столбца разной ширины, начиная с планшетов и масштабирование для больших рабочих столов:
Пример
<div>
<div>.col-sm-4</div>
<div>.col-sm-8</div>
</div>
Два столбца с двумя вложенными столбцами
В следующем примере показано, как получить два столбца, начиная с планшетов и масштабирование на большие рабочие столы, с еще двумя столбцами (равной ширины) в большой колонке (на мобильных телефонах,
Эти столбцы и их вложенные столбцы будут стека):
Пример
<div>
<div>
.col-sm-8
<div>
<div>.col-sm-6</div>
<div>.col-sm-6</div>
</div>
</div>
<div>.col-sm-4</div>
</div>
Смешанные: мобильные и настольные
Система Bootstrap Grid имеет четыре класса: XS (телефоны), SM (планшеты), MD (настольные компьютеры) и LG (большие рабочие столы).
Классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину для XS и SM, вам нужно только указать XS.
Пример
.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
<div>
<div>.col-xs-6 .col-md-10</div>
<div>.col-xs-6 .col-md-2</div>
</div>
<div>
<div>.col-xs-6</div>
<div>.col-xs-6</div>
</div>
Совет: Помните, что столбцы сетки должны добавлять до двенадцати строк. Более того, столбцы будут складываться независимо от видового экрана.
Смешанный: мобильный, планшетный и Настольный
Пример
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
<div>
<div>.col-xs-6 .col-sm-8 .col-lg-10</div>
<div>.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Очистить поплавки
Очистите поплавки (с .clearfix
классом) в определенных точках останова, чтобы предотвратить странное обертывание с неравномерным содержимым:
Пример
<div>
<div>
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div>Column 2</div>
<!— Add clearfix for only the required viewport —>
<div></div>
<div>Column 3</div>
<div>Column 4</div>
</div>
Смещение колонн
Переместите столбцы вправо с помощью .col-md-offset-*
классов. Эти классы увеличивают левое поле столбца на * столбцы:
Пример
<div>
<div>.col-sm-5 .col-md-6</div>
<div>
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
Упорядочение и изменение порядка столбцов
Изменение порядка столбцов сетки .col-md-push-*
и .col-md-pull-*
классов:
Пример
<div>
<div>.col-sm-4 .col-sm-push-8</div>
<div>.col-sm-8 .col-sm-pull-4</div>
</div>
Bootstrap 3 — Изменение порядка следования адаптивных блоков в макете
В этой статье познакомимся с классами сетки Bootstrap 3, предназначенными для адаптивного изменения порядка следования блоков в пределах строки, в которой они расположены.
Фреймворк Bootstrap содержит большое количество классов и компонентов. Но перед тем как переходить к наполнению сайта этими элементами, необходимо сначала создать каркас (макет) страницы. Данное действие в Bootstrap выполняется с помощью «строительных» элементов сетки. К этим элементам относятся обёрточные контейнеры, ряды, адаптивные блоки и др. Более подробно ознакомиться с этими элементами можно в статье «Bootstrap 3 – Сетка».
Но при проектировании макета зачастую бывает так, что необходимо на одних устройствах блоки расположить в одном порядке, а на других – в другом. Для реализации этого поведения блоков в Bootstrap 3 предназначены классы push и pull.
Классы push и pull
Классы push и pull предназначены для изменения порядка следования адаптивных блоков для конкретных типов устройств в пределах некоторой строки. Это означает, что адаптивные блоки на одном устройстве могут иметь один порядок следования, а на другом другой.
Классы push и pull должны использоваться вместе с классами сетки Bootstrap. Класс push выполняет смещение адаптивного блока на определённое количество колонок вправо, а класс pull — на определённое количество колонок влево.
Синтаксис классов push и pull:
col-{breakpoint}-push-{nc} col-{breakpoint}-pull-{nc} {breakpoint} - тип устройства (xs, sm, m или lg) {nc} - количество колонок (по умолчанию 0...12)
В следующей таблице показан синтаксис классов push и pull для различных размеров экрана.
Ширина viewport | Классы push | Классы pull |
---|---|---|
>0px (xs ) | .col-xs-push-{nc} | .col-xs-pull-{nc} |
>=768px (sm ) | .col-sm-push-{nc} | .col-sm-pull-{nc} |
>=992px (md ) | .col-md-push-{nc} | .col-md-pull-{nc} |
>=1200px (lg ) | .col-lg-push-{nc} | .col-lg-pull-{nc} |
Пример использования классов push и pull
Рассмотрим небольшой пример. Допустим, есть макет, состоящий из трёх блоков. Необходимо, чтобы на больших экранах блоки располагались горизонтально. Причём второй (2) блок, который содержит основной контент, находился посередине между первым (1) и третьим (3) блоками.
В то же время, на устройствах с маленьким экраном, нужно чтобы блоки располагались вертикально один под другим. Причём второй (2) блок должен располагаться над первым (1).
Разработку макета начнём с устройств, имеющих маленький размер экрана (xs и sm):
<div> <div> 2 блок </div> <div> 1 блок </div> <div> 3 блок </div> </div>
Доработаем адаптивные блоки, а именно установим им ширину, которые они должны иметь на средних и больших экранах:
<div> <div> 2 блок </div> <div> 1 блок </div> <div> 3 блок </div> </div>
Теперь изменим порядок следования адаптивных блоков. Для этого второй (2) адаптивный блок сдвинем вправо на 3 колонки, а первый (1) сдвинем влево на 6 колонок Bootstrap.
<!-- Boostrap 3 --> <div> <div> 2 блок </div> <div> 1 блок </div> <div> 3 блок </div> </div>
Рекомендации по разработке макета с помощью сетки Bootstrap
При создании макета с использованием сетки фреймворка Bootstrap 3 предпочтительнее начинать разработку с устройств, которые имеют крохотный размер экрана (смартфоны).
Почему так? Потому что изменить порядок следования адаптивных блоков для устройств с большим размером экрана намного проще, чем для устройств с крохотным экраном.
Позиционирование элементов в Bootstrap
Позиционирование элементов
Последнее обновление: 31.10.2015
При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы
посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком
расположены как бы в три столбца и составляют одну строку:
Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:
<div> <div> <h3>Getting started</h3> <p>.............</p> </div> <div> <h3>Get more libraries</h3> <p>.............</p> </div> <div> <h3>Web Hosting</h3> <p>.............</p> </div> </div>
Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно,
но в данном случае у нас одна строка.
Для создания отдельного столбца строки используется класс col-md-4
. col
, как ясно из названия, обозначает столбец.
Дальше идет md
— идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от
ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных
единиц в строке будет занимать данный блок. Таким образом, получается, что класс col-md-4
означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины
экрана устройства с экраном шириной от 992 пикселей.
И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов),
подобный класс мог бы быть таким col-xs-4.
Все типы классов:
col-xs-*: для устройств с шириной экрана меньше 768 пикселей
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше
col-md-*: для устройств с шириной экрана от 992 пикселя и выше
col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше
Хотя даже на мобильных устройствах блок с классом col-md-4
будет выглядеть вполне неплохо, но мы можем установить сразу два класса,
чтобы еще больше детализировать отображение на различных устройствах, например:
<div>
И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать
любую другую ширину, позиционируя их по собственному усмотрению. Например:
Отступы
Специальные классы col-md(sm|lg)-offset-*
позволяют задать смещение относительно левого блока или начала строки в условных единицах.
Например, у нас есть такая строка:
<div> <div> <h3>Левый блок</h3> <p>................</p> </div> <div> <h3>Правый блок</h3> <p>................</p> </div> </div>
Класс col-md-offset-4
будет смещать правый блок на 4 условных единицы вправо:
Некоторые примеры по использованию смещения:
Порядок столбцов
С помощью классов col-md(sm|lg)-push-*
и col-md(sm|lg)-pull-*
мы можем переопределить порядок блоков в строке.
Например, класс col-md-push-4
сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4
сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:
<div> <div> <h3>Левый блок</h3> <p>................</p> </div> <div> <h3>Правый блок</h3> <p>................</p> </div> </div>
И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:
<div> <div> <h3>Левый блок</h3> <p>................</p> </div> <div> <h3>Правый блок</h3> <p>................</p> </div> </div>
Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:
Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что
на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.
`Col-Xs- *` Не Работает В Bootstrap 4
Я не сталкивался с этим раньше, и мне очень сложно найти решение. При наличии столбца, равного среднему в бутстрапе, например:
<h2>Hello, world!</h2>
<div>
<div>
<div>
<h2>vicki williams</h2>
</div>
</div>
</div>
Текстовое выравнивание отлично работает:
Но при том, что столбец будет таким же маленьким, как:
<div>
<div>
<div>
<h2>vicki williams</h2>
</div>
</div>
</div>
Затем текст-align больше не работает:
Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как я думаю. У меня никогда не было этой проблемы, так как мой текст всегда сопоставлялся в прошлом с xs. Любая помощь будет принята с благодарностью.
Вот мой полный код:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h2>Hello, world!</h2>
<div>
<div>
<div>
<h2>vicki williams</h2>
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 3 сетка: основы
Основная разработка сайта для верстальщика начинается с правильного построения сетки сайта. Если вы используете Bootstrap 3, то понимание сетки фреймворка крайне необходимо. В этой небольшой заметки я постараюсь рассмотреть основные нюансы при использовании сетки от Bootstrap. В статья в основном дан перевод документации к Bootstrap Grid, но также приведены некоторые мои дополнения.
Контейнер-обертка
Bootstrap требуется охватывающий элемент, чтобы обернуть контент сайта и стать домом для нашей сеточной системы. Для своего проекта вы можете использовать один из двух вариантов.
Используйте .container для отзывчивого с фиксированной шириной контейнера (максимальная ширина блока 1170px).
Используйте .container-fluid для контейнера с шириной на всю область просмотра.
Система сетки
Bootstrap включает отзывчивую, изначально ориентированную на мобильные устройства сетку, которая масштабируется, начиная с 12 столбцов как на устройствах или при изменении окна просмотра. Она включает предопределенные классы для простой настройки разметки, а также мощные примеси для генерации более семантической разметки .
Итак подходим к сути.
Сетки используют для построения макетов страниц посредством компоновки строк и колонок, которые содержат контент.
Основы работы сетки Bootstrap:
- Row (строки) должны быть расположены внутри .container (fix) или .container-fluid (full-width) для правильного выравнивания и padding (отступов – рассмотрим ниже чуть более подробно).
- Используйте rows (строки), чтобы создать горизонтальную группу колонок.
- Контент должен быть расположен внутри колонок, и только колонки могут быть первыми дочерними элементами rows (строки).
- Предопределенные классы сетки, например, такие как .row и .col-xs-4, позволяют быстро создать макет сетки.
- Колонки создают промежутки (зазоры между контентом колонок) посредством padding (отступов). Этот отступ смещается в строках для первой и последней колонки посредством отрицательного поля у элемента .row. Дополнение: более подробно об использовании отрицательных полей вы можете узнать здесь, а если вкратце: так как у статичного элемента .row не задана ширина, то элемент .row будет вытолкнут по направлению left/right с увеличением ширины элемента.
- Именно из-за смещения контент внутри сетки ниже выровнялся на одной линии с контентом не-сетки (речь очевидно о контенте статьи — http://getbootstrap.com/css/#grid).
- Колонки сетки создаются при помощи указания одного номера из двенадцати возможных для колонок, которые вы хотите создать. Например, для построения трех равнозначных колонок достаточно использовать .col-xs-4.
- Если более чем 12 колонок расположены внутри одной строки, то каждая группа дополнительных колонок должна быть обернута новой строкой.
- Классы сетки подразделяются в зависимости от ширины устройств, которые определены в точках останова. При этом, например, применив класс .col-md-* к элементу его стиль будет использован не только для средних устройств, но и к большим устройствам, но только если не задан класс .col-lg-*.
Чтобы понять все эти принципы было еще проще взгляните на изображение ниже:
Медиа-запросы
Для сетки используются следующие медиа-запросы (из LESS-файла):
/* Совсем маленькие устройства (phones, меньше 768px) */
/* Медиа-запросы отсутствуют, так как эти стили стоят в
Bootstrap по умолчанию */
/* Небольшие устройства (планшеты, 768px и выше) */
@media (min-width: @screen-sm-min) { … }
/* Средние устройства (мониторы, 992px and up) */
@media (min-width: @screen-md-min) { … }
/* Большие устройства (большие мониторы, 1200px and up) */
@media (min-width: @screen-lg-min) { … }
Настройки сетки
Совсем небольшие устройства | Небольшие устройства | Средние устройства | Большие устройства | |
Поведение сетки | Горизонтальное все время | Сжатая изначально, горизонтальная выше точки останова (видимо имеется ввиду, когда ширина устройства меньше, чем предусмотрено классом – смотрите медиа запросы) | ||
Ширина контейнера | None (auto) | 750px | 970px | 1170px |
Префикс класса | .col-xs- | .col-sm- | .col-md- | .col-lg- |
# колонок | 12 | |||
Ширина колонки | Auto | ~62px | ~81px | ~97px |
Ширина зазора | 30px (15px с каждой стороны колонки) | |||
Вложение | Yes | |||
Смещение | Yes | |||
Упорядочение колонки | Yes |
Пример: сложенные по горизонтали
Используя класс .col-md-*, вы создаете сетку, которая начинает складываться (образуется стек) на мобильных устройствах; при этом на средних устройствах ячейки расположены горизонтально. Расположите колонки сетки в любом .row.
Пример на официальном сайте — stacked-to-horizontal
HTML
<div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
<div>.col-md-1</div>
</div>
<div>
<div>.col-md-8</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-4</div>
<div>.col-md-4</div>
<div>.col-md-4</div>
</div>
<div>
<div>.col-md-6</div>
<div>.col-md-6</div>
</div>
Пример: жидкий контейнер
Поменяйте сетку с фиксированной шириной на сетку с шириной на все окно браузера при помощи замены .container на .container-fluid.
HTML
<div>
<div>
…
</div>
</div>
Пример: мобильники и настольные устройства
Не хотите, чтобы ваши колонки складывались на мобильных устройствах? Применяйте к колонкам классы для небольших и средних устройств: .col-xs-*, .col-md-*. Смотрите пример ниже для лучшего понимания принципов работы использования нескольких классов.
Пример на официальном сайте — grid-example-mixed
HTML
<!— Stack the columns on mobile by making one full-width and the other half-width —>
<div>
<div>.col-xs-12 .col-md-8</div>
<div>.col-xs-6 .col-md-4</div>
</div>
<!— Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop —>
<div>
<div>.col-xs-6 .col-md-4</div>
<div>.col-xs-6 .col-md-4</div>
<div>.col-xs-6 .col-md-4</div>
</div>
<!— Columns are always 50% wide, on mobile and desktop —>
<div>
<div>.col-xs-6</div>
<div>.col-xs-6</div>
</div>
Пример: мобильники, планшеты и настольные устройства
Основываясь на предыдущем примере создайте еще более мощный и динамический макет с классом для планшетов .col-sm-*.
http://getbootstrap.com/css/#grid-example-mixed-complete
Пример на официальном сайте — grid-example-mixed-complete
HTML
<div>
<div>.col-xs-12 .col-sm-6 .col-md-8</div>
<div>.col-xs-6 .col-md-4</div>
</div>
<div>
<div>.col-xs-6 .col-sm-4</div>
<div>.col-xs-6 .col-sm-4</div>
<!— Optional: clear the XS cols if their content doesn’t match in height —>
<div></div>
<div>.col-xs-6 .col-sm-4</div>
</div>
Пример: смещение колонки на новую строку
Если в строке расположено более 12 колонок, каждая группа дополнительных колонок, как самостоятельная единица сместится на новую линию.
Пример на официальном сайте — grid-example-wrapping
HTML
<div>
<div>.col-xs-9</div>
<div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div>.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
Сброс для адаптивных колонок
Имея сетку из четырех колонок вы, возможно, столкнетесь с проблемой, когда для соответствующих точек останова ваши столбцы не выровнялись правильно, так как один столбец выше другого. Чтобы исправить это, используйте комбинацию класса .clearfix и наших служебных отзывчивых классов.
Пример на официальном сайте — grid-responsive-resets
HTML
<div>
<div>.col-xs-6 .col-sm-3</div>
<div>.col-xs-6 .col-sm-3</div>
<!— Add the extra clearfix for only the required viewport —>
<div></div>
<div>.col-xs-6 .col-sm-3</div>
<div>.col-xs-6 .col-sm-3</div>
</div>
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.
HTML
<div>
<div>.col-sm-5 .col-md-6</div>
<div>.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div>
<div>.col-sm-6 .col-md-5 .col-lg-6</div>
<div>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
Смещение колонок
Сместите колонки направо, используя класс .col-md-offset-*. Эти классы увеличивают левое поле колонки на * колонок. Например, .col-md-offset-4 сместит .col-md-4 на четыре колонки.
Пример на официальном сайте — grid-offsetting
HTML
<div>
<div>.col-md-4</div>
<div>.col-md-4 .col-md-offset-4</div>
</div>
<div>
<div>.col-md-3 .col-md-offset-3</div>
<div>.col-md-3 .col-md-offset-3</div>
</div>
<div>
<div>.col-md-6 .col-md-offset-3</div>
</div>
Вложенные колонки
Чтобы вложить ваш контент в существующую сетку, добавьте новую .row и установите .col-md-* колонок внутри уже существующей .col-sm-* колонки.
Пример на официальном сайте — grid-nesting
HTML
<div>
<div>
Level 1: .col-sm-9
<div>
<div>
Level 2: .col-xs-8 .col-sm-6
</div>
<div>
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
Порядок колонок
Порядок для колонок сетки можно изменить при помощи классов .col-md-push-* и .col-md-pull-*.
Пример на официальном сайте — grid-column-ordering
HTML
<div>
<div>.col-md-9 .col-md-push-3</div>
<div>.col-md-3 .col-md-pull-9</div>
</div>
Основы адаптивного веб-дизайна с помощью Twitter Bootstrap.
Введение:
Адаптивный веб-дизайн – это один из главных показателей качества сайта, который отвечает за корректность его отображения на разных устройствах в виде динамических изменений под заданные размеры окна браузера.
Для создания адаптивных веб-страниц Вам стоит ознакомиться с реализованной Bootstrap системой разметки — «сетка» (Bootstrap grid). Сетку формируют 12 отдельных столбцов, которые также могут использоваться группами для создания более широких колонок.
Система разметки Bootstrap является адаптивной, вследствие чего столбцы перестроятся в соответствии с размером экрана.
Сетка включает в себя такие классы:
- xs (для телефонов) – менее 768px
- sm (для планшетов) – от 768px
- md (для ПК и ноутбуков) – от 992px
- lg (для ПК с мониторами большой диагонали) – от 1200px
Наглядный пример разметки страницы на строки и столбцы для отображения на ПК:
В коде это может выглядеть так:
<div>
<div>.col-sm-4 div>
<div>.col-sm-4 div>
<div>.col-sm-4 div>
div>
Или так:
<div>
<div>.col-sm-4 div>
<div>.col-sm-8 div>
div>
К столбцам можно применять несколько классов, что укажет, как именно они перестроятся при просмотре на устройствах с разными размерами экранов.
К примеру:
<div>
<div>
Responsive block 1
div>
<div>
Responsive block 2
div>
div>
Рассмотрим первый пример.
Первым делом, откройте предпочтительную Вам среду разработки и создайте файл index.html. Далее потребуется подключить сам Bootstrap. Есть два варианта подключения:
Вашего файла соответствующие-и;следующий код:
Вашего файла соответствующие-и;следующий код:
- скачать .zip с официального сайта(http://getbootstrap.com/) и добавить в
- воспользоваться более быстрым способом и просто подключить с помощью CDN добавив в
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css»>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css»>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js»>script>
Далее, создадим контейнер, который послужит оберткой для дальнейшего кода.
В Bootstrap существуют два класса контейнеров: “container” и “.container-fluid”. Сразу скажу о том, что адаптивности, как таковой, мы добьемся, используя контейнер как первого, так и второго типа. Различие между ними состоит в том, что “.container” будет имеет фиксированную максимальную ширину, в то время как “.container-fluid” является “резиновым” и растягивается на всю ширину экрана. Подробнее о контейнерах можно прочесть на сайте (http://getbootstrap.com/css/#grid) в разделе Containers.
Давайте рассмотрим, как это работает на примере.
Пример:
Создадим
с классом “container” в
и добавим в него две строки (
с классом “row”). В первую строку добавим два столбца, а во вторую три столбца. Главное помнить, что суммарное количество столбцов должно быть равным двенадцати.
Код выглядит так:
DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css»>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css»>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js»>script>
head>
<body>
<div>
<div>
<div >
Первая строка, первый столбец.
div>
<div >
Первая строка, второй столбец.
div>
div>
<div>
<div >
Вторая строка, первый столбец.
div>
<div >
Вторая строка, второй столбец.
div>
<div >
Вторая строка, третий столбец.
div>
div>
div>
body>
html>
Давайте откроем пример в браузере и посмотрим на результат. Мы видим, что ширина содержимого страницы фиксированная и не растягивается на всю ширину окна.
Для того чтобы увидеть, как перестраиваются столбцы, нужно изменить размер окна браузера.
Сперва столбцы перестроятся так:
А затем так:
Теперь давайте изменим класс нашего
на класс “container-fluid”, а все остальное оставим без изменений. Затем откройте Вашу страничку в браузере и посмотрите разницу.
Попробуйте изменить размеры окна и посмотрите, как перестраиваются столбцы.
Результат после изменений выглядят так:
Разобравшись с различиями между этими двумя классами контейнеров, можно приступить к работе с самой сеткой.
Предлагаю рассмотреть адаптивность системы разметки Bootstrap на примере создания формы регистрации пользователя.
Второй пример:
Создадим html страницу со стандартной структурой. Между тегами
вставляем
с классом “container” для того, чтобы максимальная ширина формы была фиксированной.
DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css»>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css»>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js»>script>
<title>Our registration formtitle>
head>
<body>
<div>
div>
body>
html>
Теперь мы можем начать работу непосредственно над нашей формой. Добавим в контейнер
с классом “row” и в него одинс классами “col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4”.
Здесь “col-xs-12 col-sm-6 col-md-4” — уже знакомые нам классы, которые будут задавать ширину формы при разных размерах экрана.
Акцентирую внимание на классах “col-sm-offset-3 col-md-offset-4”. Подобные классы “col-md-offset-*” используются для смещения колонок, задавая отступ слева от столбца, к которому они применены на «*» количество колонок. В нашем примере будет сделан отступ шириной в 3 колонки при размере экрана менее 768px, и отступ размером в 4 колонки при размере экрана от 992px.
<div>
<div>
<div>
div>
div>
div>
Нашу форму следовало бы упаковать в компонент-панель (для удобства). За это отвечает класс “panel”. Применим его к
. К этому жеприменим класс “panel-primary”, который задает синий фон для заголовка. Для добавления самого заголовка также потребуется отдельныйс классом “panel-heading”, в который уже помещают теги для задания заголовков любого уровня
с примененным к ним классом “panel-title”.
<div>
<div>
<div>
<div>
<div>
<div>
<h4>Registration formh4>
div>
div>
div>
div>
div>
На данном этапе наша форма в браузере будет выглядеть так:
После
…
добавим тегс классом “panel-body” и непосредственно в этотмы будем добавлять поля для заполнения пользователем.
В нашей форме будут такие поля:
- Имя
- Фамилия
- Пароль
- Поле для повторного введения пароля, как его подтверждение
В качестве поля ввода мы будем использовать тег с атрибутом type, установленным разными значениями. Нужно отметить, что я использую HTML5, в котором для данного атрибута добавлены определенные значения для адресов электронной почты. Подробнее об этом вы сможете узнать из статьи (http://htmlbook.ru/html/input/type).
Также нам понадобится кнопка для подтверждения ввода и дальнейшей отправки информации о пользователе на сервер. В Bootstrap имеется специальный класс “btn” для создания кнопок.
Реализуем кнопку с помощью тега с атрибутом “submit” и классами “btn btn-info”, где класс “btn-info” задает кнопке синий цвет. Подробнее о кнопках вы сможете прочесть на сайте в разделе Buttons.
Нам нужно добавить три
с классом “row” внутрьс классом “panel-body”. В первой и третьей строке будет по два столбца, а во второй строке — один. В данном примере каждое поле формы при уменьшении размера окна перестроится и будет расположено в отдельной строке.
Код выглядит так:
<div>
<div>
<div>
<input type=»text» placeholder=»First name»>
div>
<div>
<input type=»text» placeholder=»Last name»>
div>
div>
<div>
<input type=»email» placeholder=»Email»>
div>
<div>
<div>
<input type=»password» placeholder=»Password»>
div>
<div>
<input type=»password» placeholder=»Confirm password»>
div>
div>
<input type=»submit» value=»Register»>
div>
На данном этапе форма выглядит так:
Изменив размеры окна, мы увидим адаптивность в действии:
Наша форма уже является адаптивной, но между строк отсутствуют отступы, что портит внешний вид нашей формы. Для устранения этой проблемы воспользуемся простым решением. Каждый стоит вложить в
с классом “form-group” , который задаст отступы от полей сверху и снизу. Подобного результата можно добиться, используя свойство CSS — “margin”.
<div>
<div>
<div>
<div>
<input type=»text» placeholder=»First name»>
div>
div>
<div>
<div>
<input type=»text» placeholder=»Last name»>
div>
div>
div>
<div>
<div>
<input type=»email» placeholder=»Email»>
div>
div>
<div>
<div>
<div>
<input type=»password» placeholder=»Password»>
div>
div>
<div>
<div>
<input type=»password» placeholder=»Confirm password»>
div>
div>
div>
<input type=»submit» value=»Register»>
div>
Запустив пример в браузере, Вы увидите привлекательную форму регистрации пользователя.
Уменьшив размер, получим:
Надеемся, что статья была для Вас полезной и послужит толчком для создания потрясающих веб страниц с помощью Bootstrap(http://getbootstrap.com/)!
Сеточная система начальной загрузки
Сеточная система начальной загрузки
Сетка
Bootstrap позволяет размещать на странице до 12 столбцов.
Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе для создания более широких столбцов:
пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 |
пролет 4 | пролет 4 | пролет 4 | |||||||||
пролет 4 | пролет 8 | ||||||||||
пролет 6 | пролет 6 | ||||||||||
пролет 12 |
Сетка Bootstrap реагирует, и столбцы будут переупорядочены
в зависимости от размера экрана: на большом экране может выглядеть лучше с
контент организован в три столбца, но на маленьком экране лучше, если
элементы содержимого были наложены друг на друга.
Совет: Помните, что сумма столбцов сетки должна составлять двенадцать для
строка. Более того, столбцы будут складываться независимо от области просмотра.
Классы сетки
Система сеток Bootstrap имеет четыре класса:
-
xs
(для телефонов — экраны шириной менее 768 пикселей) -
см
(для планшетов — экраны шириной не менее 768 пикселей) -
md
(для небольших ноутбуков — экраны шириной 992 пикселя или более) -
LG
(для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.
Правила сетевой системы
Некоторые правила сеточной системы Bootstrap:
- Строки должны быть размещены в контейнере
.container
(фиксированной ширины) или.container-fluid
(во всю ширину) для надлежащего выравнивания и заполнения - Используйте строки для создания горизонтальных групп столбцов
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк
- Предопределенные классы, например
.row
и.col-sm-4
доступны для быстрого создания макетов сетки - Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения. Это заполнение смещено в строках для первого и последнего столбца с помощью отрицательного поля на
. Строк
- Столбцы сетки создаются путем указания количества из 12 доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три
.col-sm-4
- Ширина столбцов указывается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
.
Базовая структура сетки начальной загрузки
Ниже представлена базовая структура сетки Bootstrap:
Итак, чтобы создать нужный макет, создайте контейнер (
). Затем добавьте желаемое количество столбцов (теги с соответствующими
.col - * - *
классы). Обратите внимание, что числа в .col - * - *
всегда должны составлять 12 для каждой строки.
Параметры сети
В следующей таблице показано, как сеточная система Bootstrap работает на нескольких устройствах:
Очень маленький
<768px Маленький
> = 768px Средний
> = 992px Большой
> = 1200 пикселей Префикс класса .col-xs-
.col-sm-
.col-md-
.col-lg-
Подходит для Телефоны Таблетки Маленькие ноутбуки Ноутбуки и настольные ПК Поведение сетки По горизонтали всегда Свернут, чтобы начать, горизонтально над контрольными точками Свернут, чтобы начать, горизонтально над контрольными точками Свернут, чтобы начать, горизонтально над контрольными точками Ширина контейнера Нет (авто) 750px 970px 1170px Кол-во столбцов 12 12 12 12 Ширина колонны Авто ~ 62 пикселей ~ 81 пикс. ~ 97 пикселей Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) 30 пикселей (по 15 пикселей с каждой стороны столбца) Nestable Есть Есть Есть Есть Смещения Есть Есть Есть Есть Заказ колонки Есть Есть Есть Есть
Примеры
В следующих главах показаны примеры грид-систем для различных устройств:
Grid system — Bootstrap — University of Houston
Bootstrap включает в себя адаптивную мобильную первую гибкую сеточную систему, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или области просмотра.Предопределенные классы включены для упрощения настройки макета.
Введение
Системы сетки
используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот как работает сетка Bootstrap:
- Строки должны быть размещены в контейнере
.container
(фиксированной ширины) или .container-fluid
(во всю ширину) для надлежащего выравнивания и заполнения. - Используйте строки для создания горизонтальных групп столбцов.
- Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
- Предопределенные классы сетки, такие как
.row
и .col-xs-4
, доступны для быстрого создания макетов сетки. - Столбцы создают промежутки (промежутки между содержимым столбца) через заполнение
. Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row
s. - Отрицательный запас — вот почему приведенные ниже примеры неактуальны. Это значит, что содержимое в столбцах сетки совмещается с содержимым, не относящимся к сетке.
- Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить.Например, три равных столбца будут использовать три
.col-xs-4
. - Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одно целое переноситься на новую строку.
- Классы сетки применяются к устройствам с шириной экрана больше или равной размеру точки останова и переопределяют классы сетки, нацеленные на устройства меньшего размера. Поэтому, например, применение любого класса
.col-md- *
к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если класс .col-lg- *
класса нет.
Посмотрите примеры применения этих принципов к вашему коду.
Мы используем следующие медиа-запросы для создания ключевых точек останова в нашей сеточной системе.
/ * Очень маленькие устройства (телефоны, менее 768 пикселей) * /
/ * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * /
/ * Маленькие устройства (планшеты, 768 пикселей и выше) * /
@media (min-width: @ screen-sm-min) {...}
/ * Средние устройства (настольные компьютеры, 992 пикселей и выше) * /
@media (min-width: @ screen-md-min) {...}
/ * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * /
@media (min-width: @ screen-lg-min) {...}
Мы иногда расширяем эти медиа-запросы, добавляя max-width
, чтобы ограничить CSS более узким набором устройств.
@media (max-width: @ screen-xs-max) {...}
@media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...}
@media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...}
@media (min-width: @ screen-lg-min) {...}
Параметры сети
Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах, с помощью удобной таблицы.
Сверхмалые устройства Телефоны (<768 пикселей) Маленькие устройства Планшеты (≥768 пикселей) Средние устройства Настольные компьютеры (≥992 пикселей) 68 Большие устройства Настольные компьютеры (≥1200 пикселей) Поведение сетки По горизонтали всегда Свернут, чтобы начать, горизонтально над контрольными точками Ширина контейнера Нет (авто) 750px 970px 1170px Префикс класса .col-xs-
.col-sm-
.col-md-
.col-lg-
Кол-во столбцов 12 Ширина колонны Авто ~ 62 пикселей ~ 81 пикс. ~ 97 пикселей Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца) Nestable Есть Смещения Есть Колонка для заказа Есть
Пример: с накоплением по горизонтали
Используя один набор .col-md- *
, вы можете создать базовую сеточную систему, которая начинается с накопления на мобильных устройствах и планшетных устройствах (от сверхмалого до небольшого диапазона), а затем становится горизонтальной на настольных (средних) устройствах. Поместите столбцы сетки в любой .row
.
.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-4
.col-md-4
.col-md-4
.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-xs- *
.col-md- *
. См. Пример ниже, чтобы лучше понять, как все это работает.
.col-xs-12 .col-md-8
.col-xs-6.col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Пример: мобильный телефон, планшет, компьютер
Постройте предыдущий пример, создав еще более динамичные и мощные макеты с помощью классов tablet .col-sm- *
.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Пример: упаковка столбцов
Если в одной строке помещается более 12 столбцов, каждая группа дополнительных столбцов будет как одно целое переноситься на новую строку.
.col-xs-9
.col-xs-4
Поскольку 9 + 4 = 13> 12, этот div шириной с 4 столбцами переносится на новую строку как один непрерывный блок.
.col-xs-6
Последующие столбцы продолжаются вдоль новой строки.
.col-xs-9
.col-xs-4
Поскольку 9 + 4 = 13 & gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.
.col-xs-6
Последующие столбцы продолжаются вдоль новой строки.
Сброс адаптивного столбца
С четырьмя доступными уровнями сеток вы обязательно столкнетесь с проблемами, когда в определенных точках останова ваши столбцы не очищаются правильно, поскольку один выше другого.Чтобы исправить это, используйте комбинацию .clearfix
и наших отзывчивых служебных классов.
.col-xs-6 .col-sm-3
Измените размер окна просмотра или посмотрите его на своем телефоне для примера.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения, подталкивать или вытягивать . Посмотрите это в действии на примере сетки.
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
Колонны компенсационные
Переместите столбцы вправо, используя классы .col-md-offset- *
. Эти классы увеличивают левое поле столбца на *
столбцов. Например, .col-md-offset-4
перемещает .col-md-4
по четырем столбцам.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Вложенные столбцы
Чтобы вложить контент в сетку по умолчанию, добавьте новый .строка
и набор из столбцов .col-sm- *
в существующем столбце .col-sm- *
. Вложенные строки должны включать набор столбцов, которые в сумме составляют до 12 или меньше (необязательно, чтобы вы использовали все 12 доступных столбцов).
Уровень 1: .col-sm-9
Уровень 2: .col-xs-8 .col-sm-6
Уровень 2: .col-xs-4 .col-sm-6
Уровень 1: .col-sm-9
Уровень 2: .col-xs-8 .col-sm-6
Уровень 2: .col-xs-4 .col-sm-6
Колонка заказная
Простое изменение порядка столбцов встроенной сетки с классами модификаторов .col-md-push- *
и .col-md-pull- *
.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Как заменить col-xs- * в Bootstrap 4
Как заменить col-xs- * в Bootstrap 4
- Фрагменты
- ›
- CSS
- ›
- Как заменить col-xs- * в Bootstrap 4
Решение с col- * ¶
Сетка Bootstrap 4 предлагает адаптивные классы для определения того, на каких экранах работает указанный макет.
Дополнительный маленький класс (col-xs) применяет класс столбца сетки к элементу, когда экран уже 576 пикселей.
Если вы хотите применить дополнительный небольшой класс в Bootstrap 4, важно знать, что col-xs- * удаляется в Bootstrap4. Вместо этого вам нужно использовать col- *.
Пример использования col- * вместо col-xs- * в Bootstrap 4: ¶
Привет, мир!
Пример col-12
Попробуйте сами »
Если вы хотите разделить на две равные части, используйте col-6, как в следующем примере.
Пример использования col-6 в Bootstrap 4: ¶
Привет, мир!
пример col-6
пример col-6
Попробуйте сами »
Спасибо за ваш отзыв!
Считаете ли вы это полезным? Да Нет
Статьи по теме
Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайтов.Принимаю
Шаблон сетки
для Bootstrap
Базовые макеты сеток, чтобы познакомить вас со сборкой в системе сеток Bootstrap.
Пять ярусов сетки
В сеточной системе Bootstrap есть пять уровней, по одному для каждого диапазона устройств, которые мы поддерживаем. Каждый уровень начинается с минимального размера области просмотра и автоматически применяется к более крупным устройствам, если не отменен.
.col-xs-4
.col-xs-4
.col-xs-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
Три равных столбца
Получите три столбца одинаковой ширины, начиная с рабочих столов и заканчивая большими рабочими столами . На мобильных устройствах, планшетах и более ранних версиях столбцы складываются автоматически.
.col-md-4
.col-md-4
.col-md-4
Три неравных столбца
Получите три столбца , начиная с рабочих столов и масштабируясь до больших рабочих столов различной ширины. Помните, что количество столбцов сетки должно составлять до двенадцати для одного горизонтального блока. Более того, столбцы начинают складываться независимо от области просмотра.
.col-md-3
.col-md-6
.col-md-3
Две колонны
Получите две колонки , начиная с рабочих столов и заканчивая большими рабочими столами .
Полная ширина, одна колонка
Для полноширинных элементов классы сетки не требуются.
Два столбца с двумя вложенными столбцами
Согласно документации, вложение легко — просто поместите строку столбцов в существующий столбец. Это дает вам два столбца , начиная с рабочих столов и масштабируясь до больших рабочих столов , с еще двумя (равной ширины) внутри большего столбца.
При размерах мобильных устройств, планшетов и меньше, эти столбцы и их вложенные столбцы будут складываться.
Смешанный: мобильный и настольный
Сетка Bootstrap v4 имеет пять уровней классов: xs (очень маленький), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать практически любую комбинацию этих классов для создания более динамичных и гибких макетов.
Каждый уровень классов масштабируется, что означает, что если вы планируете установить одинаковую ширину для xs и sm, вам нужно только указать xs.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
Смешанное: мобильные устройства, планшеты и компьютеры
.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6.col-sm-4
.col-xs-6 .col-sm-4
Очистка колонны
Очищайте плавающие элементы в определенных точках останова, чтобы предотвратить неудобную упаковку с неравномерным содержанием.
.col-XS-6 .col-sm-3
Измените размер области просмотра или посмотрите пример на своем телефоне.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Сброс смещения, вытягивания и вытягивания
Сбрасывает смещения, подталкивания и вытягивания в определенных точках останова.
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Как адаптировать дизайн с помощью Bootstrap
Bootstrap 4 имеет 5 уровней отклика (также известных как «точки останова»), которые вы, возможно, заметили в
некоторые из предыдущих примеров столбца (например, col-lg-4, col-md).
Bootstrap использует медиа-запросы CSS для установки этих отзывчивых точек останова. Они позволяют управлять поведением столбца при разной ширине экрана.
Col-sm-6 означает использование ширины 6 из 12 столбцов (50%) на типичном устройстве небольшой ширины (больше или равно 768 пикселей):
Это потому, что (xs) является точкой останова по умолчанию или подразумеваемой. Поскольку я не указал ширину столбца по умолчанию, ширина 50% была применена только к 768px и шире для точки останова sm.
Поскольку (xs) является точкой останова по умолчанию, подразумевается col-12. Итак, это:
Столбец
Фактически то же самое, что и этот:
Столбец
Точки останова большего размера, отменяют точки останова меньшего размера.
xs
(по умолчанию)>
переопределено sm
>
переопределено md
>
переопределено lg
>
переопределено xl
Или, наоборот…
xl
> отменяет lg
> отменяет md
> отменяет sm
> отменяет (xs)
Следовательно, col-sm-6
на самом деле означает ширину 50% для малых и больших размеров.Для одинаковой ширины столбца на всех уровнях просто установите ширину для наименьшего желаемого уровня. Например :
Например, :
.. совпадает с
..
Для другой ширины столбца на большем уровне используйте соответствующую большую точку останова, чтобы переопределить меньшую точку останова.Например, 3 столбца шириной на см, и 4 столбца шириной на мкр и выше:
..
Колонки автоматической компоновки в Bootstrap 4 также работают отзывчиво. Из-за их простоты я предпочитаю их классическим колоннам на 12 единиц.
Столбцы с автоматическим макетом идеально подходят для любых сценариев макета, где требуются столбцы одинаковой ширины.Но не забывайте, что столбцы с 12 единицами могут быть смешаны по мере необходимости.
Взгляните на несколько примеров автоматической компоновки Grid…
3 столбца одинаковой ширины. Столбцы остаются горизонтальными при любой ширине и не складываются вертикально, потому что точка останова xs установлена по умолчанию:
1
2
3
3 столбца одинаковой ширины (отзывчивые).В этом примере столбцы остаются горизонтальными до точки останова см и
576 пикселей, а затем складываются вертикально:
1
2
3
Помните, что вы можете отключить sm для любой необходимой точки останова (md, lg, xl).
2 столбца, левая боковая панель и правая. Вот пример объединения классических столбцов определенной ширины,
с автоматическим расположением столбцов. Правый столбец автоматически увеличится, чтобы заполнить ширину.
Боковая панель будет располагаться сверху в точке останова sm 576 пикселей:
боковая панель
основной
Ключевые моменты адаптивного дизайна с использованием сетки:
Столбцы будут располагаться вертикально (и становиться во всю ширину) при меньшей ширине экрана, если вы не используете
конкретный класс col- *
в вашей разметке HTML.Используйте специальный цвет - *
, чтобы предотвратить вертикальное штабелирование.
Меньшие классы сетки также применяются к экранам большего размера, если они не переопределены специально для большей ширины экрана.
Итак,
фактически то же самое, что
.
Следовательно, вам нужно использовать класс только для наименьшей ширины, которую вы хотите поддерживать.
Строки display: flex
, поэтому столбцы в одной строке имеют одинаковую высоту.Используйте автоматические поля или элементы выравнивания Flexbox и
justify-content для горизонтального или вертикального выравнивания (по центру, по низу, по правому краю и т. д.).
Макет
и сетка | Компоненты
Используйте мощную сетку flexbox для мобильных устройств (через компоненты
,
,
и
) для создавать макеты всех форм и размеров благодаря системе из двенадцати столбцов, пяти адаптивным уровням по умолчанию, переменным и миксинам CSS Sass, а также десяткам предопределенных классов.
BootstrapVue предоставляет несколько удобных функциональных компонентов , адаптированных для макета, которые могут упростить разметку сложной страницы по сравнению с традиционной разметкой Bootstrap v4. Не стесняйтесь переключаться между традиционной разметкой Bootstrap v4 (например,
s и классы) и удобными компонентами функциональной компоновки BootstrapVue. Как это работает
Система сеток Bootstrap использует ряд контейнеров, строк и столбцов для компоновки и выравнивания содержимого.Он построен с использованием flexbox и полностью адаптивен. Ниже приведен пример и подробное рассмотрение того, как объединяется сетка.
1 из 3
2 из 3
3 из 3
В приведенном выше примере создаются три столбца одинаковой ширины на малых, средних, больших и очень больших устройствах с использованием предопределенных классов сетки Bootstrap v4. Эти столбцы центрируются на странице с родительским .контейнер
.
Вот как это работает:
- Контейнеры предоставляют средства для центрирования и горизонтального размещения содержимого вашего сайта. Используйте
для ширины адаптивного пикселя или
для ширины : 100%
для всех размеров области просмотра и устройства. - Строки — это обертки для столбцов. Каждый столбец имеет горизонтальный отступ
(называемый желобом) для управления пространством между ними.Затем этому отступу
противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левому краю. - В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
- Благодаря flexbox, столбцы сетки без установленной ширины автоматически будут иметь одинаковую ширину. Например, четыре экземпляра
каждый автоматически будут иметь ширину 25% для небольших точек останова. - Column prop
cols
указывает количество столбцов, которое вы хотели бы использовать из возможных 12 в строке независимо от точки останова (начиная с точки останова xs
). Итак, если вам нужны три столбца одинаковой ширины в любой точке останова, вы можете использовать
. - Свойства столбцов
sm
, md
, lg
, xl
указывают количество столбцов, которые вы хотите использовать из возможных 12 в строке, в различных точках останова.Итак, если вам нужны три столбца одинаковой ширины в точке останова sm
, вы можете использовать
. специальное значение auto
может использоваться, чтобы занять оставшееся доступное пространство столбца в строке. - Ширина столбца
задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента. - Столбцы имеют горизонтальное заполнение
для создания промежутков между отдельными столбцами, однако вы можете удалить поле
из
и заполнение
из
, установив значение no -gutters
prop на
. - Чтобы сетка реагировала, существует пять точек останова сетки, по одной для каждой ответной точки останова: все точки останова (очень маленькие), маленькие, средние, большие и очень большие.
- Точки останова сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной точке останова и ко всем тем, что выше нее (например,
применяется к малым, средним, большим и очень большие устройства, но не первая точка останова xs
). - Вы можете использовать предопределенные классы сетки или примеси Sass для более семантической разметки.
Помните об ограничениях и ошибках flexbox, таких как невозможность использовать некоторые элементы HTML в качестве гибких контейнеров.
Контейнеры
Контейнеры (
) являются самым основным элементом макета в Bootstrap. Выберите из адаптивного контейнера фиксированной ширины (что означает, что его максимальная ширина
изменяется в каждой точке останова) по умолчанию, или гибкую ширину (то есть все время шириной 100%), установив свойство ‘Fluid’, или адаптивные контейнеры, контейнер работает до определенной точки останова (требуется Bootstrap CSS v4.4+
).
Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.
Ширина точки останова по умолчанию может быть настроена с помощью переменных SCSS Bootstrap V4.x. Дополнительные сведения см. На справочной странице по тематике, а также в таблице в разделе «Параметры сетки» ниже.
Контейнер по умолчанию
По умолчанию
является адаптивным контейнером фиксированной ширины, что означает, что его максимальная ширина
изменяется в каждой точке останова ширины окна просмотра.
Контейнер ширины жидкости
Использование опоры fluid
на
отрендерит контейнер, ширина которого всегда составляет 100%, независимо от точки останова области просмотра.
<жидкость в контейнере>
Установка для свойства fluid
значения true (или пустой строки) эквивалентна классу Bootstrap .container-fluid
.
Контейнеры с реагирующей жидкостью
Требуется Bootstrap v4.4+ CSS
Адаптивные контейнеры появились впервые в Bootstrap v4.4. Они позволяют указать контейнер шириной 100% (текучий) до тех пор, пока не будет достигнута определенная точка останова, в которой применяется max-width
. Например, установка prop fluid
на 'md'
отрендерит контейнер со 100% шириной для начала до тех пор, пока не будет достигнута точка излома 'md'
, после чего он станет стандартным не текучим контейнером.
100% ширины до небольшой точки останова
100% ширины до средней точки останова
100% ширины до большой точки останова
100% ширины до очень большой точки останова
Установка для свойства fluid prop имени точки останова переводится в класс Bootstrap .контейнер- {точка останова}
.
Значения ширины контейнера по умолчанию см. В таблице раздела «Параметры сетки» ниже.
Строки
и
Строки являются оболочками для столбцов. Каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между ними. Затем этому заполнению противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левому краю.
Вы можете удалить поля из
и отступы из
, установив опору без желобов
на
.
Или, для компактных полей (меньшие промежутки между столбцами), используйте компонент
, который обычно используется при компоновке форм.
Столбцы
Должны быть размещены внутри компонента
или элемента (например,
), имеющего класс строка
, применяемая к нему, или — в случае форм — внутри компонента
(для получения столбцов с более компактными полями). Параметры сетки
В то время как Bootstrap использует em
или rem
единиц для определения большинства размеров, пикселей
s используются для точек останова сетки и ширины контейнера. Это связано с тем, что ширина области просмотра указана в пикселях и не меняется с размером шрифта.
Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах с помощью удобной таблицы.
Очень маленький (xs)
<576px
Маленький (см)
≥576px
Средний (md)
(md)
≥76816px5
Большой lg)
≥992px
Очень большой (xl)
≥1200px
Макс.ширина контейнера Нет (авто) 540px 720px 960px Prop cols = "*"
sm = "*"
md = "*"
lg = "*"
xl = "*"
Кол-во столбцов 12 Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца) Nestable Да Offs et offset = "*"
offset-sm = "*"
offset-md = "*"
offset-lg = "*"
offset-xl = "*"
Order order = "*"
order-sm = "*"
order-md = "*"
order-lg = "*"
order-xl = "*"
Примечания:
-
xs
prop.Свойство cols
указывает на точку останова xs
(наименьшую). - Приведенные выше значения и имена точек останова являются значениями по умолчанию для начальной загрузки. Их можно настроить с помощью переменных SCSS и (если также используются пользовательские имена точек останова) с помощью глобальной конфигурации BootstrapVue.
Размеры контейнера
В следующей таблице приведены максимальные значения ширины контейнера по умолчанию для различных точек останова. Они могут отличаться, если вы используете настраиваемый тематический Bootstrap v4 SCSS / CSS.
Тип контейнера Очень маленький <576px
Маленький ≥576px
Средний ≥768px
Большой ≥992px
00
Очень большой
0
00 по умолчанию
100%
540px
720px
960px
1140px
жидкость
100%
100%
100%
100%
100%
100%
жидкость = «sm»
100%
540px
720px
960px
1140px
жидкость = "md"
100%
100%
720px
960px
1140px
жидкость = «lg»
100%
100%
100%
960px
1140px
жидкость = "xl"
100%
100%
100%
100%
1140px
Дополнительную информацию см. В разделе «Контейнеры
» выше
Столбцы с автоматической компоновкой
Используйте классы столбцов, зависящие от точки останова, для удобного определения размера столбца без явного пронумерованного свойства например
.
Столбцы одинаковой ширины
Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs
до xl
. Добавьте любое количество классов без единиц для каждой нужной точки останова, и каждый столбец будет одинаковой ширины.
1 из 2
2 из 2
1 из 3
2 из 3
3 из 3
Многострочный столбец одинаковой ширины
Создайте столбцы одинаковой ширины, охватывающие несколько строк, вставив .w-100
, где вы хотите, чтобы столбцы разбивались на новую строку. Сделайте паузы адаптивными, смешав .w-100
с некоторыми утилитами для адаптивного отображения.
Была ошибка Safari flexbox, которая не позволяла этому работать без явного flex-base
или границы
. Существуют обходные пути для более старых версий браузеров, но в них нет необходимости, если ваши целевые браузеры не попадают в версии с ошибками.
Столбец
Столбец
Столбец
Столбец
Установка ширины одного столбца
Автоматическая компоновка столбцов сетки flexbox также означает, что вы можете установить ширину одного столбца и автоматически изменять размер столбцов-братьев вокруг него.Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину. Обратите внимание, что размер других столбцов изменится независимо от ширины центрального столбца.
1 из 3
2 из 3 (шире)
3 из 3
1 из 3
2 из 3 (шире)
3 из 3
Содержимое переменной ширины
Используйте свойства {breakpoint} = "auto"
для изменения размера столбцов на основе естественной ширины их содержимого.
1 из 3
Содержимое переменной ширины
3 из 3
1 из 3
Содержимое переменной ширины
3 из 3
Адаптивные классы
Сетка Bootstrap включает пять уровней предопределенных классов для создания сложных адаптивных макетов.Настройте размер столбцов на очень маленьких, маленьких, средних, больших или очень больших устройствах по своему усмотрению.
Все точки останова
Для сеток, одинаковых от самых маленьких до самых больших, используйте свойства col
и cols = "*"
. Укажите число столбцов
, если вам нужен столбец определенного размера; в противном случае не стесняйтесь придерживаться col
(который применяется автоматически, если не указаны cols
).
col
col
col
col
col-8
col-4
Сложено по горизонтали
Используя один набор из sm = "*"
или sm
(логическое значение для равной ширины @sm), вы можете создать базовую сетку, которая начинается с укладки на сверхмалых устройствах, прежде чем стать горизонтально на настольных (средних) устройствах.
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Смешайте и сопоставьте
Не хотите, чтобы ваши столбцы просто складывались в несколько ярусов сетки? При необходимости используйте комбинацию различных опор для каждого уровня.См. Пример ниже, чтобы лучше понять, как все это работает.
cols = "12" md = "8"
cols = "6" md = "4"
cols = "6" md = "4"
cols = "6" md = "4"
cols = "6" md = "4"
cols = "6"
cols = "6"
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.
Примечание. Internet Explorer 11 не поддерживает вертикальное выравнивание гибких элементов, если гибкий контейнер имеет минимальную высоту
, как показано ниже. См. Flexbugs # 3 для более подробной информации.
Вертикальное выравнивание
Для вертикального выравнивания всех ячеек сетки в строке используйте опору align-v
на
. Возможные значения: 'start'
, 'center'
, 'end'
, 'baseline'
и 'stretch'
:
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Для вертикального выравнивания отдельных ячеек сетки используйте опору align-self
на
.Возможные значения: 'start'
, 'center'
, 'end'
, 'baseline'
и 'stretch'
:
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
Один из двух столбцов
Один из двух столбцов
Выравнивание по горизонтали
Для горизонтального выравнивания ячеек сетки в строке используйте опору align-h
на
.Возможные значения: 'начало'
, 'центр'
, 'конец'
, 'вокруг'
и 'между'
:
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Один из двух столбцов
Изменение порядка
Столбцы упорядочивания
Используйте свойства order- *
для управления визуальным порядком вашего контента.Эти свойства являются адаптивными, поэтому вы можете установить порядок по точке останова (например, order = "1" order-md = "2"
). Включает поддержку от 1 до 12 на всех пяти уровнях сетки.
по умолчанию имеет значение заказа 0
.
<жидкость в контейнере>
Сначала в DOM, порядок не применяется
Второй в DOM, с большим порядком
Третий в DOM, с порядком 1
Сначала в DOM, порядка 6
Второй в DOM с порядком 1
Третий в DOM, порядок не применяется
Заказ контролируется стилем CSS flexbox order
.
Смещение столбцов
Столбцы сетки можно смещать двумя способами: наши отзывчивые свойства offset- *
или классы полезности маржи. Сетка смещение - *
реквизиты имеют размер, соответствующий столбцам, в то время как служебные классы полей более полезны для быстрых макетов, где ширина смещения является переменной.
<жидкость в контейнере>
md = "4"
md = "4" offset-md = "4"
md = "3" offset-md = "3"
md = "3" offset-md = "3"
md = "6" offset-md = "3"
В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения, установив смещение на 0
в более крупной точке останова:
sm = "5" md = "6"
sm = "5" смещение-sm = "2" md = "6" смещение-md = «0»
sm = "6" md = "5" lg = "6"
sm = "6" md = "5" смещение-md = "2 "col-lg =" 6 "смещение-lg =" 0 "
Утилиты полей для столбцов
С переходом на flexbox в Bootstrap v4 вы можете использовать служебные классы полей и интервалов, такие как .mr-auto
, чтобы отодвинуть соседние столбцы друг от друга.
<жидкость в контейнере>
md = "4"
md = "4" .ml-auto
md = "3" .ml-md-auto
md = "3" .ml-md-auto
cols = "auto" .mr-auto
cols = "auto"
Вложенные сетки
Чтобы вложить контент в сетку по умолчанию, добавьте новый
и набор компонентов
в существующий компонент
.Вложенные строки должны включать набор столбцов, которые в сумме составляют до 12 или меньше (необязательно, чтобы вы использовали все 12 доступных столбцов).
<жидкость в контейнере>
Уровень 1: sm = "9"
Уровень 2: cols = "8" sm = "6"
Уровень 2: cols = "4" sm = "6"
Столбцы строк
Требуется Bootstrap v4.4+ CSS
Используйте отзывчивые реквизиты cols- *
в
, чтобы быстро установить количество столбцов, которые лучше всего отображают ваш контент и макет. В то время как обычная ширина столбцов применяется к отдельным столбцам
(например,
), свойства столбцов строки col- *
устанавливаются на родительский < b-row>
в качестве ярлыка.
Используйте эти столбцы строк для быстрого создания базовых макетов сетки или для управления макетами карточек.Максимальное количество столбцов строки по умолчанию в Bootstrap v4.4 составляет 6
(в отличие от обычных столбцов, которые имеют максимальное значение по умолчанию 12
столбцов)
Значение, указанное в
prop (s) - это количество столбцов, которые нужно создать для каждой строки (тогда как реквизиты на
относятся к количеству занимаемых столбцов).
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Вы можете контролировать количество столбцов на каждом уровне точки останова с помощью следующих свойств
:
-
cols
для экранов xs
и выше -
cols-sm
для sm
и экранов вверх -
cols-md
для экранов md
и выше -
cols-lg
для экранов lg
и выше -
cols-xl
для экранов xl
и выше
Столбец
Столбец
Столбец
Столбец
Столбец
Столбец
Утилиты для разметки
Для более быстрой и гибкой разработки, удобной для мобильных устройств, Bootstrap включает в себя десятки служебных классов для отображения, скрытия, выравнивания и размещения содержимого.
Изменение отображения
Используйте утилиты отображения Bootstrap для быстрого переключения общих значений свойства display
. Смешайте его с сеткой, контентом или компонентами, чтобы показать или скрыть их в определенных окнах просмотра.
Параметры Flexbox
Bootstrap 4 построен с использованием flexbox, но не каждый элемент display
был изменен на display: flex
, так как это добавило бы много ненужных переопределений и неожиданно изменило бы поведение основных браузеров.Большинство компонентов построено с включенным flexbox.
Если вам нужно добавить display: flex
к элементу, сделайте это с помощью .d-flex
или одного из адаптивных вариантов (например, .d-sm-flex
). Вам понадобится этот класс или , отображающее значение
, чтобы можно было использовать дополнительные утилиты Flexbox для изменения размера, выравнивания, интервала и т. Д.
Margin and padding
Используйте утилиты margin
и padding
, чтобы контролировать расположение и размер элементов и компонентов.Bootstrap 4 включает пятиуровневую шкалу для интервалов между утилитами, основанную на переменной SASS $ spacer
по умолчанию со значением 1rem
. Выберите значения для всех окон просмотра (например, .mr-3
для margin-right: 1rem
) или выберите адаптивные варианты для целевых конкретных окон просмотра (например, .mr-md-3
для margin-right: 1rem
, начиная с точки останова md
).
Переключить видимость
Когда переключение отображения
не требуется, вы можете переключить видимость
элемента с помощью служебных классов видимости.Невидимые элементы по-прежнему будут влиять на макет страницы, но визуально скрыты от посетителей.
Как центрировать столбец в Bootstrap
Тема: Bootstrap / SassPrev | След.
Ответ: Используйте
mx-auto
Class
Если вы используете версию Bootstrap 4 , вы можете центрировать столбец сетки по горизонтали, применив к нему класс .mx-auto
.Давайте попробуем следующий пример, чтобы увидеть, как это работает:
В качестве альтернативы вы также можете применить класс .justify-content-center
к элементу .row
, чтобы центрировать столбец по горизонтали. Давайте посмотрим на следующий пример:
Но в Bootstrap 3 все немного иначе.Если номер столбца сетки четный (например, 2, 4, 6, 8, 10, 12), вы можете использовать класс .col- {xs | sm | md | lg} -offset- *
для выравнивания столбца в центр, вот так:
Однако, если номер столбца сетки нечетный (например, 1, 3, 5, 7, 9, 11), вы должны использовать некоторый собственный CSS.Давайте посмотрим на следующий пример, чтобы понять, как это в основном работает:
/ * код CSS * /
.col-centered {
float: нет;
маржа: 0 авто;
}
Связанные часто задаваемые вопросы
Вот еще несколько часто задаваемых вопросов по этой теме:
.