Bootstrap lg xs sm md: Grid system · Bootstrap

Web-разработка • HTML и CSS

Изменение порядка следования

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде. Изменить визуальный порядок следования адаптивного блока выполняется посредством класса order-{1…12}. Этот класс предназначен xs устройств. Для изменения порядка для sm, md, lg или xl используется класс order-{sm…xl}-{1…12}.

Число от 1 до 12 определяет то, как элементы будут визуально следовать на странице. А именно — все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс order, то по умолчанию он имеет значение 0.

<div>
    <div>
        <div>
            <strong>Первый</strong>, нулевой порядок, будет первым.
        </div>
        <div>
            <strong>Второй</strong>, но будет отображаться последним.
</div> <div> <strong>Третий</strong>, но будет отображаться вторым. </div> </div> </div>

Ещё один пример — с использованием адаптивных классов order. На устройствах xs и sm визуальный порядок порядок следования будет таким же, как в HTML коде. А на устройствах md и выше — первым будет Sidebar left, вторым — Page contrnt, а третьим — Sidebar right.

<div>
    <div>
        <div>
            Page content
        </div>
        <div>
            Sidebar left
        </div>
        <div>
            Sidebar right
        </div>
    </div>
</div>

Классы order-first и order-{sm…xl}-first оказывают своё действие посредством установки элементу CSS свойства

order в значение -1. А классы order-last и order-{sm…xl}-last — в значение 13. Поэтому предыдущий пример можно сделать проще:

<div>
    <div>
        <div>
            Page content
        </div>
        <div>
            Sidebar left
        </div>
        <div>
            Sidebar right
        </div>
    </div>
</div>

Смещение адаптивных блоков

Смещение с использованием классов offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок. Данные классы имеют следующий синтаксис — offset-{1…12} или offset-{sm…xl}-{1…12}.

<div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
    <div>
        <div>1</div>
    </div>
</div>

Смещение с использованием классов margin

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left:auto или margin-right:auto). Данный вариант смещения используют, когда блоки необходимо сместить относительно друг от друга на которую переменную величину. Классы margin отступов имеют вид ml-auto, mr-auto, ml-{sm…xl}-auto и mr-{sm…xl}-auto.

<div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</div>

Классы для margin и padding

Bootstrap 4 включает в себя набор классов, с помощью которых можно легко добавлять к HTML элементам необходимые margin и padding отступы. Имена этих классов имеют вид:

  • {property}{sides}-{size} для xs устройств
  • {property}{sides}-{sm…xl}-{size} для sm и выше

Вместо {property} необходимо указать первую букву названия отступа, m – для margin, p – для padding.

Вместо {sides} необходимо указать сторону:

  • t – для задания отступа сверху (top)
  • b
    – для задания отступа снизу (bottom)
  • l – для задания отступа слева (left)
  • r – для задания отступа справа (right)
  • x – для задания отступа слева и справа
  • y – для задания отступа сверху и снизу

Если {sides} не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо {size} необходимо задать величину отступа – 0, 1, 2, 3, 4, 5 или auto (только для margin). Значение 1 означает 0.25rem, значение 20.5rem, значение 31rem, значение 41. 5rem, значение 5

3rem.

Примеры использования

Установим HTML-элементу padding-top, равный 1rem:

<div>
    ..........
</div>

Расположим два блока по центру. Для этого первому блоку установим margin-left:auto с помощью класса ml-auto, а второму – margin-right:auto с помощью класса mr-auto. Кроме этого, дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3.

<div>
    <div>
        <div>
            Первый блок
        </div>
        <div>
            Второй блок
        </div>
    </div>
</div>

Установим элементу на xs устройствах margin-bottom, равный 1.5rem. Для всех остальных устройств этот margin уберём.

<div>
    .
......... </div>

Классы для плавающих блоков

<div>
    <div>
        <button>Кнопка, float:left</button>
        <button>Кнопка, float:right</button>
    </div>
</div>

Классы для свойства display

Для установки свойства display используются классы

  • d-{value} для xs устройств
  • d-{sm…xl}-{value} для sm и выше

