in English

테마 부트스트랩

쉬운 테마 및 구성 요소 변경을 위한 전역 스타일 기본 설정을 위한 새로운 내장 Sass 변수로 Bootstrap 4를 사용자 정의하십시오.

소개

Bootstrap 3에서 테마는 주로 LESS의 변수 재정의, 사용자 지정 CSS 및 dist파일에 포함된 별도의 테마 스타일시트에 의해 주도되었습니다. 약간의 노력으로 핵심 파일을 건드리지 않고 Bootstrap 3의 모양을 완전히 다시 디자인할 수 있습니다. 부트스트랩 4는 익숙하지만 약간 다른 접근 방식을 제공합니다.

이제 테마 지정은 Sass 변수, Sass 맵 및 사용자 정의 CSS로 수행됩니다. 더 이상 전용 테마 스타일시트가 없습니다. 대신 기본 제공 테마를 활성화하여 그라디언트, 그림자 등을 추가할 수 있습니다.

사스

자체 자산 파이프라인을 사용하여 Sass를 컴파일 할 때 소스 Sass 파일을 활용하여 변수, 맵, 믹스인 등을 활용 하십시오.

파일 구조

가능하면 부트스트랩의 핵심 파일을 수정하지 마십시오. Sass의 경우 이는 Bootstrap을 가져와 수정하고 확장할 수 있는 고유한 스타일시트를 만드는 것을 의미합니다. npm과 같은 패키지 관리자를 사용한다고 가정하면 다음과 같은 파일 구조를 갖게 됩니다.

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

소스 파일을 다운로드했고 패키지 관리자를 사용하지 않는 경우 해당 구조와 유사한 것을 수동으로 설정하고 Bootstrap의 소스 파일을 자신의 소스 파일과 별도로 유지하고 싶을 것입니다.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

가져오기

에서 custom.scssBootstrap의 소스 Sass 파일을 가져옵니다. 부트스트랩 전체를 포함하거나 필요한 부분을 선택하는 두 가지 옵션이 있습니다. 구성 요소 전체에 몇 가지 요구 사항과 종속성이 있음을 알고 있지만 후자를 권장합니다. 또한 플러그인에 대한 일부 JavaScript를 포함해야 합니다.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

해당 설정이 완료되면 에서 Sass 변수와 맵을 수정할 수 있습니다 custom.scss. // Optional필요에 따라 섹션 아래에 부트스트랩의 일부를 추가할 수도 있습니다 . 파일 의 전체 가져오기 스택을 bootstrap.scss시작점으로 사용하는 것이 좋습니다.

변수 기본값

부트스트랩의 모든 Sass 변수에는 부트 !default스트랩의 소스 코드를 수정하지 않고도 자신의 Sass에서 변수의 기본값을 재정의할 수 있는 플래그가 포함되어 있습니다. 필요에 따라 변수를 복사하여 붙여넣고 해당 값을 수정하고 !default플래그를 제거합니다. 변수가 이미 할당된 경우 부트스트랩의 기본값으로 다시 할당되지 않습니다.

부트스트랩 변수의 전체 목록은 scss/_variables.scss. 일부 변수는 로 설정되어 null있으며 이러한 변수는 구성에서 재정의되지 않는 한 속성을 출력하지 않습니다.

변수 재정의는 함수, 변수 및 믹스인을 가져온 후 나머지 가져오기 전에 와야 합니다.

다음은 npm을 통해 부트스트랩을 가져오고 컴파일할 때 background-colorcolor를 변경하는 예입니다 .<body>

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

아래의 전역 옵션을 포함하여 부트스트랩의 모든 변수에 대해 필요에 따라 반복합니다.

스타터 프로젝트로 npm을 통해 부트스트랩을 시작하세요! twbs /bootstrap-npm-starter 템플릿 저장소로 이동하여 자신의 npm 프로젝트에서 부트스트랩을 빌드하고 사용자 정의하는 방법을 확인하십시오. Sass 컴파일러, Autoprefixer, Stylelint, PurgeCSS 및 Bootstrap 아이콘을 포함합니다.

맵 및 루프

