Это один из самых используемых компонентов. Его структуру вы могли видеть во множестве упражнений на протяжении изучения профессии. Для создания кнопки используется класс .btn
, который может быть применён к любому элементу HTML. Для этого класс имеет свойства, которые учитывают особенности различных элементов.
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out;
}
Вне зависимости от того, какой элемент имеет класс .btn он будет отображаться одинаково. Это один из принципов Bootstrap. Компоненты и классы не должны быть привязаны к конкретным тегам, тем самым давая свободу верстальщику в реализации макета.
Внутри фреймворка эти правила записаны намного сложнее, так как используют функции и переменные всего проекта.
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
}
Именно в таком виде все компоненты представлены внутри Bootstrap. Почти любое внешнее изменение является результатом использования переменных. Такой подход гарантирует привязку к фреймворку и изменение всех компонентов при изменении основных настроек.
Многие разработчики при создании своих компонентов упускают этот момент, что негативно сказывается на будущей поддержке проекта, так как изменение настроек не приведёт к изменению компонента. Для этого необходимо будет править CSS отдельно. Если таких компонентов десятки, то возможность ошибки возрастает, а время, необходимое для изменений, значительно увеличится.
Добавим три кнопки, на примере которых будет разобран механизм использования компонентов.
Как видно из стилей кнопки, по умолчанию они не имеют никаких визуальных эффектов, хотя и обладают большинством структурных стилей. Это похоже на подход OOCSS, при котором разделяются стили для структуры и стили для оформления. Они указываются отдельным классом. Для придания визуальных стилей кнопкам необходимо добавить модификатор.
Модификаторы
Для большинства компонентов стилевые модификаторы похожи. Они представляют собой классы вида названиеКомпонента-цвет. Кнопки не являются исключением. По умолчанию таких классов у кнопок восемь:
-
.btn-primary
-
.btn-secondary
-
.btn-success
-
.btn-danger
-
.btn-warning
-
.btn-info
-
.btn-light
-
.btn-dark
Каждый из этих классов добавляет определённый цвет, соответствующий названию. Добавим в пример классы для кнопок.
Эти цвета возможно менять и добавлять используя переменную $theme-colors
в файле _variables.scss
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
В этом же файле представлены конкретные значения цветов, их можно изменять/добавлять, тем самым меняя цветовую палитру сайта или добавляя новые возможности при использовании классов.
Ключевыми моментами при работе с компонентами являются:
-
Отсутствие привязки к тегам
-
Использование функций для генерации стилей
-
Использование общих переменных фреймворка
-
Использование индивидуальных переменных для кастомизации компонента