내용으로 이동 문서 목록으로 이동

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

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

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

변수설명
$spacer1rem (기본), 혹은 어떤 수 > 0간격 유틸리티를 만들때 기본 간격 값을 지정.
$enable-dark-modetrue (default) or false프로젝트와 해당 컴포넌트에서 다크 모드 지원을 기본으로 활성화합니다.
$enable-roundedtrue (기본) 혹은 false다양한 컴포넌트에서 정의된 border-radius 스타일의 사용 유무.
$enable-shadowstrue 혹은 false (기본)다양한 컴포넌트에서 정의가 끝난 장식용의 box-shadow 스타일의 사용 유무. 포커스 상태에서 사용되는 box-shadow에는 영향을 주지 않습니다.
$enable-gradientstrue 혹은 false (기본)다양한 컴포넌트에서 정의된 background-image 그라데이션의 사용 유무.
$enable-transitionstrue (기본) 혹은 false다양한 컴포넌트에서 정의된 transition의 사용 유무.
$enable-reduced-motiontrue (기본) 혹은 false사용자의 브라우저/운영 체제 기본 설정에 따라 특정 애니메이션/트랜지션을 억제하는 prefers-reduced-motion 미디어 쿼리를 사용합니다.
$enable-grid-classestrue (기본) 혹은 false그리드 시스템용 CSS 클래스(예를 들어, .row, .col-md-1, 등등)를 사용합니다.
$enable-cssgridtrue or false (기본)실험적 CSS 그리드 시스템 (예: .grid, .g-col-md-1 등)을 활성화합니다.
$enable-container-classestrue (default) or false레이아웃 컨테이너에 대한 CSS 클래스를 생성할 수 있습니다. (v5.2.0에 추가됨)
$enable-carettrue (기본) 혹은 false.dropdown-toggle의 가상 요소의 화살표(캐럿)를 사용합니다.
$enable-button-pointerstrue (기본) 혹은 false비활성화 되지 않은 버튼 요소에 "손모양(hand)" 커서 추가합니다.
$enable-rfstrue (기본) 혹은 false글로벌하게 RFS 지원.
$enable-validation-iconstrue (기본) 혹은 false유효성 검사를 위한 텍스트 입력이나 일부 사용자 정의 폼에서 background-image로 아이콘을 사용합니다.
$enable-negative-marginstrue 혹은 false (기본)마이너스 마진 유틸리티를 사용합니다.
$enable-deprecation-messagestrue (기본) 혹은 falsefalse로 설정하면 v6에서 삭제 예정인 권장 믹스인이나 함수를 사용할때 에러가 표시되지 않습니다.
$enable-important-utilitiestrue (기본) 혹은 false유틸리티 클래스에서 !important 접미사를 사용합니다.
$enable-smooth-scrolltrue (기본) 혹은 falsescroll-behavior: smoothprefers-reduced-motion 미디어 쿼리를 통해서 감소된 모션을 요청하는 사용자를 제외하고 전역으로 전용합니다.