Bootstrap 4에는 관련 CSS 패밀리를 쉽게 생성할 수 있는 키 값 쌍인 소수의 Sass 맵이 포함되어 있습니다. 색상, 그리드 중단점 등에 Sass 맵을 사용합니다. Sass 변수와 마찬가지로 모든 Sass 맵에는 !default플래그가 포함되며 재정의 및 확장이 가능합니다.

일부 Sass 맵은 기본적으로 빈 맵으로 병합됩니다. 이는 주어진 Sass 맵을 쉽게 확장할 수 있도록 하기 위한 것이지만 맵에서 항목을 제거하는 것이 약간 더 어려워지는 대가를 치르게 됩니다.

지도 수정

맵 의 기존 색상을 수정하려면 $theme-colors사용자 정의 Sass 파일에 다음을 추가하십시오.

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

지도에 추가

에 새 색상을 $theme-colors추가하려면 새 키와 값을 추가하십시오.

$theme-colors: (
  "custom-color": #900
);

지도에서 제거

$theme-colors, 또는 다른 맵 에서 색상을 제거하려면 를 사용 map-remove하십시오. 요구 사항과 옵션 사이에 삽입해야 합니다.

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

필수 키

부트스트랩은 우리가 직접 사용하고 확장할 때 Sass 맵 내에 특정 키가 있다고 가정합니다. 포함된 맵을 사용자 정의할 때 특정 Sass 맵의 키가 사용되는 경우 오류가 발생할 수 있습니다.

예를 들어 링크, 버튼 및 양식 상태에 대해 primary, successdanger키를 사용합니다. $theme-colors이러한 키의 값을 교체하면 문제가 없지만 제거하면 Sass 컴파일 문제가 발생할 수 있습니다. 이러한 경우 해당 값을 사용하는 Sass 코드를 수정해야 합니다.

기능

부트스트랩은 여러 Sass 기능을 활용하지만 일반 테마에는 하위 집합만 적용됩니다. 색상 맵에서 값을 가져오기 위한 세 가지 함수가 포함되어 있습니다.

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

이를 통해 v3의 색상 변수를 사용하는 것처럼 Sass 맵에서 하나의 색상을 선택할 수 있습니다.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

또한 지도에서 특정 수준 의 색상 을 가져오는 또 다른 기능이 $theme-colors있습니다. 음수 레벨 값은 색상을 밝게 하는 반면 높은 레벨 값은 어둡게 합니다.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

실제로는 함수를 호출하고 두 개의 매개변수를 전달합니다. 색상 이름 $theme-colors(예: 기본 또는 위험)과 숫자 수준입니다.

.custom-element {
  color: theme-color-level(primary, -10);
}

추가 기능은 향후 추가되거나 사용자 정의 Sass를 추가하여 추가 Sass 맵에 대한 레벨 기능을 생성하거나 더 장황한 경우 일반 기능을 생성할 수 있습니다.

색상 대비

Bootstrap에 포함된 추가 기능은 색상 대비 기능 color-yiq입니다. YIQ 색상 공간 을 활용하여 지정된 기본 색상을 기반으로 밝은( #fff) 또는 어두운( ) 대비 색상 을 자동으로 반환합니다 . #111이 함수는 여러 클래스를 생성하는 믹스인 또는 루프에 특히 유용합니다.

예를 들어 $theme-colors지도에서 색상 견본을 생성하려면 다음을 수행합니다.

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

일회성 대비가 필요한 경우에도 사용할 수 있습니다.

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

색상 맵 기능을 사용하여 기본 색상을 지정할 수도 있습니다.

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

SVG 탈출

이 기능을 사용하여 SVG 배경 이미지 의 , 및 문자 escape-svg를 이스케이프합니다 . IE에서 배경 이미지를 제대로 렌더링하려면 이러한 문자를 이스케이프해야 합니다. 함수 를 사용할 때 데이터 URI는 따옴표로 묶어야 합니다.<>#escape-svg

더하기 및 빼기 기능

add및 함수를 사용 subtract하여 CSS 함수를 래핑합니다 calc. 이러한 함수의 주요 목적은 "단위 없는" 0값이 calc식에 전달될 때 오류를 방지하는 것입니다. 와 같은 표현식 calc(10px - 0)은 수학적으로 정확함에도 불구하고 모든 브라우저에서 오류를 반환합니다.

계산이 유효한 예:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

계산이 잘못된 예:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass 옵션

내장된 사용자 정의 변수 파일로 Bootstrap 4를 사용자 정의하고 새로운 $enable-*Sass 변수로 전역 CSS 기본 설정을 쉽게 토글할 수 있습니다. 변수의 값을 재정의하고 npm run test필요에 따라 로 재컴파일하십시오.

scss/_variables.scssBootstrap의 파일 에서 주요 전역 옵션에 대해 이러한 변수를 찾아 사용자 정의할 수 있습니다 .

변하기 쉬운 가치 설명
$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-prefers-reduced-motion-media-query true(기본값) 또는false 사용자의 브라우저/운영 체제 기본 설정에 따라 특정 애니메이션/전환을 억제 하는 prefers-reduced-motion미디어 쿼리 를 활성화합니다 .
$enable-hover-media-query true또는 false(기본값) 더 이상 사용되지 않음
$enable-grid-classes true(기본값) 또는false 그리드 시스템에 대한 CSS 클래스 생성을 활성화합니다(예: , , .container등 )..row.col-md-1
$enable-caret true(기본값) 또는false 에서 의사 요소 캐럿을 활성화합니다 .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(기본값) 또는false 비활성화되지 않은 버튼 요소에 "손" 커서를 추가합니다.
$enable-print-styles true(기본값) 또는false 인쇄 최적화를 위한 스타일을 활성화합니다.
$enable-responsive-font-sizes true또는 false(기본값) 반응형 글꼴 크기 를 활성화합니다 .
$enable-validation-icons true(기본값) 또는false background-image유효성 검사 상태에 대한 텍스트 입력 및 일부 사용자 정의 양식 내의 아이콘을 활성화합니다 .
$enable-deprecation-messages true(기본값) 또는false false에서 제거될 예정인 더 이상 사용되지 않는 믹스인 및 기능을 사용할 때 경고를 숨기려면 로 설정하십시오 v5.

색깔

Bootstrap의 다양한 구성 요소와 유틸리티는 Sass 맵에 정의된 일련의 색상을 통해 구축됩니다. 이 맵은 일련의 규칙 집합을 빠르게 생성하기 위해 Sass에서 반복될 수 있습니다.

모든 색상

Bootstrap 4에서 사용 가능한 모든 색상은 scss/_variables.scss파일의 Sass 변수 및 Sass 맵으로 사용할 수 있습니다. 이것은 우리가 이미 포함 하고 있는 회색조 팔레트 와 마찬가지로 추가 음영을 추가하기 위해 후속 마이너 릴리스에서 확장될 것 입니다.

$블루 #007bff
$인디고 #6610f2
$보라색 #6f42c1
$핑크 #e83e8c
$빨간색 #dc3545
$오렌지 #fd7e14
$옐로우 #ffc107
$그린 #28a745
청록 #20c997
$시안 #17a2b8

Sass에서 이것을 사용하는 방법은 다음과 같습니다.

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

색상 유틸리티 클래스 는 설정 color및 에 사용할 수도 있습니다 background-color.

앞으로 우리는 아래의 그레이스케일 색상으로 했던 것처럼 각 색상의 음영에 대한 Sass 맵과 변수를 제공하는 것을 목표로 할 것입니다.

테마 색상

모든 색상의 하위 집합을 사용하여 색 구성표를 생성하기 위한 더 작은 색상 팔레트를 생성합니다. 또한 부트스트랩 scss/_variables.scss파일에서 Sass 변수 및 Sass 맵으로도 사용할 수 있습니다.

$기본 #007bff
$2차 #6c757d
$성공 #28a745
$위험 #dc3545
$경고 #ffc107
$정보 #17a2b8
$빛 #f8f9fa
$다크 #343a40

회색

scss/_variables.scss프로젝트 전반에 걸쳐 일관된 회색 음영을 위해 광범위한 회색 변수 세트와 Sass 맵이 제공됩니다. 이것은 중성 회색보다는 미묘한 푸른 색조를 나타내는 경향이 있는 "쿨 그레이"입니다.

$회색-100 #f8f9fa
$회색-200 #e9ecef
$회색-300 #dee2e6
$회색-400 #ced4da
$회색-500 #adb5bd
$회색-600 #6c757d
$회색-700 #495057
$회색-800 #343a40
$회색-900 #212529

에서 scss/_variables.scssBootstrap의 색상 변수와 Sass 맵을 찾을 수 있습니다. 다음은 $colorsSass 맵의 예입니다.

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

맵 내에서 값을 추가, 제거 또는 수정하여 다른 많은 구성요소에서 값이 사용되는 방식을 업데이트합니다. 불행히도 현재로서는 모든 구성 요소가 이 Sass 맵을 사용하는 것은 아닙니다. 향후 업데이트에서는 이를 개선하기 위해 노력할 것입니다. 그때까지 ${color}변수와 이 Sass 맵을 사용할 계획입니다.

구성품

Bootstrap의 많은 구성 요소와 유틸리티는 @eachSass 맵을 반복하는 루프로 구축됩니다. 이는 당사에서 구성 요소의 변형을 생성 $theme-colors하고 각 중단점에 대한 반응형 변형을 생성하는 데 특히 유용합니다. 이러한 Sass 맵을 사용자 정의하고 다시 컴파일하면 이러한 루프에 반영된 변경 사항을 자동으로 볼 수 있습니다.

수정자

Bootstrap의 많은 구성 요소는 base-modifier 클래스 접근 방식으로 구축됩니다. 이는 스타일링의 대부분이 기본 클래스(예: .btn)에 포함되는 반면 스타일 변형은 수정자 클래스(예: .btn-danger)에 국한된다는 것을 의미합니다. 이러한 수정자 클래스는 수정자 클래스 $theme-colors의 수와 이름을 사용자 정의하기 위해 맵에서 빌드됩니다.

다음은 구성 요소와 모든 백그라운드 유틸리티 $theme-colors에 대한 수정자를 생성하기 위해 맵을 반복하는 방법에 대한 두 가지 예입니다 ..alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

반응형

이러한 Sass 루프는 컬러 맵에만 국한되지 않습니다. 또한 구성 요소 또는 유틸리티의 반응형 변형을 생성할 수도 있습니다. Sass 맵에 대한 @each루프를 미디어 쿼리 포함과 혼합하는 반응형 텍스트 정렬 유틸리티를 예로 들어 보겠습니다 .$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

를 수정해야 하는 경우 $grid-breakpoints변경 사항은 해당 맵을 반복하는 모든 루프에 적용됩니다.

CSS 변수

Bootstrap 4는 컴파일된 CSS에 약 24개의 CSS 사용자 정의 속성(변수) 을 포함합니다. 이를 통해 브라우저의 Inspector, 코드 샌드박스 또는 일반 프로토타이핑에서 작업할 때 테마 색상, 중단점 및 기본 글꼴 스택과 같이 일반적으로 사용되는 값에 쉽게 액세스할 수 있습니다.

사용 가능한 변수

여기에 포함된 변수가 있습니다( :root필수 사항에 유의). 그것들은 우리 _root.scss파일에 있습니다.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

CSS 변수는 Sass의 변수와 유사한 유연성을 제공하지만 브라우저에 제공되기 전에 컴파일할 필요가 없습니다. 예를 들어 여기에서는 CSS 변수를 사용하여 페이지의 글꼴 및 링크 스타일을 재설정합니다.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

중단점 변수

원래 CSS 변수(예: --breakpoint-md) 에 중단점을 포함했지만 미디어 쿼리에서는 지원되지 않지만 미디어 쿼리의 규칙 집합 에서는 계속 사용할 수 있습니다 . 이러한 중단점 변수는 JavaScript에서 사용할 수 있는 경우 이전 버전과의 호환성을 위해 컴파일된 CSS에 남아 있습니다. 사양에서 자세히 알아보세요 .

다음은 지원되지 않는 항목의 예입니다.

@media (min-width: var(--breakpoint-sm)) {
  ...
}

다음은 지원되는 항목 의 예입니다 .

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}