711

ฉันจะแก้ไข CSS เพื่อเปลี่ยนสีของแถบนำทางใน Twitter Bootstrap ได้อย่างไร

1392

tl; dr - TWBSColor - สร้าง navbar Bootstrap ของคุณเอง

หมายเหตุรุ่น: - เครื่องมือออนไลน์: Bootstrap 3.3.2+ / 4.0.0+ - คำตอบนี้: Bootstrap 3.0.x

navbars ที่มีอยู่

คุณมี navbars พื้นฐานสองรายการ:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

การใช้สีเริ่มต้น

นี่คือสีหลักและการใช้งานของพวกเขา:

#F8F8F8: พื้นหลัง navbar
#E7E7E7: ชายแดน navbar
#777: สีเริ่มต้น
#333: สีโฮเวอร์ ( #5E5E5Eสำหรับ.nav-brand)
#555: สีที่ใช้งานอยู่
#D5D5D5: พื้นหลังที่ใช้งานอยู่

สไตล์เริ่มต้น

หากคุณต้องการใส่สไตล์ที่กำหนดเองนี่คือ CSS ที่คุณต้องเปลี่ยน:

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

ตัวอย่างแถบสีที่กำหนดเอง

นี่คือสี่ตัวอย่างของแถบนำทางสีที่กำหนดเอง:

ป้อนคำอธิบายภาพที่นี่

และรหัส SCSS:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

และในที่สุดของขวัญเล็กน้อย

ฉันเพิ่งสร้างสคริปต์ที่จะช่วยให้คุณสร้างธีมของคุณ: TWBSColor - สร้าง navbar Bootstrap ของคุณเอง

[อัพเดต]: TWBSColor สร้างโค้ด SCSS / SASS / Less / CSS
[อัปเดต]: จากตอนนี้คุณสามารถใช้ Less เป็นภาษาเริ่มต้นที่ TWBSColor จัดให้
[อัปเดต]: TWBSColor รองรับการกำหนดสีเมนูแบบเลื่อนลง
[อัพเดต]: TWBSColor ตอนนี้อนุญาตให้เลือกรุ่นของคุณ (เพิ่มการรองรับ Bootstrap 4)

— zessx
แหล่งที่มา

5

เมื่อฉันพยายามใช้ชุดรูปแบบสีที่แสดงผลสีไม่ปรากฏขึ้น การเพิ่ม!importantที่ส่วนท้ายของแต่ละคำสั่ง CSS ที่เอาท์พุทน่าจะแก้ปัญหาได้แล้ว ตัวอย่าง: กลายเป็นcolor: #ffffff; color: #ffffff !important;

— เอเดรีย

2

@Adrian: คุณควรรวมไฟล์ CSS ด้วยการปรับแต่งเหล่านี้หลังจากที่คุณใส่ CSS ของ bootstrap เหตุผลอื่นอาจไม่ใช่การทำงานหากคุณใช้ bootstrap-theme.css เพื่อให้เว็บไซต์ของคุณ Boostrap 2.x เป็นรูปลักษณ์และความรู้สึกไล่ระดับสี

— Csaba Toth

2

เพียงพื้นหลังแทนสีพื้นหลังใช้งานได้สำหรับฉัน

— ซาการ์ชาห์

2

ฉันรักที่สร้างเว็บไซต์ nav ฉันขอให้คุณมีรายการอื่น ๆ อีกฉันจะสร้างเป็นฉันจึงน่ากลัวที่ haha นี้

— Caro

2

เพิ่มการรองรับ Bootstrap 4ใน TWBSColor แล้ว!

— zessx

209

อัพเดท 2020

การเปลี่ยนสี Navbar จะแตกต่างกัน (และง่ายขึ้นเล็ก ๆ น้อย ๆ ) ในBootstrap 4 คุณสามารถสร้างคลาส navbar แบบกำหนดเองแล้วอ้างอิงเพื่อเปลี่ยน navbar โดยไม่กระทบกับ Bootstrap navs อื่น ๆ

<nav class="navbar navbar-custom">...</nav>

Bootstrap 4.3+

CSS ที่จำเป็นในการเปลี่ยน Navbar นั้นน้อยกว่ามากใน Bootstrap 4 ...

.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Bootstrap 4 การสาธิต Navbar แบบกำหนดเอง

การเปลี่ยนสีพื้นหลังของลิงค์ที่ใช้งาน / โฮเวอร์ยังทำงานกับ CSS เดียวกัน แต่คุณต้องปรับการขยายหากคุณต้องการสี bg เพื่อเติมเต็มความสูงของลิงค์ ...

py-0 การลบช่องว่างภายในแนวตั้งจาก navbar ทั้งหมด ...

<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Bootstrap 4 เปลี่ยนการเชื่อมโยงและการสาธิตสีพื้นหลัง

ดูเพิ่มเติมที่: Bootstrap 4 เปลี่ยน Hamburger Toggler Color

Bootstrap 3

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...
</nav>


.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}

.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}

การสาธิต Navbar แบบกำหนดเองบน Bootply

หาก Navbar มีดรอปดาวน์ให้เพิ่มรายการต่อไปนี้เพื่อเปลี่ยนสีดรอปดาวน์:

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

การสาธิตด้วยดร็อปดาวน์

— ซิม
แหล่งที่มา

1

ฉันจะเปลี่ยน navbar li: โฮเวอร์สีพื้นหลังในตัวอย่างของคุณได้อย่างไร

— akn

6

ปุ่ม navbar ไม่ปรากฏขึ้นบนหน้าจอขนาดเล็กโดยใช้วิธีนี้

— henrikstroem

3

นี่เป็นทางออกที่ดีที่สุดเพราะหลีกเลี่ยงเขียนทับ CSS และกังวลเกี่ยวกับการใช้งานที่สำคัญ!

— TruthOf42

2

ฉันปรับปรุงคำตอบของฉันให้สมบูรณ์ มันควรจัดให้มีการแก้ปัญหาการทำงานสำหรับทั้ง3.xและเงินทุน 4

— Zim

BootStrap 4 - ตัวอย่าง codeply ยังทำงานอยู่หรือไม่?

— MarcoZen

50

ฉันใช้เวลาสักครู่ แต่ฉันค้นพบว่าการรวมสิ่งต่อไปนี้เป็นสิ่งที่ทำให้สามารถเปลี่ยนสีแถบนำทางได้:

.navbar{ 
    background-image: none;
}

— fstopzero
แหล่งที่มา

1

ฉันไม่รู้ว่าทำไมสิ่งนี้แก้ไขปัญหาได้ แต่ขอบคุณ

— Simon Morgan

6

