Bootstrap - 구성
3722 단어 bootstrap5bootstrap5
Bootstrap - 구성
Bootstrap
5버전부터 IE
를 지원하지 않는다.
설치
$ npm i bootstrap@5
구성
- 부트스트랩 기본 구성 scss
- 부트스트랩 sass 관련 구성
- 공통 컬러 수정시
variables.scss
보다 상단에 작성해야 기본값 대신 적용된다. ($primary: #FDC000
)
variables.scss
내부엔 $primary: $blue !default;
처럼 작성되어 있다.
!default
라는 키워드로 기본값을 지정할 수 있고 해당 변수에 사용자가 기본값 대신 다른 값을 지정할 수 있다.
$primary: #FDC000;
// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";
$theme-colors: (
"primary": red,
"secondary": skyblue,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
@import "../../node_modules/bootstrap/scss/bootstrap";
$theme-colors
와 같이 맵 데이터로 구성되어 있으면
부분적인 커스텀시 variables
파일보다 아래에 작성해줘야 하고,
모두 커스텀 한다면 variables
파일보다 위에 작성해줘야 한다.
- 부분적으로 커스텀했는데
variables
파일보다 위에 작성한다면 나머지 $success, $info, $warning 등의 변수를 찾지 못해 에러가 발생한다.
Author And Source
이 문제에 관하여(Bootstrap - 구성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jude-ui/Bootstrap-구성
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Bootstrap
5버전부터 IE
를 지원하지 않는다.
$ npm i bootstrap@5
variables.scss
보다 상단에 작성해야 기본값 대신 적용된다. ($primary: #FDC000
)variables.scss
내부엔$primary: $blue !default;
처럼 작성되어 있다.
!default
라는 키워드로 기본값을 지정할 수 있고 해당 변수에 사용자가 기본값 대신 다른 값을 지정할 수 있다.
$primary: #FDC000;
// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";
$theme-colors: (
"primary": red,
"secondary": skyblue,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
@import "../../node_modules/bootstrap/scss/bootstrap";
$theme-colors
와 같이 맵 데이터로 구성되어 있으면부분적인 커스텀시
variables
파일보다 아래에 작성해줘야 하고,모두 커스텀 한다면
variables
파일보다 위에 작성해줘야 한다.- 부분적으로 커스텀했는데
variables
파일보다 위에 작성한다면 나머지 $success, $info, $warning 등의 변수를 찾지 못해 에러가 발생한다.
Author And Source
이 문제에 관하여(Bootstrap - 구성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jude-ui/Bootstrap-구성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)