Создание пользовательского компонента
—
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-small-color: $gray-600 !default;
$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: $font-size-base * 1.25 !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-small-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-small-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-small-font-size
.
.citation {
position: relative;
display: block;
margin: 0;
padding: map-get($spacers, 5) map-get($spacers, 4) map-get($spacers, 3);
color: $blockquote-small-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;
font-family: $font-family-serif;
content: '“';
}
& > &-footer {
margin: $spacer 0 0;
padding-top: map-get($spacers, 2);
font-size: $blockquote-small-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 [Хекслет]
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Получить доступ