기본 클래스
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 in map-keys($theme-colors) {
.alert-#{$state} {
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
}
}
// 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 in map-keys($theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
}
}
반응형
이러한 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 맵과 변수를 변경하는 방법에 대한 자세한 예시는 그리드 문서의 CSS 섹션을 참조해 주세요.
직접 만들기
Bootstrap을 사용하여 직접 컴포넌트를 작성할 때는 이러한 지침을 따르는 것이 좋습니다. 이 접근 방식을 문서나 예시의 사용자 정의 컴포넌트에도 적용하고 있습니다. callout 같은 컴포넌트는 기본 클래스와 제어자 클래스가 있는 제공된 컴포넌트처럼 작성됩니다.
<div class="callout">...</div>
아래와 같이 CSS에는 대부분이 .callout으로 이루어지고 있습니다. 그리고 각 변형 간의 독자적인 스타일은 제어자 클래스로 제어합니다.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
callout의 경우, border-left-color라는 독자적인 스타일을 사용하고 있습니다. 이 기본 클래스와 제어자 클래스를 조합하면 컴포넌트 계열이 완성됩니다: