[css] 부트 스트랩 CSS 템플릿 사용자 지정

2019 업데이트-부트 스트랩 4

이제 LESS 대신 SASS를 사용 하는 4.x 용 부트 스트랩 사용자 정의 질문을 다시 검토하고 있습니다 . 일반적으로 부트 스트랩을 사용자 지정하는 방법에는 두 가지가 있습니다.

1. 간단한 CSS 재정의

사용자 정의하는 한 가지 방법은 단순히 CSS를 사용하여 부트 스트랩 CSS를 재정의하는 것입니다. 유지 보수성을 위해 CSS 사용자 정의는 별도의 custom.css파일에 저장되므로 bootstrap.css수정되지 않은 상태로 유지됩니다. 받는 기준은 custom.css다음과 후bootstrap.css 작업에 대한 오버라이드 (override)에 대한 …

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

사용자 정의 CSS에 필요한 변경 사항을 추가하십시오. 예를 들면 …

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

이전 ( bootstrap.css)

이후 (사용 custom.css)

사용자 정의 할 때 CSS 특이성을 이해해야 합니다. .NET custom.css과 같은 특정 선택기를 사용해야 하는 경우 재정의 합니다 bootstrap.css.

Bootstrap Utility 클래스!important 중 하나를 재정의하지 않는 한 사용자 지정 CSS에서 사용할 필요가 없습니다 . CSS 특이성은
항상 하나의 CSS 클래스에 대해 작동하여 다른 클래스를 재정의합니다.

---

2. SASS를 사용하여 사용자 지정

SASS에 익숙 하고이 방법을 사용해야하는 경우 자체 custom.scss. 이것을 설명 하는 Bootstrap 문서 의 섹션 이 있지만 문서 는 .NET Framework 에서 기존 변수를 활용하는 방법을 설명하지 않습니다custom.scss . 예를 들어, body background-color를 #eeeeee으로 변경 하고 파란색 primary컨텍스트 색상을 Bootstrap의 $purple변수로 변경 / 재정 의 해 봅시다 .

/* custom.scss */

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */

/* simply assign the value */
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

이것은 또한 새로운 사용자 정의 클래스 를 만드는데 도 작동합니다 . 예를 들어, 여기에 내가 추가 purple생성 테마 색에 모두 의 CSS를 btn-purple, text-purple, bg-purple, alert-purple, 등 …

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

SASS를 사용 하면 사용자 정의 후에 부트 스트랩 을 @import 해야 작동합니다! SASS가 CSS로 컴파일되면 ( SASS 컴파일러 node-sass, gulp-sass, npm webpack 등을 사용하여 수행해야합니다. ) 결과 CSS는 사용자 정의 된 부트 스트랩입니다. SASS에 익숙 하지 않은 경우 내가 만든 이 테마 빌더 와 같은 도구를 사용하여 Bootstrap을 사용자 지정할 수 있습니다 .

사용자 지정 부트 스트랩 데모 (SASS)

참고 : 3.x와 달리 Bootstrap 4.x는 공식 사용자 지정 도구를 제공하지 않습니다 . 그러나 그리드 전용 CSS를 다운로드 하거나 다른 4.x 사용자 지정 빌드 도구 를 사용하여 원하는대로 Bootstrap 4 CSS를 다시 빌드 할 수 있습니다.

---

관련 :
SASS
를 사용하여 Bootstrap 4를 확장 / 수정 (사용자 지정) 하는 방법 부트 스트랩 기본 색상을 변경하는 방법은 무엇입니까?
sass를 사용하여 Bootstrap 4에서 새로운 색상 스타일 세트를 만드는
방법 Bootstrap을 사용자 지정하는 방법

---

답변