Это многостраничный печатный вид этого раздела. Нажмите что бы печатать.

Вернуться к обычному просмотру страницы.

Bootstrap

Описание Bootstrap

Официальная документация Bootstrap

https://getbootstrap.com/docs/5.3/getting-started/introduction/

Шпаргалка по Bootstrap

https://bootstrap-cheatsheet.themeselection.com/

1 - Работа с цветами в Bootstrap

Описание Bootstrap

Названия цветов в HUGO

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>

<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

background

.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle
.bg-body-secondary
.bg-body-tertiary
.bg-body
.bg-black
.bg-white
.bg-transparent
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div>
<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>

Прозрачность

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>

2 - Mixins

Mixins в Bootstrap что это и как использовать

Mixins в Bootstrap: что это и как использовать

Mixins (примеси) — это функции в Sass (SCSS), которые позволяют повторно использовать куски кода в CSS. В Bootstrap они используются для генерации готовых стилей (например, сетки, кнопок, утилит) без дублирования кода.

1. Зачем нужны Mixins?

  • Уменьшают повторение кода — один миксин может генерировать множество вариантов стилей.
  • Делают код модульным — можно кастомизировать Bootstrap, не правя исходные файлы.
  • Упрощают создание адаптивных стилей — например, для сетки или отступов.

2. Примеры миксинов в Bootstrap

Bootstrap предоставляет десятки миксинов. Вот основные категории:

① Grid Mixins (Сетка)

// Пример: Создание кастомной колонки
@include make-col(6); // Колонка на 50% ширины (6/12)

② Flexbox Mixins

// Пример: Flex-контейнер с центрированием
.my-component {
  @include d-flex();
  @include justify-content(center);
}

③ Spacing Mixins (Отступы)

// Пример: Добавление margin-top
.element {
  @include margin-top(1rem);
}

④ Breakpoint Mixins (Адаптивность)

// Пример: Стили только для экранов ≥768px
@include media-breakpoint-up(md) {
  .card { width: 50%; }
}

⑤ Button Mixins (Кнопки)

