부트스트랩 CSS 스타일을 재정의하려면 어떻게 해야 합니까?
는 수해야합니를 수정해야 .bootstrap.css내 웹사이트에 맞게.따로 만드는 게 좋을 것 같아요.custom.css수정하는 합니다.bootstrap.css 한 는 직적으로이, 한가는그래한것다다입니는야유접지다▁directly▁being▁should것▁that.bootstrap.css업데이트를 받으십시오. 모든 수정 사항을 다시 포함하려고 하면 어려움을 겪을 것입니다.이 스타일들을 위해 약간의 로딩 시간을 희생하겠지만, 제가 무시하는 몇 가지 스타일들에 대해서는 무시할 수 있습니다.
I override 재정방법는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 값을 사용하고 싶습니다.그래서 프라나브의 대답을 종합하면, 제가 다음과 같이 할 수 있을까요?
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 는 입 하 당 로 추 가 임 의 같 은 다 음 루 페 과 요 가 트 방 하 하 는<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의 헤드 섹션에서 bootstrap.css 아래에 custom.css를 배치합니다.
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
그런 다음 custom.css에서 재정의할 요소에 대해 동일한 선택기를 사용해야 합니다.의 legend그냥 그대로야.legend부트스트랩에 더 구체적인 선택기가 없기 때문에 custom.dll에 있습니다.
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를 로드합니다. - 반드시 따라야 합니다.
- 필요한 속성(일부는 아님)을 수정하는 것을 선호합니다.
custom.css 파일을 bootstrap.css 아래의 마지막 항목으로 연결합니다.사용자 지정.css 스타일 정의가 bootstrap.css를 재정의합니다.
HTML
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
custom.css에서 범례의 모든 스타일 정의를 복사하고 범례에서 변경합니다(예: 여백 아래:5px; -- 이것은 여백 아래:20px;).
2021년 업데이트 - 부트스트랩 4 및 부트스트랩 5
부트스트랩 CSS를 재정의할 때 따라야 하는 세 가지 규칙이 있습니다.
- /수입
bootstrap.cssCSS 규칙 이전(재지정) - 부트스트랩 CSS 선택기보다 더 많은 CSS 특이성(또는 동등)을 사용
- 규칙을 재정의하는 경우 !important 특성을 사용하여 규칙을 강제로 적용합니다.만약 당신이 규칙 1과 2를 따른다면!important를 종종 포함하는 부트스트랩 유틸리티 클래스를 사용하는 경우를 제외하고는 이것이 필요하지 않습니다.
의 예, 재는의지야합에 넣어야 합니다.styles.css(또는)custom.css) 파일을 작성하여 다음과 같이 합니다.bootstrap.css수정되지 않은 상태로 유지됩니다.이렇게 하면 재정의에 영향을 주지 않고 부트스트랩 버전을 쉽게 업그레이드할 수 있습니다.에 대한 입니다.styles.css다음은 다음입니다.bootstrap.css오버라이드가 작동하도록 합니다.
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
사용자 지정 CSS에 필요한 변경 사항을 추가하기만 하면 됩니다.예:
legend {
display: block;
width: inherit;
padding: 0;
margin-bottom: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
white-space: initial;
}
참고: 부트스트랩 유틸리티 클래스 중 하나를 재정의하지 않는 한 CSS 재정의에 사용하는 것은 좋은 방법이 아닙니다.CSS 특수성은 항상 한 CSS 클래스에 대해 작동하여 다른 클래스를 재정의합니다.bootstrap.css와 같거나 더 구체적인 CSS 선택기를 사용해야 합니다.
예를 들어 Bootstrap 4 어두운 Navbar 링크 색상을 생각해 보십시오.여기 있습니다.bootstrap.css...
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
따라서 Navbar 링크 색상을 재정의하려면 동일한 선택기를 사용하거나 다음과 같은 보다 구체적인 선택기를 사용할 수 있습니다.
#mynavbar .navbar-nav .nav-link {
color: #ffcc00;
}
예: https://codeply.com/p/FyQapHImHg
CSS 선택기가 같을 때, 마지막 선택기가 우선하며, 이것이 바로 그 이유입니다.styles.css다음을 따라야 합니다.bootstrap.css.
정의된 스타일을 재설정하려면legend부트스트랩에서, 당신은 당신의 css 파일에서 다음을 할 수 있습니다.
legend {
all: unset;
}
참조: https://css-tricks.com/almanac/properties/a/all/
CSS의 all 속성은 텍스트 방향을 제어하는 방향 및 유니코드-bidi 속성을 제외하고 선택한 요소의 모든 속성을 재설정합니다.
가능한 값은 다음과 같습니다.initial,inherit&unset.
참고 사항:clear속성이 다음과 관련하여 사용됩니다.float(https://css-tricks.com/almanac/properties/c/clear/)
https://bootstrap.themes.guide/사용자 지정 방법-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 생성
- 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";
조금 늦었지만 제가 한 것은 루트에 클래스를 추가한 것입니다.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>
큰 변경을 계획하고 있는 경우 부트스트랩 자체에서 직접 변경한 후 재구축하는 것이 좋습니다.그런 다음 로드되는 데이터 양을 줄일 수 있습니다.
빌드 가이드는 GitHub의 부트스트랩을 참조하십시오.
는 ( 4)를 뒤에 .bootstrap.css해결책입니다.js가 가장 좋은 해결책입니다.
변경할 항목(검사 요소)을 찾아 동일한 선언을 사용하면 재정의됩니다.
이걸 알아내는 데 시간이 좀 걸렸습니다.
루비 온 레일즈 사용자들을 위해--
응용 프로그램 CSS 파일에서 부트스트랩 파일이 먼저 언급되었는지 확인하고 사용자 정의 CSS 스타일시트가 먼저 언급되었는지 확인합니다.이렇게 하면 당신이 작성한 후자의 CSS 코드가 전자를 덮어씁니다.필요한 경우에도 !중요 사용
*= require 'bootstrap.min'
*= require_self
*= require 'name_of_your_stylesheet'
- 콘솔의 대상 버튼을 검사합니다.
- 요소 탭으로 이동한 다음 코드 위에 마우스를 올려 놓고 부트스트랩에서 사용하는 기본 ID 또는 클래스를 찾으십시오.
- jQuery/javascript를 사용하여 함수를 호출하여 스타일/텍스트를 덮어씁니다.
다음 예를 참조하십시오.
$(document).ready(function(){
$(".dropdown-toggle").css({
"color": "#212529",
"background-color": "#ffc107",
"border-color": "#ffc107"
});
$(".multiselect-selected-text").text('Select Tags');
});
범례에 ID를 부여하고 CSS를 적용합니다.add id hello to legend()처럼 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;
}
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;
}
언급URL : https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles
'code' 카테고리의 다른 글
| iOS 개인 API 설명서 (0) | 2023.07.27 |
|---|---|
| 소켓에 연결된 소켓/클라이언트 목록을 가져오려면 어떻게 해야 합니까?IO? (0) | 2023.07.27 |
| Oracle과 HSQLDB ROWNUM의 호환성 (0) | 2023.07.27 |
| ActiveRoute(예: Params) 관찰 항목의 구독을 취소해야 합니까? (0) | 2023.07.27 |
| SYS_REFCURSOR에 동적 SQL 문 실행 (0) | 2023.07.27 |