Вместо {value} необходимо указать значение none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

Размер экрана CSS-класс
Скрывать всегда .d-none
Скрывать только на
xs
. d-none .d-sm-block
Скрывать только на sm .d-sm-none .d-md-block
Скрывать только на md .d-md-none .d-lg-block
Скрывать только на lg .d-lg-none .d-xl-block
Скрывать только на xl .d-xl-none
Показывать всегда .d-block
Показывать только на xs .d-block .d-sm-none
Показывать только на sm .d-none .d-sm-block .d-md-none
Показывать только на md
.d-none .d-md-block .d-lg-none
Показывать только на lg . d-none .d-lg-block .d-xl-none
Показывать только на xl .d-none .d-xl-block

Классы для свойства overflow

<div>.....</div>
<div>.....</div>

Классы изображений

/* responsive images */
.img-fluid {
    max-width: 100%;
    height: auto;
}
/* image thumbnails */
.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк • Шаблон сайта

React-Bootstrap · Документация React-Bootstrap

Сеточная система Bootstrap использует ряд контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен на flexbox и полностью адаптивен. Ниже приведен пример и подробный обзор того, как сетка собирается вместе.

Вы новичок или не знакомы с flexbox? Прочтите это руководство CSS Tricks по флексбоксу, чтобы узнать об основах, терминологии, рекомендациях и фрагментах кода.

Контейнер#

Контейнеры предоставляют средства центрирования и горизонтального размещения содержимого вашего сайта. Используйте

Контейнер для адаптивной ширины в пикселях.

1 из 1

<Контейнер> <Строка> 1 из 1

Fluid Container #

1 <Контейнерная жидкость /> для ширины: 100% для всех размеров окна просмотра и устройства.

1 из 1

<Контейнерная жидкость> <Строка> 1 из 1

жидкость проп. Установка его в точку останова ( sm, md, lg, xl, xxl ) установит контейнер

в качестве жидкости до указанной точки останова.

1 из 1

<Контейнер жидкости="md"> <Строка> 1 из 1

Автомакет columns#

Если ширина столбцов не указана, компонент Col будет отображать столбцы одинаковой ширины

1 из 2

2 из 2

1 из 3

2 из 3

3 из 3

<Контейнер> <Строка> 1 из 2 2 из 2 <Строка> 1 из 3 2 из 3 3 из 3

Установка ширины одного столбца#

Авто-макет для столбцов сетки flexbox также означает, что вы можете установить ширину одного столбца и автоматически изменить размер родственных столбцов вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже), примеси сетки или встроенную ширину. Обратите внимание, что размер других столбцов будет изменяться независимо от ширины центрального столбца.

1 из 3

2 из 3 (более широкий)

3 из 3

1 из 3

2 из 3 (более широкий)

3 из 3

<Контейнер> <Строка> 1 из 3 2 из 3 (шире) 3 из 3 <Строка> 1 из 3 2 из 3 (шире) 3 из 3

Содержимое переменной ширины#

Установите значение столбца (для любого размера точки останова) равным "auto" для изменения размера столбцов на основе естественной ширины их содержимого.

1 из 3

Содержимое переменной ширины

3 из 3

1 из 3

Содержимое переменной ширины

3 из 3

<Контейнер> 1 из 3 Контент переменной ширины 3 из 3 <Строка> 1 из 3 Контент переменной ширины 3 из 3

Отзывчивые сетки#

9001 ширина столбцов2 9001 для 6 размеров контрольных точек (xs, sm, md, lg, xl и xxl). Для каждой точки останова вы можете указать количество столбцов для охвата или установить значение для автоматической ширины макета.

см=8

см=4

см=истина

sm=true

sm=true

<Контейнер> <Строка> sm=8 sm=4 <Строка> sm=true sm=true sm=true

Вы также можете смешивать и сопоставлять точки останова для создания различных сеток в зависимости от размера экрана.

xs=12 md=8

xs=6 md=4

xs=6 md=4

xs=6 md=4

xs=6 md=4

xs=6

xs=900

