Làm cách nào tôi có thể ghi đè lên các kiểu dáng trong Twitter Bootstrap? Chẳng hạn, tôi hiện đang sử dụng lớp .sidebar có quy tắc CSS 'float: left;' Làm thế nào tôi có thể thay đổi điều này để nó đi bên phải thay thế? Tôi đang sử dụng HAML và SASS nhưng còn khá mới đối với phát triển web.
Câu trả lời:
Thêm lớp của riêng bạn, ví dụ : <div class="sidebar right"></div>, với CSS là
.sidebar.right {
float:right
} Tất cả các mẹo này sẽ hoạt động, nhưng một cách đơn giản hơn có thể là bao gồm biểu định kiểu của bạn sau các kiểu Bootstrap.
Nếu bạn bao gồm css ( site-specific.css) của bạn sau Bootstrap's ( bootstrap.css), bạn có thể ghi đè các quy tắc bằng cách xác định lại chúng.
Ví dụ: nếu đây là cách bạn đưa CSS vào <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />Bạn có thể chỉ cần di chuyển thanh bên sang phải bằng cách viết (trong site-specific.csstệp của bạn ):
.sidebar {
float: right;
}Tha thứ cho việc thiếu HAML và SASS, tôi không biết rõ về họ để viết hướng dẫn trong đó.
!importantlà bạn không bao giờ có thể ghi đè lại nó trong tương lai.
Site.cssđược gói lại và được liệt kê trong Bundle.configvà hiển thị vật lý sau bootstrap.css nhưng các kiểu vẫn không bị ghi đè. Tôi đã phải lấy site.csstham chiếu ra khỏi gói hiện đại hóa và đặt thủ công nó sau bootstrap.css(và nhấn Ctrl + F5 một lần để gỡ lỗi bộ đệm)
Câu trả lời cho điều này là tính đặc hiệu CSS. Bạn cần phải "cụ thể" hơn trong CSS của mình để nó có thể ghi đè các thuộc tính css của bootstrap.
Ví dụ: bạn có mã mẫu cho menu bootstrap tại đây:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="home-menu-container" class="collapse navbar-collapse">
<ul id="home-menu" class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
<li><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">What We Do</a></li>
<li><a href="#process">Our Process</a><br /></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>Ở đây, bạn cần nhớ thứ bậc của tính đặc hiệu. Nó như thế này:
Vì vậy, đối với ở trên nếu css của bạn có cái gì đó như thế này:
.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */Vì vậy, ngay cả khi bạn đã xác định .navbar asau, .navbar ul li anó vẫn sẽ ghi đè bằng màu đỏ, thay vì màu xanh lục vì độ đặc hiệu là nhiều hơn (13 điểm).
Vì vậy, về cơ bản, tất cả những gì bạn cần làm là tính điểm cho phần tử bạn muốn thay đổi css cho, thông qua phần tử kiểm tra trên trình duyệt của bạn. Ở đây, bootstrap đã chỉ định css của nó cho phần tử là
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}Vì vậy, ngay cả khi css của bạn đang tải đang được tải sau khi bootstrap.css có dòng sau:
.navbar-nav li a {
color: red;
}nó vẫn sẽ được hiển thị là # 999. Để giải quyết điều này, bootstrap có 22 điểm (tự tính toán). Vì vậy, tất cả những gì chúng ta cần là một cái gì đó nhiều hơn thế. Vì vậy, tôi đã thêm ID tùy chỉnh vào các thành phần, ví dụ như menu-menu-container và home-menu. Bây giờ css sau sẽ hoạt động:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */Làm xong.
Bạn có thể tham khảo liên kết MDN này .
blockquotekiểu trong CSS Bootstrap. Thật kỳ lạ, nó đã sai đối với các blockquote bình thường nhưng nhìn đúng và <ul> trong một blockquote. Khóa đã cập nhật CSS của tôi để có blockquote p, ưu tiên đủ. <Ul> đã làm điều này cho phần khác của trang.
Bạn có thể ghi đè lên một lớp CSS bằng cách làm cho nó "cụ thể hơn".
Bạn đi lên cây HTML và chỉ định các phần tử cha:
div.sidebar { ... } cụ thể hơn .sidebar { ... }
Bạn có thể đi đến CƠ THỂ nếu bạn cần:
body .sidebar { ... } sẽ ghi đè hầu như mọi thứ.
Xem hướng dẫn tiện dụng này: http://css-tricks.com/855-specifics-on-css-specificity/
Nếu bạn muốn ghi đè bất kỳ css nào trong bootstrap, hãy sử dụng!
Giả sử ở đây là lớp tiêu đề trang trong bootstrap có lề 40px ở trên, khách hàng của tôi không thích nó và anh ta chỉ muốn nó ở trên 15 và 10 ở dưới cùng
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}Vì vậy, tôi đã thêm vào lớp trong tệp site.css của tôi có cùng tên như thế này
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}Lưu ý! Quan trọng với lề của tôi, nó sẽ ghi đè lên lề của lề lớp tiêu đề trang bootstarp.
Đã đến cuối này, nhưng tôi nghĩ rằng nó có thể sử dụng một câu trả lời khác.
Nếu bạn đang sử dụng sass, bạn thực sự có thể thay đổi các biến trước khi nhập bootstrap. http://twitter.github.com/bootstrap/customize.html#variable
Thay đổi bất kỳ trong số họ, chẳng hạn như:
$bodyBackground: red;
@import "bootstrap";Ngoài ra, nếu không có một biến có sẵn cho những gì bạn muốn thay đổi, bạn có thể ghi đè lên các kiểu hoặc thêm các kiểu của riêng bạn.
Sass:
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}Cũng xem điều này: Cấu trúc tài sản SCSS thích hợp trong đường ray
Tôi biết đây là một câu hỏi cũ nhưng tôi vẫn gặp phải một vấn đề tương tự và tôi nhận ra rằng mã css "không hoạt động" trong bootstrapOverload.csstệp của tôi đã được viết sau khimedia queries . Khi tôi di chuyển nó lên trên các truy vấn phương tiện, nó bắt đầu hoạt động.
Chỉ trong trường hợp người khác đang đối mặt với cùng một vấn đề