Làm cách nào để ghi đè các kiểu CSS Bootstrap?

234

Tôi cần phải sửa đổi bootstrap.cssđể phù hợp với trang web của tôi. Tôi cảm thấy tốt hơn khi tạo một custom.csstệp riêng thay vì sửa đổi bootstrap.csstrực tiếp, một lý do là nên bootstrap.csscập nhật, tôi sẽ cố gắng bao gồm lại tất cả các sửa đổi của mình. Tôi sẽ hy sinh một số thời gian tải cho các kiểu này, nhưng nó không đáng kể đối với một vài kiểu tôi đang ghi đè.

Hw tôi có ghi đè bootstrap.cssđể tôi loại bỏ kiểu neo / lớp không? Ví dụ: nếu tôi muốn xóa tất cả các quy tắc tạo kiểu cho 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;
}

Tôi chỉ có thể xóa tất cả những thứ đó bootstrap.css, nhưng nếu sự hiểu biết của tôi về các thực tiễn tốt nhất về ghi đè CSS là chính xác, tôi nên làm gì để thay thế?

Để rõ ràng, tôi muốn xóa tất cả các kiểu chú giải đó và sử dụng các giá trị CSS của cha mẹ. Vì vậy, kết hợp câu trả lời của Pranav, tôi sẽ làm như sau?

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;
}

(Tôi đã hy vọng có một cách để làm một cái gì đó như sau :)

legend {
  clear: all;
}
html  css  twitter-bootstrap 
— Alex
nguồn

Câu trả lời:

491

Sử dụng !importantkhông phải là một lựa chọn tốt, vì rất có thể bạn sẽ muốn ghi đè lên phong cách của riêng bạn trong tương lai. Điều đó để lại cho chúng tôi các ưu tiên CSS.

Về cơ bản, mọi bộ chọn đều có 'trọng số' riêng:

  • 100 điểm cho ID
  • 10 điểm cho lớp và giả lớp
  • 1 điểm cho bộ chọn thẻ và phần tử giả
  • Lưu ý: Nếu phần tử có kiểu dáng nội tuyến tự động giành chiến thắng (1000 điểm)

Trong số hai kiểu chọn, trình duyệt sẽ luôn chọn kiểu có trọng lượng lớn hơn. Thứ tự các bảng định kiểu của bạn chỉ quan trọng khi các ưu tiên là chẵn - đó là lý do tại sao không dễ dàng ghi đè Bootstrap.

Tùy chọn của bạn là kiểm tra các nguồn Bootstrap, tìm hiểu chính xác cách xác định một số kiểu cụ thể và sao chép bộ chọn đó để phần tử của bạn có mức độ ưu tiên như nhau. Nhưng chúng tôi hơi mất tất cả sự ngọt ngào của Bootstrap trong quá trình này.

Cách dễ nhất để khắc phục điều này là gán ID tùy ý bổ sung cho một trong các thành phần gốc trên trang của bạn, như thế này: <body id="bootstrap-overrides">

Bằng cách này, bạn có thể chỉ cần thêm tiền tố vào bất kỳ bộ chọn CSS nào bằng ID của mình, ngay lập tức thêm 100 điểm trọng lượng vào phần tử và ghi đè các định nghĩa Bootstrap:

