Bootstrap CSS 스타일을 재정의하려면 어떻게해야합니까?

234

bootstrap.css웹 사이트에 맞게 수정해야합니다 . 직접 custom.css수정하는 대신 별도의 파일 을 만드는 것이 낫 습니다. 업데이트 bootstrap.css해야하는 이유 bootstrap.css는 모든 수정 사항을 다시 포함시키는 데 어려움을 겪을 것입니다. 이 스타일에 대한로드 시간을 희생 할 것이지만 재정의하는 몇 가지 스타일에는 무시할 수 있습니다.

앵커 / 클래스의 스타일을 제거bootstrap.css 하도록 대체하려면 어떻게해야 합니까? 예를 들어에 대한 모든 스타일 규칙을 제거하려는 경우 :legend

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

에서 모든 것을 삭제할 수는 bootstrap.css있지만 CSS 재정의에 대한 모범 사례에 대한 이해가 정확하다면 대신 어떻게해야합니까?

분명히하기 위해, 모든 범례 스타일을 제거하고 부모의 CSS 값을 사용하고 싶습니다. Pranav의 답변을 결합하면 다음을 수행합니까?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(나는 다음과 같은 것을 할 수있는 방법이 있기를 바랐습니다.)

legend {
  clear: all;
}

html css twitter-bootstrap

— 알렉스
소스

491

!important나중에 자신의 스타일을 재정의하려는 경우가 있으므로 사용 하는 것은 좋은 옵션이 아닙니다. CSS 우선 순위가 남습니다.

기본적으로 모든 선택기는 고유 한 숫자 '중량'을 갖습니다.

ID 100 점
클래스 및 의사 클래스 10 점
태그 선택기 및 유사 요소의 경우 1 포인트
참고 : 요소 에 자동으로이기는 인라인 스타일이있는 경우 (1000 포인트)

두 가지 선택기 스타일 중 브라우저는 항상 더 많은 무게를 가진 스타일을 선택합니다. 스타일 시트의 순서는 우선 순위가 짝수 인 경우에만 중요합니다. 따라서 Bootstrap을 재정의하기가 쉽지 않습니다.

부트 스트랩 소스를 검사하고 특정 스타일이 정확히 정의 된 방법을 찾은 다음 해당 선택기를 복사하여 요소의 우선 순위를 동일하게 지정할 수 있습니다. 그러나 우리는 과정에서 모든 부트 스트랩 단맛을 풀어줍니다.

이를 극복하는 가장 쉬운 방법은 다음과 같이 페이지의 루트 요소 중 하나에 임의의 추가 ID를 할당하는 것입니다. <body id="bootstrap-overrides">

이런 식으로 CSS 선택기 앞에 ID를 붙여 요소에 100 점의 가중치를 즉시 추가하고 부트 스트랩 정의를 재정의 할 수 있습니다.

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

— 밀수업자
소스

ID는 한 번만 사용할 수 있기 때문에 왜 #bootstrap-overrides수업을 하지 않습니까?

— chharvey

2

@chharvey : 더 나은 계산이 필요하기 때문에. 이 예제에서 클래스라면 prio 11이되고 css 정의가 bootstrap.css 다음에 오면 우리는 갈 것입니다. 그러나 이것은 꽤 가깝고 prio의 큰 시간을 늘리는 id로 설정하므로 prio를 계산하고 항상 올바른지 여부를 테스트하는 것에 대해 걱정할 필요가 없습니다. 기본값을 확실하게 덮어 쓰려면 id를 사용하면 더 쉽습니다.

— hogan

그냥 내 하루를 만들었습니다. 나는 이것을 알고 여전히 내 스타일이 해석되지 않는 이유를 알아 내려고 노력하고 있습니다.

— hogan

3

언급 한 점 (id의 경우 100, 클래스 / 의사 클래스의 경우 10, 태그 선택기 / 의사 요소의 경우 1)이 리터럴입니까, 아니면이 예제에서 해당 값을 만들었습니까?

— Kyle Vassella

2

귀하의 설명은 훌륭하지만 CSS를 처음 접하는 사람에게 설명하는 방법으로 의미가 있지만 오해의 소지가 있습니다. 언급 한 정확한 이름은 css specificity로, 각 CSS 선택기의 "무게"를 정의합니다. 그것에 대해 몇 가지 자세한 내용 : css-tricks.com/specifics-on-css-specificity/...

— 아드리아누

85

html의 헤드 섹션에서 custom.css를 bootstrap.css 아래에 배치하십시오.

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

그런 다음 custom.css에서 재정의하려는 요소에 대해 정확히 동일한 선택기를 사용해야합니다. 의 경우 legend그것은 단지 숙박 legend당신의 custom.css의 부트 스트랩은 선택자에게 더 구체적인이 없어 때문이다.

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

그러나 경우에 h1예를 들어, 당신은 같은 좀 더 구체적인 선택기를 돌봐해야 .jumbotron h1하기 때문에

h1 {
  line-height: 2;
  color: #f00;
}

무시하지 않습니다

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

다음은 CSS 선택기의 특수성에 대한 유용한 설명입니다. 어떤 스타일 규칙이 요소에 적용되는지 정확히 이해하려면 이해해야합니다. http://css-tricks.com/specifics-on-css-specificity/

다른 모든 것은 복사 / 붙여 넣기 및 편집 스타일의 문제입니다.

— 마르쿠스 코틀 렌더
소스

28

기본 스타일 시트의 일부를 재정의하므로로드 시간에 큰 영향을 미치지 않습니다.

개인적으로 따르는 모범 사례는 다음과 같습니다.

기본 CSS 파일 뒤에는 항상 사용자 정의 CSS를로드합니다 (응답하지 않음).
!important가능하면 사용하지 마십시오 . 기본 CSS 파일에서 몇 가지 중요한 스타일을 무시할 수 있습니다.
미디어 쿼리를 잃지 않으려면 custom.css 뒤에 항상 bootstrap-responsive.css를로드하십시오. -반드시 지켜야합니다
필요한 속성을 수정하는 것이 좋습니다 (모두는 아님).

— 라훌 파틸
소스

10

bootstrap-responsive.css더 이상 존재하지 않기 때문에 이것이 여전히 사실입니까, 아니면 더 이상 관련이 없습니까?

— 숀 윌슨

20

bootstrap.css 아래의 마지막 항목으로 custom.css 파일을 링크하십시오. Custom.css 스타일 정의는 bootstrap.css를 재정의합니다.

HTML

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

custom.css에서 범례의 모든 스타일 정의를 복사하고 변경하십시오 (예 : margin-bottom : 5px;-이것은 overrider margin-bottom : 20px;)

— 파라 마시 반
소스

네, 벌써 했어요 죄송합니다. 질문이 명확하지 않습니다. 내 질문은 custom.css에서 bootstrap.min.css의 스타일을 재정의하기 위해 수행 할 작업을 묻고있었습니다.

— Alex

bootstrap-theme.min.css도 사용중인 경우 어떻게합니까?

— Quasaur

min css

— 로도

5

legend부트 스트랩에 정의 된 스타일을 재설정하려면 CSS 파일에서 다음을 수행하십시오.

legend {
  all: unset;
}

참조 : https://css-tricks.com/almanac/properties/a/all/

CSS의 all 속성은 텍스트 방향을 제어하는 direction 및 unicode-bidi 속성을 제외하고 선택한 요소의 모든 속성을 재설정합니다.

가능한 값은 initial, inherit& unset입니다.

참고 : clear속성은 float( https://css-tricks.com/almanac/properties/c/clear/ ) 와 관련하여 사용됩니다

— 비벡 아탈리
소스

3

다소 큰 변경을 계획하는 경우 부트 스트랩 자체에서 직접 변경하고 재 구축하는 것이 좋습니다. 그러면로드되는 데이터의 양을 줄일 수 있습니다.

빌드 가이드 는 GitHub의 부트 스트랩을 참조하십시오 .

— 빅터 헤그 비스트
소스

필요한 사용자 지정 정도에 따라 가장 간단한 옵션이 될 수 있습니다. 예를 들어, 테마 색상을 변경하려면 템플릿 변경 및 사용자 지정 빌드를 선택하기 위해 너무 많은 재정의가 필요합니다.

— David Kirkland

@alex 범프 소스 및 재 구축?

— Victor Häggqvist

3

https://bootstrap.themes.guide/how-to-customize-bootstrap.html을 참조 하십시오

간단한 CSS 재정의를 위해 bootstrap.css 아래에 custom.css를 추가 할 수 있습니다

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

보다 광범위한 변경을 위해서는 SASS가 권장되는 방법입니다.

나만의 커스텀을 만드세요.
custom.scss 변경 후 부트 스트랩 가져 오기

예를 들어, 본문 배경색을 밝은 회색 #eeeeee로 변경하고 파란색 기본 문맥 색상을 Bootstrap의 $ purple 변수로 변경합니다.

/* custom.scss */    

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

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

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

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

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

— 코냑
소스

2

조금 늦었지만 내가 한 일은 루트에 클래스를 추가 한 div다음 사용자 정의 스타일 시트의 모든 부트 스트랩 요소를 확장합니다.

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

— mr5
소스

-1

콘솔의 대상 버튼을 검사하십시오.
요소 탭으로 이동 한 다음 코드 위에 마우스를 놓고 부트 스트랩에서 사용하는 기본 ID 또는 클래스를 찾으십시오.
jQuery / javascript를 사용하여 함수를 호출하여 스타일 / 텍스트를 덮어 씁니다.

이 예를보십시오 :

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

— 아난드 차우 타리
소스

-1

나는 (부트 스트랩 4) 자신의 CSS를 뒤에두고 있음을 알았습니다. bootstrap.css .js가 가장 좋은 솔루션 .

변경하려는 항목 (요소 검사)을 찾아 정확히 같은 선언을 사용하면 재정의됩니다.

이것을 알아내는 데 약간의 시간이 걸렸습니다.

— 헨리
소스

-3

범례에 ID를 부여하고 CSS를 적용하십시오. legend ()에 id hello를 추가하는 것처럼 CSS는 다음과 같습니다.

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

— 아마르 가우 르
소스

-9

css 대신 jquery css를 사용하십시오. . . jquery는 부트 스트랩 CSS보다 우선 순위가 높습니다 ...

예 :

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

— 아 jee 트 산왈
소스

6

HTML은 구조를 제공하는 데 사용되고 CSS는 스타일을 제공하는 데 사용해야하며, 자바 스크립트 (jQuery 포함)는 대화 형 기능을 제공하는 데만 사용해야합니다. jQuery를 사용하여 스타일을 재정의하는 것은 훌륭한 아키텍처의 원칙과 상반되며 6 개월 후 코드 작업을 시도하는 모든 사람에게는 매우 혼란 스러울 것입니다.

— Stephen R. Smith