기본 클래스
Bootstrap의 컴포넌트는 주로 기본-제어자(base-modifier) 명명법으로 만들어졌습니다. 가능한 한 많은 공유 속성을 .btn과 같은 기본 클래스로 그룹화 하고, 각 변형 개개의 스타일은 .btn-primary 혹은 .btn-success와 같은 제어자 클래스로 그룹화 하고 있습니다.
제어자 클래스를 만들기 위해, Sass의 @each 반복문을 사용하여 Sass 맵을 반복합니다. 이는 특히 $theme-colors로 컴포넌트의 변형을 만들고 중단점별로 반응하는 변형을 만들때 도움이 됩니다. 이 Sass 맵을 재정의하고 다시 컴파일하면 자동으로 반복문에 변경이 반영됩니다.
이러한 반복문을 제정의하고 Bootstrap의 기본-제어자 클래스 접근법을 당신의 코드로 확장하는 방법에 대해서는 Sass 멥과 반복 문서를 체크 해 주세요.
제어자
Bootstrap의 컴포넌트의 대부분은 기본-제어자 클래스 접근법으로 만들어졌습니다. 즉, 스타일의 대부분은 기본 클래스(예를 들어, .btn)에 포함되어 스타일의 변형(예를 들어, .btn-danger)은 제어자 클래스로 한정되어 있습니다. 이 제어자 클래스는 $theme-colors 맵에서 구축되어 제어자 클래스의 수와 이름을 재정의 합니다.
여기서는 $theme-colors 맵을 반복해 .alert와 .list-group 컴포넌트의 제어자를 생성하는 방법의 두가지 예시입니다.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
반응형
이러한 Sass 반복은 색상 맵 뿐만이 아닙니다. 컴포넌트의 반응적인 변형을 생성할 수도 있습니다. 예를 들면, $grid-breakpoints Sass 맵에 대해 @each 반복을 미디어 쿼리와 혼합하는 드롭다운의 반응적 배치는 다음과 같습니다.
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto;
left: 0;
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0;
left: auto;
}
}
}
}
$grid-breakpoints를 변경하면, 그 맵을 반복 처리하는 모든 반복문에 적용됩니다.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Sass 맵과 변수를 변경하는 방법에 대한 자세한 예시는, 그리드 문서의 Sass 섹션을 참조해 주세요.
직접 만들기
Bootstrap을 사용하여 직접 컴포넌트를 작성할 때는 이러한 지침을 따르는 것이 좋습니다. 이 접근 방식을 문서나 예시의 사용자 정의 컴포넌트에도 적용하고 있습니다. callout 같은 컴포넌트는 기본 클래스와 제어자 클래스가 있는 제공된 컴포넌트처럼 작성됩니다.
<div class="callout">...</div>
아래와 같이 CSS에는 대부분이 .callout으로 이루어지고 있습니다. 그리고 각 변형 간의 독자적인 스타일은 제어자 클래스로 제어합니다.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
callout의 경우, border-left-color라는 독자적인 스타일을 사용하고 있습니다. 이 기본 클래스와 제어자 클래스를 조합하면 컴포넌트 계열이 완성됩니다: