我如何更改引導導航欄顏色？

Question

我想更改我的引導導航欄顏色。 我使用TWBSColor制作自定義顏色。 這就是我要的：

 .navbar-default { background-color: #ffd2d2; border-color: #000000; } .navbar-default .navbar-brand { color: #000000; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #000000; } .navbar-default .navbar-nav > li > a { color: #000000; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-toggle { border-color: #000000; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000000; } .navbar-default .navbar-toggle .icon-bar { background-color: #000000; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #000000; } .navbar-default .navbar-link { color: #000000; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #000000; } } 

這是什么：

 html, body { height: 100%; } body { padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ } .img-portfolio { margin-bottom: 30px; } .img-hover:hover { opacity: 0.8; } /* Home Page Carousel */ header.carousel { height: 50%; } header.carousel .item, header.carousel .item.active, header.carousel .carousel-inner { height: 100%; } header.carousel .fill { width: 100%; height: 100%; background-position: center; background-size: cover; } /* 404 Page Styles */ .error-404 { font-size: 100px; } /* Pricing Page Styles */ .price { display: block; font-size: 50px; line-height: 50px; } .price sup { top: -20px; left: 2px; font-size: 20px; } .period { display: block; font-style: italic; } /* Footer Styles */ footer { margin: 50px 0; } /* Responsive Styles */ @media(max-width:991px) { .customer-img, .img-related { margin-bottom: 30px; } } @media(max-width:767px) { .img-portfolio { margin-bottom: 15px; } header.carousel .carousel { height: 70%; } } .navbar-default { background-color: #ffd2d2; border-color: #000000; } .navbar-default .navbar-brand { color: #000000; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #000000; } .navbar-default .navbar-nav > li > a { color: #000000; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-toggle { border-color: #000000; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000000; } .navbar-default .navbar-toggle .icon-bar { background-color: #000000; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #000000; } .navbar-default .navbar-link { color: #000000; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #000000; } } 

但我不知道如何添加它；（請幫助...

Answer 1

如果您只想自定義導航欄的背景色，最簡單的方法就是打開Bootstrap Customizer並更改這兩個變量以適合您的口味。 第一個用於default ，第二個用於inverse導航欄變化。

@navbar-default-bg
@navbar-inverse-bg

當然，每當升級到下一個引導程序版本時，都必須記住這一點並在下載之前進行適當的變量更改。

第二個通常的選擇是安裝jekyll ， node ， grunt和其他引導程序依賴項，並通過更改variables.less構建bootstrap ，但是如果您只需要自定義背景色，那么此方法就顯得過頭了。 但是，Bootstrap Customizer頁面中也提供了有關第二種方法的詳細信息。