Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Создание пользовательского компонента — Bootstrap 5: Основы верстки

При использовании возможностей Bootstrap и понимания принципов работы, создание своих компонентов является простой операцией. Создадим свой компонент цитат, финальный вид которого будет выглядеть следующим образом:

Прежде, чем приступать к созданию стилей, необходимо определить, какие элементы будут использоваться в компоненте и где будут нужны модификаторы. Структурно можно разбить компонент на следующие составляющие:

Главная обертка. Компонент называется citation. Класс будет выбран соответствующий. Блоки цитат должны иметь различные варианты оформления в виде изменения фона и цвета текста. В качестве цветов будут использованы значения из переменной $theme-colors
Обертка для текста. Это блок с телом цитаты. Хоть данная обертка может не всегда быть нужна, как в случае с одной строкой текста, но при сложных цитатах желательно иметь свою обертку. В качестве класса можно выбрать класс .citation-body
Обертка для автора цитаты. Помимо имени автора она создает границу сверху для разделения частей компонента. Данная область может иметь и ссылки на цитаты, поэтому блок можно назвать .citation-footer без привязки к автору

Создадим одну базовую разметку для компонента:

<blockquote class="citation citation-success">
  <div class="citation-body">Основная задача не в том, чтобы найти ошибку, а в том, чтобы найти условия, при которых код продолжает свою работу</div>
  <div class="citation-footer">
    <cite>Кирилл Мокевнин</cite>
  </div>
</blockquote>

Сейчас выбрана семантичная верстка для цитат, но компонент должен работать при любой структуре. Это значит, что в стилях не должно быть привязки к тегам.

Второй этап создания компонента — создание файловой структуры. В Bootstrap каждый компонент располагается в отдельном файле. Так же необходимо создать отдельный файл, где будет подключение Bootstrap и самого компонента. Таким файлом будет custom.scss. Общий вид файловой структуры:

my-project/
├── scss/
│   ├── _citation.scss
│   └── custom.scss
├── style/
│   └── style.css
├── index.html

В файле custom.scss подключим Bootstrap и компонент Citation:

@import "../node_modules/bootstrap/scss/bootstrap";
@import "./citation";

Теперь можно перейти к верстке блока цитат. В Bootstrap существуют свои стили для цитат и для этого есть четыре переменные в файле \_variables.scss. Их можно использовать во время разработки компонента. Это поможет сохранить преемственность нашего компонента и стандартных стилей цитат.

$blockquote-margin-y:         $spacer !default;
$blockquote-font-size:        $font-size-base * 1.25 !default;
$blockquote-footer-color:     $gray-600 !default;
$blockquote-footer-font-size: $small-font-size !default;

Для создания отступов воспользуемся массивом $spacers, который имеет следующую структуру:

$spacer: 1rem !default;
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

Все эти значения помогут создать структуру блока .citation:

.citation {
  position: relative;

  display: block;

  margin: 0;
  padding: map.get($spacers, 5) map.get($spacers, 4) map.get($spacers, 3);

  color: $blockquote-footer-color;
  font-size: $blockquote-font-size;

  border-radius: $border-radius; // .25rem
  @include box-shadow($box-shadow); // 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
}

Для создания кавычек воспользуемся псевдоэлементом ::before, который создаст новый элемент сразу после открытия тега с классом .citation. Внутри псевдоэлемента используем абсолютно позиционированный элемент со шрифтом «Times New Roman». Для этого создадим переменную $font-family-serif в файле custom.scss

$enable-shadows: true; // включаем миксин box-shadow
$font-family-serif: "Times New Roman", Times, serif;

@import "../node_modules/bootstrap/scss/bootstrap";
@import "./citation";

Теперь все готово для создания псевдоэлемента:

.citation {
  position: relative;

  display: block;

  margin: 0;
  padding: map.get($spacers, 5) map.get($spacers, 4) map.get($spacers, 3);

  color: $blockquote-footer-color;
  font-size: $blockquote-font-size;

  border-radius: $border-radius;
  @include box-shadow($box-shadow);

  &::before {
    position: absolute;
    top: -#{map.get($spacers, 4)};

    font-size: $display1-size; // 6rem
    font-family: $font-family-serif;

    content: '“';
  }
}

Основная верстка контейнера для цитат готова. Теперь можно перейти к созданию стилей для .citation-footer. Можно обратить внимание, что пропущены стили для .citation-body. Это сделано по причине того, что все необходимые стили будут унаследованы от родительского блока .citation. В будущем эту обертку можно использовать для указания классов-утилит Bootstrap, о которых речь пойдет в одном из следующих уроков.

Задача футера — указать наклонное начертание шрифта и установить границу сверху вместе со всеми отступами. Так как автор цитаты всегда указывается шрифтом меньшим, чем сама цитата, воспользуемся переменной $blockquote-footer-font-size.

.citation {
  position: relative;

  display: block;

  margin: 0;
  padding: map.get($spacers, 5) map.get($spacers, 4) map.get($spacers, 3);

  color: $blockquote-footer-color;
  font-size: $blockquote-font-size;

  border-radius: $border-radius;
  @include box-shadow($box-shadow);

  &::before {
    position: absolute;
    top: -#{map.get($spacers, 4)};

    font-size: map.get($display-font-sizes, 1);
    font-family: $font-family-serif;

    content: '“';
  }

  & > &-footer {
    margin: $spacer 0 0;
    padding-top: map.get($spacers, 2);

    font-size: $blockquote-footer-font-size;
    font-style: italic;

    border-top: 1px solid;
  }
}

Основная верстка компонента закончена. Если воспользоваться созданным компонентом, то получим следующий блок:

Последняя задача — создание классов-модификаторов, которые добавят фоновый цвет для цитат. Помимо этого эти классы должны переопределить цвет текста на белый для создания правильного контраста.

Имея массив $theme-colors возможно пройтись по всем цветам и добавить свойство background-color. Массив $theme-colors имеет следующие значения:

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

Так как это ассоциативный массив, то для его перебора можно воспользоваться функцией @each.

@each $color, $value in $theme-colors {
  .citation-#{$color} {
    color: $white;

    @include gradient-bg($value);
  }
}

В результате компиляции появятся следующие стили:

.citation-primary {
  color: #fff;
  background-color: #007bff;
}

.citation-secondary {
  color: #fff;
  background-color: #6c757d;
}

/* И так далее. Всего 8 классов */

Разработка компонента закончена. Его всегда можно доработать создав дополнительные классы-модификаторы или дополнительно адаптировав под различные разрешения экрана. Принцип создания этих дополнений не будет отличаться от того, что было рассмотрено в этом уроке

Самостоятельная работа

Создайте компонент цитат. Добавьте возможность выбирать различные варианты box-shadow

Дополнительные материалы

Разработка пользовательских компонентов и утилит на Bootstrap [Хекслет]

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов