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

109

Twitter에서 Bootstrap을 시작하고 있으며 사용자 정의를위한 '모범 사례'가 무엇인지 궁금합니다. CSS 템플릿 (Bootstrap 또는 기타)의 모든 기능을 활용하고, 완전히 (쉽고) 수정 가능하며, 지속 가능 (즉, 다음 버전의 Bootstrap이 Twitter에서 출시 될 때) 시스템을 개발하고 싶습니다. 다시 시작해야합니다.

예를 들어 상단 탐색에 배경 이미지를 추가하고 싶습니다. 이 문제를 해결하는 방법에는 3 가지가 있습니다.

  1. bootstrap.css에서 .topbar 클래스를 수정하십시오. .topbar 항목이 많고 반드시 동일한 방식으로 수정하고 싶지 않기 때문에 특히이 기능이 마음에 들지 않습니다.
  2. 내 배경 이미지로 새 클래스를 만들고 두 스타일 (새 및 부트 스트랩을 내 요소에 적용)을 적용합니다. 이로 인해 스타일 충돌이 발생할 수 있습니다. .topbar 클래스를 별도의 클래스로 분리 한 다음 내 사용자 지정 클래스에서 밟지 않은 부분 만 사용하여 피할 수 있습니다. 다시 말하지만 이것은 필요하다고 생각하는 것보다 더 많은 작업이 필요하며 유연하지만 Twitter가 다음 버전을 출시 할 때 bootstrap.css를 쉽게 업데이트 할 수 없습니다.
  3. .LESS의 변수를 사용하여 사용자 정의를 수행하십시오. 오프 핸드 이것은 좋은 접근법처럼 보이지만 .LESS를 사용하지 않은 것 같습니다. 나는 클라이언트에서 CSS를 컴파일하고 코드 지속 가능성에 대해 걱정합니다.

Bootstrap을 사용하고 있지만이 질문은 모든 CSS 템플릿으로 일반화 될 수 있습니다.

입력 해 주셔서 미리 감사드립니다.

css  twitter-bootstrap  bootswatch 
— Anne
소스
안녕하세요 @Pabluez, 네 대답했습니다. 아래를 참조하십시오. 응답이 지연되어 죄송합니다. 휴가로 바빴습니다.
— Anne
나는이 문서가 당신을 도울 것입니다 생각 prideparrot.com/blog/archive/2014/6/...
— VJAI
1
— ZIM

답변:

127

할 수있는 가장 좋은 방법은.

1. github에서 twitter-bootstrap을 포크하고 로컬로 복제합니다.

그들은 라이브러리 / 프레임 워크를 정말 빠르게 변경하고 있습니다 (내부적으로 갈라집니다. 일부는 라이브러리를 선호합니다. 페이지에로드 할 때 레이아웃을 변경하기 때문에 프레임 워크라고 말하고 싶습니다). 음 ... 포킹 / 복제를 사용하면 곧 출시 될 새 버전을 쉽게 가져올 수 있습니다.

2. bootstrap.css 파일을 수정하지 마십시오.

부트 스트랩을 업그레이드해야 할 때 삶이 복잡해질 것입니다 (그리고 그렇게해야 할 것입니다).

3. 자신 만의 CSS 파일을 만들고 원본 부트 스트랩을 원할 때마다 덮어 씁니다.

예를 들어 상단 표시 줄을 설정 color: black;했지만 흰색으로 바꾸면이 상단 표시 줄에 대한 새로운 매우 구체적인 선택기를 만들고 특정 상단 표시 줄에서이 규칙을 사용합니다. 예를 들어 테이블의 경우 <table class="zebra-striped mycustomclass">. 다음에 css 파일을 선언 bootstrap.css하면 원하는 것을 덮어 씁니다.

