Хаки и Скрипты 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йту: 3319 дней
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [7]
  • Поисковики: [2] Яндекс, Яндекс
  • Были сегодня : [4] Яндекс, Google, irbees2008, Яндекс
  • SQL запросов: 27
  • Генерация страницы: 0.107сек
  • Потребление памяти: 4.935 Mb 
  •   яндекс.ћетрика