내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
Check
새로운 버전의 Bootstrap을 사용할 수 있습니다!
// Options

내장된 변수를 사용하여 Bootstrap을 신속하게 사용자 정의하여 스타일 및 동작을 제어하기 위한 글로벌 CSS 설정을 쉽게 전환할 수 있습니다.

내장된 사용자 정의 변수 파일과 새로운 $enable-* Sass 변수를 사용하여 글로벌한 CSS 설정을 쉽게 전환할 수 있습니다. 변수 값을 재정의하고 필요에 따라 npm run test로 다시 컴파일 해 주세요.

이러한 변수는 Bootstrap의 scss/_variables.scss 파일 내의 주요 글로벌 옵션을 찾아 재정의 할 수 있습니다.

변수 설명
$spacer 1rem (기본), 혹은 어떤 수 > 0 간격 유틸리티를 만들때 기본 간격 값을 지정.
$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-container-classes true (default) or false Enables the generation of CSS classes for layout containers. (New in v5.2.0)
$enable-caret true (기본) 혹은 false .dropdown-toggle의 가상 요소의 화살표(캐럿 caret)를 사용합니다.
$enable-button-pointers true (기본) 혹은 false 비활성화 되지 않은 버튼 요소에 “손모양(hand)” 커서 추가합니다.
$enable-rfs true (기본) 혹은 false 글로벌하게 RFS 지원.
$enable-validation-icons true (기본) 혹은 false 유효성 검사를 위한 텍스트 입력이나 일부 사용자 정의 폼에서 background-image로 아이콘을 사용합니다.
$enable-negative-margins true 혹은 false (기본) 마이너스 마진 유틸리티를 사용합니다.
$enable-deprecation-messages true (기본) 혹은 false false로 설정하면 v6에서 삭제 예정인 권장 믹스인이나 함수를 사용할때 에러가 표시되지 않습니다.
$enable-important-utilities true (기본) 혹은 false 유틸리티 클래스에서 !important 접미사를 사용합니다.
$enable-smooth-scroll true (기본) 혹은 false scroll-behavior: smoothprefers-reduced-motion 미디어 쿼리를 통해서 감소된 모션을 요청하는 사용자를 제외하고 전역으로 전용합니다.