옵션

옵션 (Options)

내장된 변수로 Bootstrap을 빠르게 커스터마이즈해서 스타일과 동작을 제어하는 전역 CSS 환경설정을 쉽게 토글해 보아요.

출처: 문서

본문

내장된 커스텀 변수 파일로 Bootstrap을 커스터마이즈하고, 새로운 $enable-* Sass 변수로 전역 CSS 환경설정을 쉽게 토글할 수 있어요. 변수의 값을 재정의하고 필요에 따라 npm run test로 다시 컴파일하면 돼요.

이 변수들은 Bootstrap의 scss/_variables.scss 파일에서 찾아 커스터마이즈할 수 있어요.

변수 (Variable) 값 (Values) 설명 (Description)
$spacer 1rem (기본), 또는 0보다 큰 값 스페이서(spacer) 유틸리티를 프로그래밍 방식으로 생성하기 위한 기본 스페이서 값을 지정해요.
$enable-dark-mode true (기본) 또는 false 프로젝트와 그 컴포넌트 전반에 걸쳐 내장된 다크 모드 지원을 활성화해요.
$enable-rounded true (기본) 또는 false 다양한 컴포넌트에 미리 정의된 border-radius 스타일을 활성화해요.
$enable-shadows true 또는 false (기본) 다양한 컴포넌트에 미리 정의된 장식용 box-shadow 스타일을 활성화해요. 포커스 상태에 사용되는 box-shadow에는 영향을 주지 않아요.
$enable-gradients true 또는 false (기본) 다양한 컴포넌트에 background-image 스타일을 통한 미리 정의된 그라디언트를 활성화해요.
$enable-transitions true (기본) 또는 false 다양한 컴포넌트에 미리 정의된 transition을 활성화해요.
$enable-reduced-motion true (기본) 또는 false 사용자의 브라우저/운영체제 환경설정에 따라 특정 애니메이션/전환을 억제하는 prefers-reduced-motion 미디어 쿼리를 활성화해요.
$enable-grid-classes true (기본) 또는 false 그리드 시스템용 CSS 클래스(예: .row, .col-md-1 등) 생성을 활성화해요.
$enable-cssgrid true 또는 false (기본) 실험적인 CSS 그리드 시스템(예: .grid, .g-col-md-1 등)을 활성화해요.
$enable-container-classes true (기본) 또는 false 레이아웃 컨테이너용 CSS 클래스 생성을 활성화해요. (v5.2.0에서 새로 추가됨)
$enable-caret true (기본) 또는 false .dropdown-toggle에 의사 요소 캐럿(caret)을 활성화해요.
$enable-button-pointers true (기본) 또는 false 비활성화되지 않은 버튼 요소에 "손" 커서를 추가해요.
$enable-rfs true (기본) 또는 false RFS를 전역적으로 활성화해요.
$enable-validation-icons true (기본) 또는 false 텍스트 입력과 일부 커스텀 폼의 검증 상태에 background-image 아이콘을 활성화해요.
$enable-negative-margins true 또는 false (기본) 음수 마진 유틸리티 생성을 활성화해요.
$enable-deprecation-messages true (기본) 또는 false v6에서 제거될 예정인 더 이상 사용되지 않는(deprecated) 믹스인과 함수를 사용할 때 경고를 숨기려면 false로 설정해요.
$enable-important-utilities true (기본) 또는 false 유틸리티 클래스에 !important 접미사를 활성화해요.
$enable-smooth-scroll true (기본) 또는 false prefers-reduced-motion 미디어 쿼리를 통해 축소 모션을 요청한 사용자를 제외하고, 전역적으로 scroll-behavior: smooth를 적용해요.

더 알아보기 (Learn more)