// Пример: Создание кастомной кнопки
.my-btn {
  @include button-variant(
    $background: #ff5722,
    $border: #ff5722,
    $hover-background: darken(#ff5722, 10%)
  );
}

3. Как использовать миксины?

Шаг 1: Подключите Bootstrap SCSS

Убедитесь, что в вашем проекте есть исходные файлы Bootstrap (SCSS), а не только скомпилированный CSS.

Шаг 2: Создайте свой SCSS-файл

Например, custom.scss:

// Импорт Bootstrap
@import "bootstrap/scss/bootstrap";

// Ваши кастомные стили с миксинами
.my-custom-grid {
  @include make-col-ready();
  @include make-col(4); // Колонка на 33.3%
}

@include media-breakpoint-down(sm) {
  .my-custom-grid {
    @include make-col(12); // На мобильных — 100%
  }
}

Шаг 3: Скомпилируйте SCSS

Используйте Sass-компилятор (например, через npm):

sass custom.scss custom.css

4. Популярные миксины Bootstrap

Миксин Описание Пример
make-container() Создает контейнер @include make-container();
make-col() Генерирует колонку @include make-col(6);
border-radius() Скругление углов @include border-radius(0.5rem);
transition() Анимация перехода @include transition(all 0.3s);
box-shadow() Тень @include box-shadow(0 0 10px rgba(0,0,0,0.1));

5. Зачем это нужно?

  • Кастомизация Bootstrap — если вам нужно что-то уникальное, но на основе логики Bootstrap.
  • Оптимизация CSS — миксины помогают избежать дублирования кода.
  • Адаптивность — легко создавать breakpoint-зависимые стили.

6. Где найти все миксины?

Итог

Mixins в Bootstrap — это мощный инструмент для тех, кто работает с Sass. Они позволяют:
✅ Гибко настраивать компоненты.
✅ Создавать адаптивные стили.
✅ Держать код чистым и модульным.

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

// Кастомная кнопка
.my-btn {
  @include button-variant(
    $background: #17a2b8,
    $border: #17a2b8,
    $hover-background: darken(#17a2b8, 10%)
  );
  @include border-radius(2rem);
}

3 - Bootstrap Flexbox

Bootstrap 5 Flexbox Управление Полная Таблица

Bootstrap 5 Flexbox Управление: Полная Таблица

Таблица с основными классами Bootstrap 5 для работы с Flexbox:

1. Основные Flex-контейнеры

Класс Описание Пример
.d-flex Включает Flexbox <div class="d-flex">
.d-inline-flex Строчный Flex-контейнер <span class="d-inline-flex">
.d-sm-flex Адаптивный Flex (на экранах ≥576px) <div class="d-sm-flex">

2. Направление осей (Flex Direction)

Класс Описание CSS-аналог
.flex-row Горизонтальное (слева направо) flex-direction: row
.flex-row-reverse Горизонтальное (справа налево) flex-direction: row-reverse
.flex-column Вертикальное (сверху вниз) flex-direction: column
.flex-column-reverse Вертикальное (снизу вверх) flex-direction: column-reverse

Пример:

<div class="d-flex flex-row">  <!-- По умолчанию -->
  <div>1</div><div>2</div>
</div>

3. Выравнивание по главной оси (Justify Content)

Класс Описание CSS-аналог
.justify-content-start В начале оси justify-content: flex-start
.justify-content-end В конце оси justify-content: flex-end
.justify-content-center По центру justify-content: center
.justify-content-between Равные промежутки между justify-content: space-between
.justify-content-around Равные отступы вокруг justify-content: space-around
.justify-content-evenly Полное равномерное распределение justify-content: space-evenly

Пример:

<div class="d-flex justify-content-between">
  <div>Лево</div><div>Право</div>
</div>

4. Выравнивание по поперечной оси (Align Items)

Класс Описание CSS-аналог
.align-items-start В начале оси align-items: flex-start
.align-items-end В конце оси align-items: flex-end
.align-items-center По центру align-items: center
.align-items-baseline По базовой линии align-items: baseline
.align-items-stretch Растянуть (по умолчанию) align-items: stretch

Пример:

<div class="d-flex align-items-center" style="height: 100px;">
  <div>По центру высоты</div>
</div>

5. Управление отдельными элементами (Align Self)

Класс Описание CSS-аналог
.align-self-start Элемент в начале align-self: flex-start
.align-self-end Элемент в конце align-self: flex-end
.align-self-center Элемент по центру align-self: center
.align-self-stretch Растянуть элемент align-self: stretch

Пример:

<div class="d-flex">
  <div class="align-self-end">Прижат к низу</div>
</div>

6. Перенос элементов (Flex Wrap)

Класс Описание CSS-аналог
.flex-nowrap Без переноса (по умолчанию) flex-wrap: nowrap
.flex-wrap С переносом flex-wrap: wrap
.flex-wrap-reverse Перенос в обратном порядке flex-wrap: wrap-reverse

Пример:

<div class="d-flex flex-wrap">
  <div class="w-25">1</div><div class="w-25">2</div>...
</div>

7. Управление порядком (Order)

Класс Описание
.order-0 – .order-5 Приоритет от 0 (высокий) до 5 (низкий)
.order-first Первым (аналог order: -1)
.order-last Последним (аналог order: 6)

Пример:

<div class="d-flex">
  <div class="order-2">Второй</div>
  <div class="order-1">Первый</div>
</div>

8. Автоматические отступы (Flex Fill)

Класс Описание
.flex-fill Элемент растягивается, заполняя пространство
.flex-grow-1 Аналог flex-grow: 1

Пример:

<div class="d-flex">
  <div class="flex-fill">Занимает всё место</div>
</div>

9. Адаптивные классы

Все классы работают с breakpoints:

  • .flex-sm-row, .justify-content-md-center, .align-items-lg-end и т.д.

Пример:

<div class="d-flex flex-column flex-md-row">
  <!-- На мобильных — вертикально, на десктопе — горизонтально -->
</div>

Итог

Bootstrap 5 предоставляет полный контроль над Flexbox через простые классы. Для сложных макетов комбинируйте их с Grid.

Совет: Используйте .gap-* для отступов между элементами:

<div class="d-flex gap-3">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
</div>

4 - Bootstrap Отступы

Bootstrap 5 Горизонтальные и вертикальные отступы - Gutters — Полная таблица

Bootstrap 5: Горизонтальные и вертикальные отступы (Gutters) — Полная таблица

Bootstrap 5 предоставляет удобные классы для управления отступами между блоками (margin и padding).
Вот полная таблица с примерами для горизонтальных и вертикальных отступов.

1. Классы для отступов (Spacing Utilities)

Bootstrap использует систему {property}{sides}-{size}, где:

  • property:
    • m — margin (внешний отступ).
    • p — padding (внутренний отступ).
  • sides:
    • t — top (верх).
    • b — bottom (низ).
    • s — start (лево для LTR, право для RTL).
    • e — end (право для LTR, лево для RTL).
    • x — горизонтальные (левый + правый).
    • y — вертикальные (верхний + нижний).
    • (пусто) — все стороны.
  • size:
    • 0 — 0px.
    • 1 — 0.25rem (4px).
    • 2 — 0.5rem (8px).
    • 3 — 1rem (16px).
    • 4 — 1.5rem (24px).
    • 5 — 3rem (48px).
    • auto — автоматический отступ.

2. Горизонтальные отступы (между колонками и блоками)

Класс Описание Пример
.gap-1 – .gap-5 Отступ между flex-элементами (margin) <div class="d-flex gap-3">
.gx-1 – .gx-5 Горизонтальный padding (левый + правый) <div class="row gx-3">
.mx-1 – .mx-5 Горизонтальный margin (левый + правый) <div class="mx-auto">
.ms-1 – .ms-5 Отступ слева (margin-start) <div class="ms-3">
.me-1 – .me-5 Отступ справа (margin-end) <div class="me-2">
.px-1 – .px-5 Горизонтальный padding (левый + правый) <div class="px-4">

Пример:

<div class="d-flex gap-3">  <!-- Отступы между flex-элементами -->
  <div>Блок 1</div>
  <div>Блок 2</div>
</div>

<div class="row gx-4">  <!-- Горизонтальные отступы в гриде -->
  <div class="col">Колонка 1</div>
  <div class="col">Колонка 2</div>
</div>

3. Вертикальные отступы (между строками и блоками)

Класс Описание Пример
.gy-1 – .gy-5 Вертикальный padding (верх + низ) <div class="row gy-3">
.my-1 – .my-5 Вертикальный margin (верх + низ) <div class="my-4">
.mt-1 – .mt-5 Отступ сверху (margin-top) <div class="mt-2">
.mb-1 – .mb-5 Отступ снизу (margin-bottom) <div class="mb-3">
.py-1 – .py-5 Вертикальный padding (верх + низ) <div class="py-5">

Пример:

<div class="row gy-4">  <!-- Вертикальные отступы в гриде -->
  <div class="col-12">Строка 1</div>
  <div class="col-12">Строка 2</div>
</div>

<div class="my-5">  <!-- Большой вертикальный margin -->
  <p>Контент с отступами сверху и снизу</p>
</div>

4. Автоматические и специальные отступы

Класс Описание Пример
.m-auto Автоматический margin (центрирование) <div class="mx-auto">
.p-auto Автоматический padding (редко используется) <div class="p-auto">
.m-n1 – m-n5 Отрицательный margin <div class="m-n3">

Пример:

<div class="mx-auto" style="width: 200px;">  <!-- Центрирование -->
  Этот блок будет по центру
</div>

5. Адаптивные отступы

Все классы поддерживают адаптивность через breakpoints:

  • sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

Пример:

<div class="mx-3 mx-md-5">  <!-- На мобильных mx-3, на десктопе mx-5 -->
  Адаптивный отступ
</div>

Итог

✅ Горизонтальные отступы → .gap-*, .gx-*, .mx-*, .ms-*, .me-*.
✅ Вертикальные отступы → .gy-*, .my-*, .mt-*, .mb-*.
✅ Центрирование → .mx-auto.
✅ Адаптивность → .mx-sm-3, .gy-lg-4.

Совет: Для сеток (row/col) лучше использовать .gx-* и .gy-*, а для flex-контейнеров — .gap-*.