màu navbar trong Twitter Bootstrap

Làm cách nào để thay đổi màu nền của thanh điều hướng của Twitter Bootstrap 2.0.2? Làm cách nào để thay đổi màu của tất cả các phần tử của thanh điều hướng để phản ánh màu nền?

Bạn có thể ghi đè các màu bootstrap, bao gồm cả .navbar-innerlớp, bằng cách nhắm mục tiêu nó trong biểu định kiểu của riêng bạn thay vì sửa đổi biểu định kiểu bootstrap.css, như sau:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

Bạn chỉ cần sửa đổi tất cả các kiểu đó bằng cách của riêng bạn và chúng sẽ được chọn, chẳng hạn như một cái gì đó như thế này, trong đó tôi loại bỏ tất cả các hiệu ứng gradient và chỉ đặt một màu nền đen đồng nhất:

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

Bạn có thể tận dụng các công cụ như Colorzilla Gradient Editor và tạo màu gradient của riêng bạn cho tất cả các trình duyệt và thay thế màu gốc bằng màu của riêng bạn.

Và như tôi đã đề cập trong các nhận xét, tôi không khuyên bạn nên sửa đổi biểu định kiểu bootstrap.css trực tiếp vì tất cả các thay đổi của bạn sẽ bị mất khi biểu định kiểu được cập nhật (phiên bản hiện tại là ^v2.0.2 ) vì vậy bạn nên bao gồm tất cả các thay đổi của bạn bên trong biểu định kiểu của riêng bạn, song song với biểu định kiểu bootstrap.css. Nhưng hãy nhớ ghi đè tất cả các thuộc tính thích hợp để có tính nhất quán trên các trình duyệt.

Một tài nguyên tuyệt vời để xem cách tạo chủ đề bootstrap là: bootswatch.com . Nó có các ví dụ đẹp và hiển thị mã. Tóm lại, họ sử dụng lessc để biên dịch lại bootstrap.css thành color-theme.css mới của bạn. Cái hay trong cách tiếp cận của họ là được xây dựng dựa trên bootstrap, vì vậy khi bootstrap được cập nhật, bạn chỉ cần biên dịch lại.

Các liên kết về cách sử dụng lessc và bootstrap:

• Sử dụng bootstrap với ít hơn
• Lessc.org

Nếu bạn không có thời gian để học "ít hơn" hoặc làm điều đó đúng cách, đây là một bản hack bẩn ...

Thêm điều này ở trên nơi bạn kết xuất HTML thanh điều hướng bootstrap - cập nhật màu theo yêu cầu ..

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>

Bạn có thể tải xuống phiên bản bootstrap tùy chỉnh và đặt @navbarBackground thành màu bạn muốn.

http://twitter.github.com/bootstrap/customize.html

Tôi đang sử dụng Bootstrap phiên bản 3.2.0 và có vẻ như .navbar-inner không tồn tại nữa.

Các giải pháp đề xuất ghi đè .navbar-inner không phù hợp với tôi ở đây - màu sắc vẫn giữ nguyên.

Màu chỉ thay đổi khi tôi ghi đè .navbar như hình dưới đây:

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}

Cách tốt nhất hiện tại để làm điều tương tự là cài đặt trình biên dịch dòng lệnh LESS bằng cách sử dụng

$ npm install -g less jshint recess uglify-js

Khi bạn đã thực hiện xong việc này, hãy chuyển đến thư mục less trong thư mục và sau đó chỉnh sửa các biến tệp .less và bạn có thể thay đổi rất nhiều biến theo những gì bạn cần bao gồm cả màu của thanh điều hướng

@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

Khi bạn đã thực hiện xong việc này, hãy chuyển đến thư mục bootstrap của bạn và chạy lệnh make.

Nếu bạn đang sử dụng LESS, bạn có thể sử dụng Mixins cho ít mã hơn. Ở đây tôi sẽ thêm một gradient, đường viền và bán kính đường viền:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

* Nếu bạn đang sử dụng gem rails, twitter-bootstrap-rails, tôi thực hiện việc này trực tiếp trong tệp bootstrap_and_overrides.css.less *

Đó là những gì tôi làm

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

nó hoạt động tốt cho tất cả các điều hướng, bạn có thể xem bản demo tại đây http://caverne.fr ở trên cùng

Trong dòng bootstrap.css 4784, chúng ta thấy:

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

Bạn cần loại bỏ tất cả các khai báo thuộc tính 'background-image' để có được hiệu quả mong muốn.

Sẽ không phải dao cạo của Occam nói chỉ làm điều này cho đến khi bạn cần một cái gì đó phức tạp hơn? Đó là một chút hack, nhưng có thể phù hợp với nhu cầu của những người muốn sửa chữa nhanh chóng.

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}

Nếu bạn đang sử dụng Phiên bản LESS hoặc SASS của Bootstrap. Cách hiệu quả nhất là thay đổi tên biến trong tệp LESS hoặc SASS.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

Đây là cách dễ nhất và hiệu quả nhất để thay đổi thanh điều hướng Bootstraps. Bạn không cần ghi đè và mã vẫn sạch.

Bạn có thể tùy chỉnh phiên bản của riêng mình trên trang web chính thức của Bootstrap .

Tôi thực sự chỉ ghi đè lên bất kỳ thứ gì tôi muốn thay đổi trong site.css, bạn nên tải site.css sau bootstrap để nó ghi đè lên các lớp. Những gì tôi đã làm bây giờ chỉ là tạo các lớp học của riêng tôi với chủ đề bootstrap nhỏ của riêng tôi. Những điều nhỏ nhặt như thế này

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

Tôi cũng thay đổi lượt thích của các lỗi xác thực theo cách tương tự.