Хаки и Скрипты Next Generation CMS : Bootstrap 4 : Отступаем.......Bootstrap 4

irbees2008 Опубликовано - 3 - мая Bootstrap 4

Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

Именуются эти классы следующим образом:
{property}{sides}-{size} для xs;
{property}{sides}-{breakpoint}-{size} для sm, md, lg, и xl.
Вместо {property} необходимо указать первую букву названия отступа, т.е. m или p (m – для margin, p – для padding).

Вместо {sides} необходимо указать сторону (t - для задания отступа только сверху, b – снизу, l – слева, r – справа) или несколько сторон (x – слева и справа, y – сверху и снизу). Если {sides} не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо {breakpoint} нужно указать контрольную точку (sm, md, lg, или xl). Другими словами, определить минимальную ширину viewport, начиная с которой, отступы, задаваемые этим классом, будут действовать.

При этом необходимо помнить, что контрольные точки задают именно минимальную ширину viewport. Это означает, что, например, класс с sm будет действовать не только на sm, но и на всех следующих контрольных точках (sm->md->lg->xl). Т.е. до тех пор, пока его действие будет не переопределено с помощью другого класса (например, с помощью lg).

Вместо {size} необходимо задать величину отступа (посредством одного из следующих значений):

0 (равно 0);
1 (равно $spacer * .25);
2 (равно $spacer * .5);
3 (равно $spacer);
4 (равно $spacer * 1.5);
5 (равно $spacer * 3);
auto (равно auto) - можно использовать только для margin.

$spacer - это SCSS переменная Bootstrap 4, значение которой, по умолчанию, равно 1rem. А 1rem в большинстве браузеров равен 16px. В итоге, например, размер 4 будет равен 24px (16px * 1.5).

1. Установим HTML-элементу padding отступ сверху, равный 3:

Код:

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

2. Расположим 2 блока по центру. Для этого первому блоку установим в качестве свойства 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" style="height: 200px;"></div>
        <!-- Второй блок -->
        <div class="col-4 mr-auto ml-3 bg-danger" style="height: 200px;"></div>
    </div>
</div>

3. Установим блоку:
margin отступы слева и справа, равные auto (mx-auto);
на xs margin отступы сверху и снизу, равные 2 (my-2);
на sm и md (т.е. >sm) margin отступы сверху и снизу, равные 3 (my-sm-3);
на lg и xl (т.е. >lg) margin отступы сверху и снизу, равные 4 (my-lg-4);
на всех контрольных точках padding отступы для 4 сторон, равные 3 (p-3).

Код:

<div class="mx-auto my-2 my-sm-3 my-lg-4 p-3">
    ...
</div>

4. Установим элементу на xs margin отступ снизу, равный 4. На остальных контрольных точках этот отступ уберём, т.е. установим его, равным 0.

Код:

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

5. Установим HTML-элементу:
по умолчанию (min-width >= 0 или xs) padding отступы, равные 0 (p-0);
на sm и следующих контрольных точках padding отступ слева, равный 3(pl-sm-3);
на md и следующих контрольных точках (т.е. >md) margin уберём отступ слева (установим его равным 0, т.е. pl-md-0) и добавим отступ справа, равный 4 (pr-sm-4).

Код:

<div class="p-0 pl-sm-3 pl-md-0 pr-sm-4">
    ...
</div>

Можешь почитать и вот эту статейку "Меню с векторными иконками"

Это тоже интересно

11.06.18Bootstrap 4 - Таймлайн
17.06.18Заголовок или логотип?

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