<Контейнер> {/* Объедините столбцы на мобильных устройствах, сделав один столбец полной ширины, а другой половинной ширины */} <Строка> хс=12 мд=8 хз=6 мд=4 {/* Ширина столбцов начинается с 50 % на мобильных устройствах и увеличивается до 33,3 % на компьютерах */} <Строка> хз=6 мд=4 хз=6 мд=4 хз=6 мд=4 {/* Ширина столбцов всегда составляет 50 % на мобильных устройствах и компьютерах */} <Строка> <столбец xs={6}>xs=6 <столбец xs={6}>xs=6

Реквизит точки останова Col также имеет более сложную форму реквизита object : {span: number, order: number, offset: number} для указания смещений и упорядочивания эффектов.

Вы можете использовать свойство order для управления визуальным порядком вашего контента.

Первый, но неупорядоченный

Второй, но последний

Третий, но второй

<Контейнер> <Строка> Сначала, но не по порядку Второй, но последний Третий, но второй

Свойство order также поддерживает first ( order: -1 ) и последние (порядок : $columns+1 ).

Первый, но последний

Второй, но неупорядоченный

Третий, но первый

<Контейнер> <Строка> Первый, но последний Второй, но неупорядоченный Третий, но первый

Для смещения столбцов сетки можно установить смещение значение или для более общего макета используйте утилиты класса поля.

md=4

md={{диапазон: 4, смещение: 4}}

md={{диапазон: 3, смещение: 3}}

md={{диапазон: 3, смещение: 3}}

md={{ span: 6, offset: 3 }}

<Контейнер> <Строка> md=4 {`md={{ span: 4, offset: 4 }}`} <Строка> {`md={{ span: 3, offset: 3 }}`} {`md={{ span: 3, offset: 3 }}`} <Строка> {`md={{ span: 6, offset: 3 }}`}

Настройка ширины столбцов в строке #

Строка позволяет указать ширину столбцов для 5 размеров контрольных точек (xs, sm, md, lg, xl и xxl). Для каждой точки останова вы можете указать количество столбцов, которые будут располагаться рядом друг с другом. Вы также можете указать auto , чтобы задать естественную ширину столбцов.

1 из 2

2 из 2

1 из 3

2 из 3

3 из 3

1 из 3

2 из 3

3 из 3 9003

<Контейнер> <Строка xs={2} md={4} lg={6}> 1 из 2 2 из 2 <Строка xs={1} md={2}> 1 из 3 2 из 3 3 из 3 <Строка xs="авто"> 1 из 3 2 из 3 3 из 3

Обратите внимание, что ширина столбца Row переопределит ширину столбца Col , установленную на нижних контрольных точках, при просмотре на больших экранах. Размер будет заменен размером на средних и больших экранах.

1 из 3

2 из 3

3 из 3

<Контейнер> <Строка md={4}> 1 из 3 2 из 3 3 из 3

API#

Container#

просмотреть исходный файл import Container из 'react-bootstrap/Container import for Контейнерный компонент
Наименование Тип Default Description
as

elementType

You can use a custom element for this component

fluid

true | "см" | "МД" | "лг" | "XL" | "xxl"

false

Разрешить контейнеру заполнить все доступное горизонтальное пространство.

bsPrefix

строка

'контейнер'

Изменение имени базового класса компонента CSS и префикса имен классов модификаторов. Это аварийный люк для работы с сильно настроенным загрузочным css.

Row#

просмотреть исходный файл import Row из 'react-bootstrap/Row' Скопировать код импорта для компонента Row
Имя Тип По умолчанию Описание
AS

ElementType

1111111111111111111111111111111111111111111111111111.

LG

номер | 'авто' | { столбцы: номер | 'auto' }

Количество столбцов, которые будут располагаться рядом друг с другом на больших устройствах (≥992 пикселей). Используйте авто , чтобы придать столбцам их естественную ширину.

мкр

номер | 'авто' | { столбцы: номер | 'auto' }

Количество столбцов, которые будут располагаться рядом друг с другом на средних устройствах (≥768 пикселей). Используйте auto , чтобы задать естественную ширину столбцов.

см

номер | 'авто' | { столбцы: номер | 'auto' }

