[html] Bootstrap CSS 스타일을 재정의하려면 어떻게해야합니까?
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;
}답변
!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;
}답변
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/
다른 모든 것은 복사 / 붙여 넣기 및 편집 스타일의 문제입니다.
답변
기본 스타일 시트의 일부를 재정의하므로로드 시간에 큰 영향을 미치지 않습니다.
개인적으로 따르는 모범 사례는 다음과 같습니다.
- 기본 CSS 파일 뒤에는 항상 사용자 정의 CSS를로드합니다 (응답하지 않음).
!important가능하면 사용하지 마십시오 . 기본 CSS 파일에서 몇 가지 중요한 스타일을 무시할 수 있습니다.- 미디어 쿼리를 잃지 않으려면 custom.css 뒤에 항상 bootstrap-responsive.css를로드하십시오. -반드시 지켜야합니다
- 필요한 속성을 수정하는 것이 좋습니다 (모두는 아님).
답변
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;)
답변
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/ ) 와 관련하여 사용됩니다
답변
다소 큰 변경을 계획하는 경우 부트 스트랩 자체에서 직접 변경하고 재 구축하는 것이 좋습니다. 그러면로드되는 데이터의 양을 줄일 수 있습니다.
빌드 가이드 는 GitHub의 부트 스트랩을 참조하십시오 .
답변
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";