— Pabluez
소스
15
+1 좋은 답변입니다. 그의 세 번째 요점에 추가하기 위해 : 이전 클래스에 추가로 적용 할 새 클래스를 만들거나 변경하려는 속성을 덮어 쓰거나 추가 할 수 있습니다.
— Wex dec
그건 내가 mycustomcss으로 무엇을 의미했다 ... 난 얼룩말 줄무늬 (부트 스트랩 클래스) 이외는 mycustomclass하는거야, 편집 해요
— Pabluez
1
이것을 "새로운"덜 / 부끄럽게하는 방법에 대해 이것에 추가 할 수있는 것이 있습니까? 즉 : 어떻게 "부트 스트랩"스타일을 하위 클래스로 만들 수 있습니까? 모두 상속 + 증대. 나는 이것이 믹스 인인지, 확장인지, 아니면 ?? 멍청해서 죄송합니다.
— Alex Gray
1
+1 답변을 주셔서 감사합니다. 나는 이것을 해왔고 그것은 효과가 있지만 가장 지속 가능한 대답처럼 느껴지지 않습니다. 업데이트 된 bootstrap.css 파일을 받으면 변경 사항에 맞게 사용자 지정 재정의 클래스를 변경해야 할 수 있습니다. @alexgray처럼 less 또는 mixin으로 이것을 수행하는 방법을 이해하고 싶습니다. 또는 부트 스트랩을 재정의하지 않고도 스타일을 사용할 수 있도록 부트 스트랩이 적용되지 않은 샌드 박스를 만드는 더 나은 방법입니다. 누구든지 좋은 튜토리얼이 있다면 함께 전달하십시오
— Anne
2
자신의 CSS 파일에만 변경 사항을 추가하려는 경우 부트 스트랩을 포크하는 요점은 무엇입니까?
32

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을 사용자 지정하는 방법

— 짐
소스
Noice-새로운 사용자 정의 버튼의 배경, 테두리, 글꼴에 대한 사용자 정의 색상을 설정하는 것은 어떻습니까?
— digout
생성 된 CSS 파일이 약 160Kb (압축 된 130Kb) 인 것이 정상입니까? 예를 들어 기본 색상을 재정의하는 것이 가능합니까?
— Evgeny
@Zim 당신이 만든 테마 빌더에 감사드립니다!
— Kareem Jeiroudi
참고 : 컴파일 후에는 Autoprefixer를 사용해야합니다.
— kanlukasz
20

공식적으로 선호되는 방법은 이제 Less를 사용하고 bootstrap.css (less.js 사용)를 동적으로 재정의하거나 bootstrap.css (Node 또는 Less 컴파일러 사용)를 다시 컴파일하는 것입니다.

로부터 부트 스트랩 워드 프로세서 , 여기에 동적으로 bootstrap.css 스타일을 재정의하는 방법은 다음과 같습니다

최신 Less.js를 다운로드하고 해당 경로 (및 Bootstrap)를 <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

.less 파일을 다시 컴파일하려면 파일을 저장하고 페이지를 다시로드하면됩니다. Less.js는이를 컴파일하여 로컬 저장소에 저장합니다.

또는 사용자 정의 스타일로 새 bootstrap.css를 정적으로 컴파일하려는 경우 (프로덕션 환경의 경우) :

Node를 통해 LESS 명령 줄 도구를 설치하고 다음 명령을 실행합니다. 

$ lessc ./less/bootstrap.less > bootstrap.css
— 대칭
소스
이 :)이 선호하는 방법입니다
— Srivathsa
10

Pabluez의 답변이 12 월에 돌아 왔기 때문에 이제 부트 스트랩을 사용자 정의하는 더 좋은 방법이 있습니다.

사용 : Bootswatch 를 사용하여 bootstrap.css 생성

Bootswatch는 최신 버전 (부트 스트랩 디렉토리에 설치하는 모든 항목)에서 일반 Twitter 부트 스트랩을 빌드하지만 사용자 정의도 가져옵니다. 이를 통해 HTML에 대해 아무것도 변경하지 않고도 사용자 정의 CSS를 유지하면서 최신 버전의 Bootstrap을 쉽게 사용할 수 있습니다. 단순히 boostrap.css 파일을 흔들 수 있습니다.

— mdashx
소스
이것을 사용하는 가장 좋은 방법에 대해 자세히 설명해 주시겠습니까? 나는 bootswatch를 다운로드하고 grunt swatch : theme를 사용하여 내 CSS를 만들었지 만 여전히 어떤 파일을 어디에 넣어야하는지 의아해합니다. 업데이트 된 버전의 부트 스트랩 또는 부트 워치 테마를 다운로드하여 사용할 수 있지만 여전히 내 사용자 지정 변수를 사용할 수있는 상황에 도달하려고합니다. (그게 차이가 나는 경우 VisualStudio2013 Pro에서 작업하고 있습니다). 컴파일을 위해 자바 스크립트를 사용하고 싶지 않습니다. 지금은 빌드 명령을 실행해도 괜찮습니다. 나중에 자동화 할 좋은 방법을 찾아 보겠습니다. 감사합니다 Mark
— mark1234 2014 년
5

다음에서 부트 스트랩 템플릿을 사용할 수 있습니다.

http://www.initializr.com/

모든 부트 스트랩 .less 파일을 포함합니다. 그런 다음 원하는대로 변수를 변경 / 업데이트하면 CSS가 자동으로 컴파일됩니다. 배포 할 때 적은 파일을 css로 컴파일하십시오.

— 톰
소스
3

내 생각에 가장 좋은 옵션은 bootstrap.less, 사용자 정의 variables.less 파일 및 자체 규칙을 포함한 사용자 정의 LESS 파일을 컴파일하는 것입니다.

  1. 루트 폴더에 부트 스트랩 복제 : git clone https://github.com/twbs/bootstrap.git
  2. 이름을 "부트 스트랩"으로 바꿉니다.
  3. package.json 파일 생성 : https://gist.github.com/jide/8440609
  4. Gruntfile.js 생성 : https://gist.github.com/jide/8440502
  5. "less"폴더 만들기
  6. bootstrap / less / variables.less를 "less"폴더에 복사합니다.
  7. 글꼴 경로 변경 : @icon-font-path: "../bootstrap/fonts/";
  8. bootstrap.less 및 사용자 정의 variables.less 파일을 가져 오는 "less"폴더에 사용자 정의 style.less 파일을 작성하십시오. https://gist.github.com/jide/8440619
  9. 운영 npm install
  10. 운영 grunt watch

이제 원하는 방식으로 변수를 수정하고, 사용자 정의 style.less 파일에서 부트 스트랩 규칙을 재정의 할 수 있으며, 언젠가 부트 스트랩을 업데이트하려는 경우 전체 부트 스트랩 폴더를 바꿀 수 있습니다!

편집 :이 기술을 사용하여 부트 스트랩 상용구를 만들었습니다 : https://github.com/jide/bootstrap-boilerplate

— Jide
소스
3

최근 에 Udacity 에서 어떻게했는지에 대한 게시물을 썼습니다. 몇 년 동안 . 이 방법은 우리가 원할 때마다 병합 충돌, 작업 폐기 등없이 부트 스트랩을 업데이트 할 수 있음을 의미합니다.

게시물은 예제를 통해 더 자세히 설명하지만 기본 아이디어는 다음과 같습니다.

  • 부트 스트랩의 원래 복사본을 유지하고 외부에서 덮어 씁니다.
  • 자신의 변수를 포함하도록 하나의 파일 (부트 스트랩의 variables.less)을 수정합니다.
  • 사이트 파일을 @include bootstrap.less로 만든 다음 재정의하십시오.

이것은 LESS를 사용하고 클라이언트에 전달하기 전에 CSS로 컴파일하는 것을 의미하지만 (클라이언트 쪽이 까다 롭고 일반적으로 피합니다) 유지 관리 / 업그레이드 가능성에 매우 좋으며 컴파일을 줄이는 것은 정말 쉽습니다. . 링크 된 github 코드에는 grunt를 사용하는 예제가 있지만이를 달성하는 방법은 여러 가지가 있습니다. 심지어 GUI도 가능합니다.

이 솔루션을 사용하면 예제 문제는 다음과 같습니다.

  • 변수에서 @ navbar-inverse-bg로 탐색 모음 색상을 변경하십시오. (부트 스트랩이 아님)
  • 자신 만의 탐색 모음 스타일을 bootstrap_overrides.less에 추가하고 필요한 모든 것을 덮어 씁니다.
  • 행복.

부트 스트랩을 업그레이드 할 때가되면 원래의 부트 스트랩 복사본을 교체하기 만하면 모든 것이 계속 작동합니다 (부트 스트랩이 주요 변경 사항을 적용하는 경우 재정의를 업데이트해야하지만 어쨌든 그렇게해야합니다).

둘러보기가 포함 된 블로그 게시물은 여기 입니다.

github의 코드 예제는 여기에 있습니다 .

— 베타 오르 버스트
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.