/* 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;
}
— người buôn lậuFlynn
nguồn
vì ID chỉ có thể được sử dụng một lần, tại sao không tạo #bootstrap-overridesmột lớp?
— chharvey
2
@chharvey: vì cuối cùng bạn sẽ phải tính toán tốt hơn. nếu nó là một lớp trong ví dụ này thì nó sẽ là tiên tri 11 và nếu định nghĩa css sẽ là sau bootstrap.css thì chúng ta sẽ tốt hơn. Tuy nhiên, điều này sẽ khá gần và đặt nó như một id giúp tăng thời gian lớn, chúng ta không phải lo lắng về việc tính toán tiên nghiệm và kiểm tra hết sức xem chúng ta có luôn đúng hay không. dễ dàng hơn với một id nếu bạn muốn ghi đè mặc định.
— hogan
chỉ làm cho ngày của tôi. tôi biết điều này và vẫn gặp khó khăn khi cố gắng tìm hiểu tại sao phong cách của tôi không được giải thích.
— hogan
3
Các điểm bạn đã đề cập (100 cho id, 10 cho các lớp / lớp giả, 1 cho các bộ chọn thẻ / phần tử giả) theo nghĩa đen, hoặc bạn chỉ đưa ra các giá trị đó cho ví dụ này?
— Kyle Vassella
2
Giải thích của bạn là tốt, nó có ý nghĩa như một cách để giải thích nó cho một người mới biết css, nhưng là sai lệch. Tên chính xác cho những gì bạn đã đề cập là css specificityxác định "trọng số" của mỗi bộ chọn css. Ở đây một số chi tiết khác về nó: css-tricks.com/specifics-on-css-specificity/ khăn
— Adriano
85

Trong phần đầu của html, hãy đặt custom.css bên dưới bootstrap.css.

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

Sau đó, trong custom.css, bạn phải sử dụng cùng một bộ chọn chính xác cho phần tử bạn muốn ghi đè. Trong trường hợp legendnó chỉ nằm legendtrong custom.css của bạn vì bootstrap không có bất kỳ bộ chọn nào cụ thể hơn.

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

Nhưng trong trường hợp h1ví dụ, bạn phải quan tâm đến các công cụ chọn cụ thể hơn như .jumbotron h1bởi vì

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

sẽ không ghi đè

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

Dưới đây là một giải thích hữu ích về tính đặc hiệu của các bộ chọn css mà bạn cần hiểu để biết chính xác quy tắc kiểu nào sẽ áp dụng cho một phần tử. http://css-tricks.com/specifics-on-css-specificity/

Mọi thứ khác chỉ là vấn đề sao chép / dán và chỉnh sửa kiểu.

— Markus Kottländer
nguồn
28

Nó sẽ không ảnh hưởng đến thời gian tải nhiều vì bạn đang ghi đè các phần của biểu định kiểu cơ sở.

Dưới đây là một số thực hành tốt nhất mà cá nhân tôi làm theo:

  1. Luôn tải CSS tùy chỉnh sau tệp CSS cơ sở (không phản hồi).
  2. Tránh sử dụng !importantnếu có thể. Điều đó có thể ghi đè một số kiểu quan trọng từ các tệp CSS cơ sở.
  3. Luôn tải bootstrap-responsive.css sau custom.css nếu bạn không muốn mất các truy vấn phương tiện. - PHẢI THEO
  4. Thích sửa đổi các thuộc tính cần thiết (không phải tất cả).
— La Mã Patil
nguồn
10
vì bootstrap-responsive.csskhông còn tồn tại, điều này vẫn còn đúng, hay điều này không còn phù hợp?
— Shaun Wilson
20

Liên kết tệp custom.css của bạn như là mục cuối cùng bên dưới bootstrap.css. Các định nghĩa kiểu Custom.css sẽ ghi đè bootstrap.css

Html

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

Sao chép tất cả các định nghĩa kiểu của chú giải trong custom.css và thực hiện các thay đổi trong đó (như lề-bottom: 5px; - Điều này sẽ ghi đè lề-bottom: 20px;)

— Paramasivan
nguồn
Vâng, tôi đã làm điều đó rồi. Xin lỗi câu hỏi của tôi không rõ ràng. Câu hỏi của tôi là hỏi phải làm gì trong custom.css để ghi đè các kiểu từ bootstrap.min.css.
— Alex
Nếu tôi cũng đang sử dụng bootstrap-theme.min.css thì sao?
— Quasaur
Làm việc cho tôi, ngay cả với min css
— mimi
5

Để đặt lại các kiểu được xác định cho legendtrong bootstrap, bạn có thể thực hiện như sau trong tệp css của mình:

legend {
  all: unset;
}

Tham chiếu: https://css-tricks.com/almanac/properIES/a/all/

Tất cả các thuộc tính trong CSS đặt lại tất cả các thuộc tính của phần tử được chọn, ngoại trừ các thuộc tính hướng và unicode-pricei điều khiển hướng văn bản.

Các giá trị có thể là : initial, inherit& unset.

Lưu ý bên lề: cleartài sản được sử dụng liên quan đến float( https://css-tricks.com/almanac/properIES/c/clear/ )

— Vivek Athalye
nguồn
3

Nếu bạn đang có kế hoạch thực hiện bất kỳ thay đổi khá lớn nào, có thể là một ý tưởng tốt để thực hiện chúng trực tiếp trong bootstrap và xây dựng lại nó. Sau đó, bạn có thể giảm lượng dữ liệu được tải.

Vui lòng tham khảo Bootstrap trên GitHub để biết hướng dẫn xây dựng.

— Victor Häggqvist
nguồn
Tùy thuộc vào mức độ tùy chỉnh cần thiết, đây có thể là tùy chọn đơn giản nhất. Ví dụ: thay đổi bất kỳ màu chủ đề nào sẽ yêu cầu rất nhiều phần ghi đè mà tôi muốn chọn thay đổi mẫu và xây dựng tùy chỉnh.
— David Kirkland
@alex Bump nguồn và xây dựng lại?
— Victor Häggqvist
3

Xem https://bootstrap.theme.guide/how-to-customize-bootstrap.html

  1. Đối với Ghi đè CSS đơn giản, bạn có thể thêm một custom.css bên dưới bootstrap.css

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

  2. Đối với những thay đổi sâu rộng hơn, SASS là phương pháp được đề xuất.

    • tạo custom.scss của riêng bạn
    • nhập Bootstrap sau khi thay đổi trong custom.scss

    • Ví dụ: hãy thay đổi màu nền của cơ thể thành #eeeeee màu xám nhạt và thay đổi màu theo ngữ cảnh chính màu xanh thành biến $ tím của Bootstrap ...

      /* 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";
— konyak
nguồn
2

Hơi muộn một chút nhưng những gì tôi đã làm là tôi đã thêm một lớp vào thư mục gốc divsau đó mở rộng mọi thành phần bootstrap trong biểu định kiểu tùy chỉnh của tôi:

.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>
— m5
nguồn
-1
  1. Kiểm tra nút mục tiêu trên bàn điều khiển.
  2. Chuyển đến tab phần tử, sau đó di chuột qua mã và chắc chắn tìm thấy id hoặc lớp mặc định được sử dụng bởi bootstrap.
  3. Sử dụng jQuery / javascript để ghi đè lên kiểu / văn bản bằng cách gọi hàm.

Xem ví dụ này:

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

Tôi phát hiện ra rằng (bootstrap 4) đặt CSS của riêng bạn phía sau bootstrap.css và .js là giải pháp tốt nhất.

Tìm mục bạn muốn thay đổi (kiểm tra phần tử) và sử dụng chính xác cùng một khai báo sau đó nó sẽ ghi đè.

Tôi phải mất một ít thời gian để tìm ra điều này.

— Henry
nguồn
-3

Cung cấp ID cho huyền thoại và áp dụng css. Giống như thêm id xin chào vào huyền thoại () css là dưới dạng follw:

#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;
}
— Bò tót Amar
nguồn
-9

Sử dụng css jquery thay vì css. . . jquery được ưu tiên hơn bootstrap css ...

ví dụ

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


);

 instead of

.mnu
{

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

}
— Ajeet Sankhwal
nguồn
6
HTML nên được sử dụng để cung cấp cấu trúc, CSS nên được sử dụng để cung cấp kiểu và Javascript (bao gồm cả jQuery) chỉ nên được sử dụng để cung cấp tính tương tác. Sử dụng jQuery để ghi đè các kiểu là đối nghịch với các nguyên tắc của kiến ​​trúc tốt và sẽ vô cùng khó hiểu với bất kỳ ai đang cố gắng làm việc với mã 6 tháng kể từ bây giờ.
— Stephen R. Smith
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.