Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <ul><li>Переработать дизайн и подстроиться под готовые компоненты фреймворка</li>

3 <li>Создать новые компоненты под свои нужды</li>

4 </ul>Благодаря функциям, переменным и миксинам в Bootstrap создать новый компонент будет не сложно. Главное - понимать принципы работы Bootstrap и использовать все возможности.

5 В этом уроке мы создадим компонент цитаты. Он впишется в любой блог или новостное издание, когда нужно подчеркнуть мысль внутри статьи.

6 Внешний вид компонента и его финальную верстку можно увидеть в<a>CodePen</a>.

7 Процесс создания компонента разделим на несколько этапов:

8 <ol><li>Определение структуры компонентов</li>

9 <li>Верстка базовой структуры</li>

10 <li>Верстка классов-оформления для придания компоненту различных цветовых схем</li>

11 </ol><h2>Структура компонента</h2>

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

13 <ul><li>Главная обертка. Компонент называетсяcitation. Класс будет выбран соответствующий. Блоки цитат должны иметь различные варианты оформления в виде изменения фона и цвета текста. В качестве цветов будут использованы значения из переменной $theme-colors</li>

14 <li>Обертка для текста. Это блок с телом цитаты. Хоть данная обертка может не всегда быть нужна, как в случае с одной строкой текста, но при сложных цитатах желательно иметь свою обертку. В качестве класса можно выбрать класс.citation-body</li>

15 <li>Обертка для автора цитаты. Помимо имени автора она создает границу сверху для разделения частей компонента. Данная область может иметь и ссылки на цитаты, поэтому блок можно назвать.citation-footerбез привязки к автору</li>

16 </ul><h2>Верстка базовой структуры</h2>

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

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

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

20 Общий вид файловой структуры:

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

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

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

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

25 В этом примере основные свойства, такие как отступы, цвет, размеры вынесены в CSS-переменные. Этот подход появился в последних версиях Bootstrap и используется для создания тем. Главным триггером появления такого подхода стала возможность использования светлой и темной темы.

26 <h3>Создание кавычек в компоненте</h3>

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

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

29 <h3>Создание футера компонента</h3>

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

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

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

33 <h2>Создание классов-модификаторов цветового оформления</h2>

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

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

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

37 Здесь мы меняем только заданные переменные для замены цвета фона и текста. Для "красоты" были использованы не просто цвета, а их специальные версии, где фон осветляется, а текст становится темнее. Такой же подход используется в компоненте Alert.

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

39 Так как все цвета берутся из массива, то смена цветовой темы всего проекта приведет и к смене цветов этого компонента.

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

41 <h2>Выводы</h2>

42 В этом уроке мы изучили, как создаются пользовательские компоненты с помощью Bootstrap. Чтобы связать новый компонент с "внутренностями" фреймворка следует использовать:

43 <ul><li>Переменные Bootstrap, которые находятся в файле_variables.scss</li>

44 <li>Функции и миксины фреймворка</li>

45 <li>CSS-переменные</li>

46 </ul>При таком подходе смена настроек фреймворка или его обновление затронет и ваши созданные компоненты. Это поможет держать систему в однообразии.