Количество столбцов, которые будут располагаться рядом друг с другом на небольших устройствах (≥576 пикселей). Используйте auto , чтобы задать естественную ширину столбцов.

xl

номер | 'авто' | { столбцы: номер | 'auto' }

Количество столбцов, которые будут располагаться рядом друг с другом на очень больших устройствах (≥1200 пикселей). Используйте auto , чтобы задать естественную ширину столбцов.

xs

номер | 'авто' | { столбцы: номер | 'auto' }

Количество столбцов, которые будут располагаться рядом друг с другом на очень маленьких устройствах (<576 пикселей). Используйте auto , чтобы задать естественную ширину столбцов.

xxl

номер | 'авто' | { столбцы: номер | 'auto' }

Количество столбцов, которые будут располагаться рядом друг с другом на очень больших устройствах (≥1400 пикселей). Используйте auto , чтобы задать естественную ширину столбцов.

bsPrefix

string

'row'

Изменение имени базового класса CSS базового компонента и префикса имен классов модификаторов. Это аварийный люк для работы с сильно настроенным загрузочным css.

Col#

view source file import Col from 'react-bootstrap/Col' Copy import code for the Col component
Name Type Default Description
as

elementType

Для этого компонента можно использовать пользовательский тип элемента.

lg

логический | "авто" | номер | {диапазон: логическое значение | "авто" | номер, смещение: номер, порядок: "первый" | "последний" | number }

Количество столбцов для охвата на больших устройствах (≥992 пикселей)

md

логический | "авто" | номер | {диапазон: логическое значение | "авто" | номер, смещение: номер, порядок: "первый" | "последний" | number }

Количество столбцов, которые нужно охватить на устройствах среднего размера (≥768 пикселей)

sm

логический | "авто" | номер | {диапазон: логическое значение | "авто" | номер, смещение: номер, порядок: "первый" | "последний" | number }

Количество столбцов для охвата на небольших устройствах (≥576 пикселей)

xl

boolean | "авто" | номер | {диапазон: логическое значение | "авто" | номер, смещение: номер, порядок: "первый" | "последний" | number }

Количество столбцов, которые нужно охватить на очень больших устройствах (≥1200 пикселей)

xs

логический | "авто" | номер | {диапазон: логическое значение | "авто" | номер, смещение: номер, порядок: "первый" | "последний" | number }

Количество столбцов для охвата на очень маленьких устройствах (<576 пикселей)

xxl

логический | "авто" | номер | {диапазон: логическое значение | "авто" | номер, смещение: номер, порядок: "первый" | "последний" | number }

Количество столбцов для охвата на очень больших устройствах (≥1400 пикселей)

bsPrefix

string

'col'

Изменение префикса имени базового класса компонента CSS и префикса имен классов модификаторов. Это аварийный люк для работы с сильно настроенным загрузочным css.

Шаблон сетки для Bootstrap

Основные макеты сетки, чтобы вы могли ознакомиться с созданием в системе сетки Bootstrap.

Пять ярусов сетки

Система сетки Bootstrap состоит из пяти уровней, по одному для каждого диапазона поддерживаемых нами устройств. Каждый уровень начинается с минимального размера окна просмотра и автоматически применяется к более крупным устройствам, если это не переопределено.

.col-xs-4

.col-xs-4

.col-xs-4

.col-sm-4

.col-sm-4

.col-sm-4

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

Два столбца

Получите два столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов .

.col-md-8

.col-md-4

Полная ширина, один столбец

Для элементов полной ширины классы сетки не требуются.


Два столбца с двумя вложенными столбцами

Согласно документации, вложение выполняется просто — просто поместите ряд столбцов в существующий столбец. Это дает вам два столбца , начиная с рабочих столов и масштабируясь до больших рабочих столов , с еще двумя (равной ширины) в большом столбце.

При размерах мобильных устройств, планшетов и меньше, эти столбцы и их вложенные столбцы будут складываться.

.col-MD-8

.col-md-6

.col-md-6

.col-md-4


Смешанный: мобильный и настольный

Система сетки 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 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *