Bootstrap Бутстрап примеры сетки
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Дальше ❯
Ниже мы собрали несколько примеров базовых макетов сетки 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>
Две неравные колонки
.col-sm-4
.col-sm-8
В следующем примере показано, как получить два столбца разной ширины, начиная с планшетов и масштабирование для больших рабочих столов:
Пример
<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.
Пример
<div>
<div>.col-xs-9 .col-md-7</div>
<div>.col-xs-3 .col-md-5</div>
</div>
<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>
Совет: Помните, что столбцы сетки должны добавлять до двенадцати строк. Более того, столбцы будут складываться независимо от видового экрана.
Смешанный: мобильный, планшетный и Настольный
Пример
<div>
<div>.col-xs-7 .col-sm-6 .col-lg-8</div>
col-xs-5 .col-sm-6 .col-lg-4</div></div>
<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>
Смещение колонн
Переместите столбцы вправо с помощью
Пример
<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>
❮ Назад Дальше ❯
PHP\CSS\JS\HMTL Editor
Copyright 2018-2020 HTML5CSS.ru
Правила и Условия Политика конфиденциальности О нас Контакты
Классы 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-pull-{nc} |
col-lg-push-{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>Теперь изменим порядок следования адаптивных блоков.
<!-- Boostrap 3 -->
<div>
<div>
2 блок
</div>
<div>
1 блок
</div>
<div>
3 блок
</div>
</div>Рекомендации по разработке макета с помощью сетки Bootstrap
При создании макета с использованием сетки фреймворка Bootstrap 3 предпочтительнее начинать разработку с устройств, которые имеют крохотный размер экрана (смартфоны).
Почему так? Потому что изменить порядок следования адаптивных блоков для устройств с большим размером экрана намного проще, чем для устройств с крохотным экраном.
Научитесь использовать col-xs в своем коде
К этому моменту вы уже знакомы с использованием системы сеток и служебных классов. Поэтому наш следующий урок должен показаться простым: мы представим адаптивные классы, которые вы можете использовать в своих сетках.
Классы Bootstrap Col-XS применяются в случаях устройств с крошечными экранами — не более 576 пикселей в ширину. В большинстве случаев это довольно простой телефон.
Содержимое
- 1. Bootstrap Col-XS: основные советы
- 2. XS Grid
- 3. Auto Layout
- 4. Bootstrap Col-XS: сводка
Bootstrap Col-XS: основные советы
- Система сетки Bootstrap 4 предлагает набор из адаптивных классов , чтобы указать, на каких экранах работает.
- Класс Bootstrap Col-XS ( extra small ) применяет класс столбца сетки к элементу, когда экран уже, чем 576px .
- Он создается с помощью Bootstrap
col-xs-*в вашем коде.
XS Grid
Классы сверхмалых столбцов Bootstrap ( col-xs ) применяются, когда экран уже 576 пикселей.
Столбцы, подобные приведенным ниже, создаются с использованием префикса класса .
col-xs-* :
col-xs-4
col-xs-8
Теперь у нас есть пример HTML, который создает простую компоновку, которая применима к любому размеру экрана и выглядит так, как показано выше:
Пример
<дел>
<дел>
<дел>
...
Вы можете использовать все комбинации значений в сумме до 12. Вы можете использовать 12 столбцов шириной 1 каждый, или использовать 4 столбца шириной 3 каждый или любую другую комбинацию.
bootstrapcdn. com/bootstrap/3.4.0/css/bootstrap.min.css "
SSTR.SSTR.SSTR.SSTR.SSTR.SSTR. мин.js" 