CSS Bootstrap ghi đè CSS của riêng tôi

Question

Tôi đang cố tạo nút chia nhỏ trong trang web của mình (ASPNET WebForms). Cho đến nay, việc thực hiện nút chia nhỏ duy nhất mà tôi thích là một từ Bootstrap. Tôi không sử dụng bất kỳ tính năng nào khác trong khuôn khổ của họ. Tuy nhiên, ngay sau khi tôi chèn:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 

Css của riêng tôi là một mớ hỗn độn. Tôi đã cố gắng để cô lập chỉ các lớp tôi sẽ cần cho splitbutton, nhưng tôi đã không thể làm điều đó thành công.

Đây là mã html của tôi cho splitbutton với các lớp requiered

<div class="btn-group"> 
          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button> 
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Enviar con notificaciones</a></li> 
          </ul> 
        </div> 

Không ai biết một cách để cô lập các lớp học mong muốn? Hoặc có thể được điểm cho tôi để thực hiện khác của một splitbutton đó là tương tự như này và cross-trình duyệt? Tôi googled rất nhiều nhưng một trong những chỉ có thể sử dụng tôi tìm thấy là bootstrap.

Answer 1

Quy tắc chung của ngón tay cái. Luôn đặt bảng định kiểu với các quy tắc bạn muốn có thẩm quyền nhất cuối cùng. Bạn có thể có

<link rel="stylesheet" href="/css/mystyles.css"> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 

Vì vậy, bất kỳ phong cách khai báo trong css bootstrap sẽ ghi đè lên bạn. thay vào đó hãy thử

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/css/mystyles.css"> 

Bằng cách này, quy tắc trong biểu định kiểu của bạn được ưu tiên hơn.

Ngoài ra, bạn có thể nên sử dụng phiên bản rút gọn của bootstrap để bạn có thể loại bỏ mọi lớp xung đột dễ dàng hơn.

Answer 2

Bạn hãy vào Customizer trên getbootstrap.com http://getbootstrap.com/customize/

Chuyển đổi những thứ bạn cần:

Sau đó, bạn tải về nó.

Bạn mở nó lên. Xem các kiểu cơ sở và kích thước hộp toàn cục: border-box.

Hoặc bạn thay đổi tất cả CSS để làm việc với kích thước hộp: hộp biên giới (google it) hoặc bạn đặt nó vào: trước, sau và phần tử trên tất cả css bootstrap mà bạn cần cho biểu mẫu, nút và menu thả xuống (chúng hoạt động cùng nhau).

Answer 3

Như đã đề cập trong các giải pháp khác trên trang này, có nhiều cách như:

1. Tạo css tùy chỉnh bootstrap từ trang web bootstrap
2. Đặt phong cách tùy chỉnh của bạn mà bạn không muốn bootstrap để ghi đè lên, sau các thẻ kiểu bootstrap trên trang

Theo kinh nghiệm của tôi, tạo một bootstrap tùy chỉnh hoặc chỉnh sửa để loại bỏ các lớp học không theo yêu cầu hoặc quy tắc kiểu không thực tế. Điều này là bởi vì khi một phiên bản mới hơn của bootstrap là ra, bạn có thể cần phải đi qua các thủ tục rườm rà một lần nữa. Thay vào đó, bạn có thể tiếp tục ghi đè kiểu bootstrap với kiểu của riêng mình, đặt sau kiểu khởi động, với một bước khác sẽ giúp bạn ngăn chặn người khác ghi đè kiểu của bạn hiệu quả hơn.

Bạn có thể có một cái nhìn tại đặc trưng của phong cách CSS tại http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ hoặc https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Một ví dụ có thể là, viết một phong cách

.btn { 
    background: red; 
} 

như

#mypage .btn { 
    background: red; 
} 

nơi, mypage có thể là ID của một phần tử cha nhiều nhất trên trang (có thể là thẻ body?). Điều này sẽ làm cho các quy tắc kiểu của bạn cụ thể hơn các quy tắc được xác định trong CSS khởi động, chúng sẽ không còn có thể ghi đè lên quy tắc của bạn nữa.

Xin lưu ý rằng đoạn mã trên chỉ là minh họa và bạn chắc chắn có thể viết phong cách tốt hơn cho mục đích.

Answer 4

làm cho biểu định kiểu của bạn là tệp css được nhập cuối cùng.

Answer 5

Tôi không chắc chắn nếu điều này sẽ trả lời câu hỏi của bạn một cách chính xác nhưng những gì tôi làm trong tất cả các BS của tôi 3 dự án là:

Trong phần đầu của tôi:

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

Trong custom.css

@import boostrap.less // or the fully compiled bootstrap css 
// all your custom stuff, overrides, etc. down here 

Bằng cách này chúng tôi tải lên boostrap đầu tiên nhưng bất cứ điều gì tùy bạn muốn d o sẽ được nạp cuối cùng có nghĩa là cơ hội ghi đè của bạn cao và sẽ không gây ra xung đột. Ngoài ra, nó còn là một dòng và sạch hơn rất nhiều cho <head>

Answer 6

Vì vậy, sử dụng đơn giản ít hơn để loại bỏ các thành phần BS bạn không cần. Biên dịch và rút gọn tệp bootstrap.min.css và sau đó nhập tệp này vào bảng định kiểu của bạn bằng cách sử dụng:

@import url ("bootstrap.min.css"); ở trên cùng. Sau đó, trong HTML của bạn chỉ cần bao gồm CSS của bạn và chúng sẽ được đọc sau.