Хаки и Скрипты Next Generation CMS

Отступаем.......Bootstrap 4

irbees2008 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>

Можешь почитать и вот эту статейку "С днем ВЕБ-ДИЗАЙНЕРА"

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

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3402 дня
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 577
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 25
  • Генерация страницы: 0.115сек
  • Потребление памяти: 4.951 Mb 
  •   яндекс.ћетрика