มันเป็นเพราะ bootstrap เพิ่ม / background-image นี้: linear-gradient (ลงล่าง, #fff 0%, # f8f8f8 100%); * / เพื่อเพิ่มการไล่ระดับสี ฉันไม่แน่ใจว่าทำไมพวกเขาถึงรวมสิ่งนี้และสีพื้นหลังไว้ด้วย

— Daniel Kobe

@DanielKobe @Sumeet ฉันเพิ่งตรวจสอบรหัส Bootstrap และไม่มีการbackground-imageเพิ่มซึ่งจะป้องกันไม่ให้ TWBSColor ทำงาน ฉันรู้เวอร์ชั่น Bootstrap ของคุณและสภาพแวดล้อมของคุณได้ไหม (ธีมเพิ่มเติม, ห้องสมุด CSS ... )

— zessx

@zessx ดูเหมือนว่าจะเป็นธีมที่ทำให้เกิดสิ่งนี้ ฉันใช้ชุดรูปแบบเรียบง่ายสำหรับ bootstrap 3.2.0 (CDN) การลบมันแก้ปัญหาทั้งหมด

— JackWhiteIII

การตั้งค่าภาพพื้นหลังเป็น 'ไม่มี' น่าจะเป็นวิธีแก้ปัญหาอย่างน้อยสำหรับรุ่นล่าสุดที่ภาพพื้นหลังมีการไล่ระดับสีเฉพาะซึ่งยังคงรักษาสีฟ้าของน้ำแม้ว่าคุณจะกำหนดสีพื้นหลังแบบกำหนดเอง อาจเป็นไปได้ว่าคำตอบที่ยอมรับสำหรับคำถามนี้อาจค้างเมื่อเวลาผ่านไป ฉันใช้ Bootstrap 3.3

— warriorpostman

49

ใช้น้อย

คุณสามารถพิจารณารวบรวมเวอร์ชั่นของคุณเอง ลองhttp://getbootstrap.com/customize/ (ซึ่งมีส่วนออกจากกันสำหรับการตั้งค่า Navbars (Default navbar และ Inverted Navbar)) หรือดาวน์โหลดสำเนาของคุณเองจากhttps://github.com/twbs/bootstrap

variables.lessคุณจะพบการตั้งค่าในแถบนำทาง navbar.lessถูกใช้เพื่อรวบรวม navbar (ขึ้นอยู่กับvariables.lessและmixins.less)

คัดลอก 'ส่วน navbar-default' และเติมการตั้งค่าสีของคุณเอง การเปลี่ยนตัวแปรในvariables.lessนั้นจะเป็นวิธีที่ง่ายที่สุด (การเปลี่ยนค่าเริ่มต้นหรือ navbar แบบผกผันจะไม่เกิดปัญหาเพราะคุณมี Navbar เพียงหนึ่งรายการต่อหน้าเท่านั้น)

คุณจะไม่เปลี่ยนการตั้งค่าทั้งหมดในกรณีส่วนใหญ่:

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

นอกจากนี้คุณยังสามารถลองhttp://twitterbootstrap3navbars.w3masters.nl/ เครื่องมือนี้สร้างโค้ด CSS สำหรับ navbar ที่คุณกำหนดเอง คุณสามารถเพิ่มสีและไล่ระดับสีลงในแถบนำทางได้เช่นกัน

— Bass Jobsen
แหล่งที่มา

10

เพียงเพิ่ม id ลงในแถบนำทาง HTML เช่น:

<nav id="navbar-yellow" class="navbar navbar-default navbar-fixed-top" role="navigation">

ด้วย ID นี้คุณสามารถจัดรูปแบบสีของแถบนำทาง แต่ยังรวมถึงลิงก์และดรอปดาวน์

ตัวอย่างที่ใช้กับ navbars ประเภทต่างๆ

นี่คือ CSS

/*
 * Black navbar style
 */
#navbar-black.navbar-default { /* #3C3C3C - #222222 */
    font-size: 14px;
    background-color: rgba(34, 34, 34, 1);
    background: -webkit-linear-gradient(top, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: linear-gradient(to bottom, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-black.navbar-default .navbar-nav>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>a:focus,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-black.navbar-default .navbar-nav>.active>a,
#navbar-black.navbar-default .navbar-nav>.active>a:hover,
#navbar-black.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#sidebar-black, #column-black {
      background-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle {
    border-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle:hover,
#navbar-black.navbar-default .navbar-toggle:focus {
    background-color: #3C3C3C;
}
#navbar-black.navbar-default .navbar-nav>li>a,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a,
#navbar-black.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-black.navbar-default .navbar-toggle .icon-bar,
#navbar-black.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-black.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Red navbar style
 */
#navbar-red.navbar-default { /* #990033 - #cc0033 */
    font-size: 14px;
    background-color: rgba(153, 0, 51, 1);
    background: -webkit-linear-gradient(top, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-red.navbar-default .navbar-nav>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>a:focus,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-red.navbar-default .navbar-nav>.active>a,
#navbar-red.navbar-default .navbar-nav>.active>a:hover,
#navbar-red.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-red, #column-red {
      background-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle {
    border-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle:hover,
#navbar-red.navbar-default .navbar-toggle:focus {
    background-color: #cc0033;
}
#navbar-red.navbar-default .navbar-nav>li>a,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a,
#navbar-red.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-red.navbar-default .navbar-toggle .icon-bar,
#navbar-red.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-red.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkblue navbar style
 */
#navbar-darkblue.navbar-default { /* #003399 - #0033cc */
    font-size: 14px;
    background-color: rgba(51, 51, 153, 1);
    background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>.active>a,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkblue, #column-darkblue {
    background-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle {
    border-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle:hover,
#navbar-darkblue.navbar-default .navbar-toggle:focus {
    background-color: #3333cc;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkblue.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkblue.navbar-default .navbar-toggle .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkgreen navbar style
 */
#navbar-darkgreen.navbar-default { /* #006633 - #009933 */
    font-size: 14px;
    background-color: rgba(0, 102, 51, 1);
    background: -webkit-linear-gradient(top, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkgreen, #column-darkgreen {
    background-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle {
    border-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle:hover,
#navbar-darkgreen.navbar-default .navbar-toggle:focus {
    background-color: #009933;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkgreen.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkgreen.navbar-default .navbar-toggle .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Yellow navbar style
 */
#navbar-yellow.navbar-default { /* #99ff00 - #ccff00 */
    font-size: 14px;
    background-color: rgba(153, 255, 0, 1);
    background: -webkit-linear-gradient(top, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-yellow.navbar-default .navbar-nav>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>.active>a,
#navbar-yellow.navbar-default .navbar-nav>.active>a:hover,
#navbar-yellow.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-yellow, #column-yellow {
    background-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle {
    border-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle:hover,
#navbar-yellow.navbar-default .navbar-toggle:focus {
    background-color: #ccff00;
}
#navbar-yellow.navbar-default .navbar-nav>li>a,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a,
#navbar-yellow.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-yellow.navbar-default .navbar-toggle .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

— FabianW
แหล่งที่มา

ข้างต้นสำหรับ bootstrap 3 หรือ 4 หรือไม่?

— MarcoZen

7

คุณต้องเปลี่ยน CSS โดยตรงหรือไม่ แล้ว ...

<nav class="navbar navbar-inverse" style="background-color: #333399;">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

— eaglei22
แหล่งที่มา

6

ลองสิ่งนี้ด้วย สิ่งนี้ใช้ได้สำหรับฉัน

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}

— Saurabh Kumar
แหล่งที่มา

4

ถ้ามันเป็นเพียงเกี่ยวกับการเปลี่ยนสีของแถบการนำข้อเสนอแนะของฉันจะใช้: Bootstrap เมจิก คุณสามารถเปลี่ยนค่าสำหรับคุณสมบัติต่าง ๆ ของ Navbar และดูตัวอย่าง

ดาวน์โหลดผลลัพธ์เป็นสไตล์ชีท CSS ที่กำหนดเองหรือเป็นไฟล์ตัวแปร Less คุณสามารถเปลี่ยนค่าด้วยฟิลด์อินพุตและตัวเลือกสี

— ธีโอ
แหล่งที่มา

3

ใน navbar CSS นี้ให้ตั้งค่าสีของตัวเอง:

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

ขยายตัวอย่างข้อมูล

— นักออกแบบ Ashu
แหล่งที่มา

คุณหมายถึงอะไรโดย "ตั้งค่าให้เป็นสีของตัวเอง"?

— Peter Mortensen

1

ตัวอย่าง

ลองทำแบบนี้สิ

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

ไฟล์ `navabr.css`

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}

การใช้สีหลักที่เป็นค่าเริ่มต้นมีดังนี้:

พื้นหลัง Navbar: # F8F8F8
Navbar Border: # E7E7E7
สีเริ่มต้น: # 777
สีโฮเวอร์ของแบรนด์เนม: # 5E5E5E
สีโฮเวอร์: # 333
พื้นหลังที่ใช้งานอยู่: # D5D5D5
สีที่ใช้งาน: # 555

คุณสามารถเรียนรู้เพิ่มเติมในการเปลี่ยนสี navbar ใน Twitter Bootstrap 3

— core114
แหล่งที่มา

0

การอ้างถึงชื่อคลาสที่ตรงกันข้ามและเป็นค่าเริ่มต้นใน Bootstrap ของ Twitter ทำให้พวกเขาเป็นสีดำและสีขาว

ดีกว่าคุณไม่ควรลบล้างสิ่งนั้นและเพิ่มคลาสที่อยู่ใกล้กับนั้นและเขียนสไตล์เฉพาะสำหรับคุณ:

my_style{
    background-color: green;
}

ขยายตัวอย่างข้อมูล

— Nambi N Rajan
แหล่งที่มา

0

ใช้:

<nav class="navbar navbar-inverse" role="navigation"></nav>

navbar-inverse {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}

25+ รหัส Boot เมนู Nav

— ฮาล์ฟมูน
แหล่งที่มา

เปลี่ยนสีแถบนำทางใน Twitter Bootstrap