Bootstrap 4. Контейнер и сетка. Часть 3

19.06.2019

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

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

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

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

<div class="container">
    <div class="row">
        <div class="col">
            <strong>Первый</strong>, нулевой порядок, будет первым.
        </div>
        <div class="col order-12">
            <strong>Второй</strong>, но будет отображаться последним.
        </div>
        <div class="col order-1">
            <strong>Третий</strong>, но будет отображаться вторым.
        </div>
    </div>
</div>

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

<div class="container">
    <div class="row">
        <div class="col-md-6 order-md-2">
            Page content
        </div>
        <div class="col-md-3 order-md-1">
            Sidebar left
        </div>
        <div class="col-md-3 order-md-3">
            Sidebar right
        </div>
    </div>
</div>

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

<div class="container">
    <div class="row">
        <div class="col-md-6">
            Page content
        </div>
        <div class="col-md-3 order-md-first">
            Sidebar left
        </div>
        <div class="col-md-3">
            Sidebar right
        </div>
    </div>
</div>

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

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

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

<div class="container">
    <div class="row">
        <div class="col-4">1</div>
        <div class="col-4 offset-4">2</div>
    </div>

    <div class="row">
        <div class="col-3 offset-3">1</div>
        <div class="col-3 offset-3">2</div>
    </div>

    <div class="row">
        <div class="col-6 offset-3">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 class="container">
    <div class="row">
        <div class="col-4">1</div>
        <div class="col-4 ml-auto">2</div>
    </div>

    <div class="row">
        <div class="col-3">1</div>
        <div class="col-3 ml-auto mr-auto">2</div>
        <div class="col-3">3</div>
    </div>

    <div class="row">
        <div class="col-4 ml-auto mr-auto">1</div>
        <div class="col-4 ml-auto mr-auto">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, значение 2 – 0.5rem, значение 3 – 1rem, значение 4 – 1.5rem, значение 5 – 3rem.

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

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

<div class="pt-3">
    ..........
</div>

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

<div class="container">
    <div class="row">
        <div class="col-4 ml-auto mr-3 bg-success">
            Первый блок
        </div>
        <div class="col-4 mr-auto ml-3 bg-danger">
            Второй блок
        </div>
    </div>
</div>

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

<div class="mb-4 mb-sm-0">
    ..........
</div>

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

<div class="container">
    <div class="clearfix">
        <button class="btn btn-primary float-left">Кнопка, float:left</button>
        <button class="btn btn-primary float-right">Кнопка, 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 class="overflow-auto">.....</div>
<div class="overflow-hidden">.....</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-разработка • Верстка • Фреймворк • Шаблон сайта

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.