~Onlooker
2013-08-30 09:19
采纳率: 0%
浏览 4.2k

在 Bootstrap 中更改导航栏颜色

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

转载于:https://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

13条回答 默认 最新

  • csdnceshi62 2013-08-30 09:27
    已采纳

    tl;dr - TWBSColor - Generate your own Bootstrap navbar

    Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x

    Available navbars

    You've got two basic navbars:

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

    Default color usage

    Here are the main colors and their usage:

    • #F8F8F8: navbar background
    • #E7E7E7: navbar border
    • #777: default color
    • #333: hover color (#5E5E5E for .nav-brand)
    • #555: active color
    • #D5D5D5: active background

    Default style

    If you want to put some custom style, here's the CSS you need to change:

    /* 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;
        }
    }
    

    Custom colored navbar examples

    Here are four examples of a custom colored navbar:

    JSFiddle link

    Enter image description here

    And the SCSS code:

    $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; }}}
    }
    

    And finally, a little gift

    I've just made a script which will allow you to generate your theme: TWBSColor - Generate your own Bootstrap navbar

    [Update]: TWBSColor now generates SCSS/SASS/Less/CSS code.
    [Update]: From now, you can use Less as the default language provided by TWBSColor
    [Update]: TWBSColor now supports drop down menus colorization
    [Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)

    打赏 评论
  • 叼花硬汉 2013-08-30 10:44

    Updated 2018 for Bootstrap 4

    Changing the Navbar color is different (and a little easier) in Bootstrap 4. You can create a custom navbar class, and then reference it to change the navbar without impacting other Bootstrap navs..

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

    Bootstrap 4.0

    I know the original question was for 3.x, but I thought a new Bootstrap 4 example would be helpful too. The CSS required is much less in 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 Custom Navbar Demoenter image description here

    Changing the active/hover link background color also works with the same CSS, but you must adjust the padding if you want the bg color to fill the full height of the link...

    py-0 to remove vertical padding from the entire 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 Change Link and Background Color Demo


    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;
    }
    

    Custom Navbar Demo on Bootply


    If the Navbar has dropdowns, add the following to change dropdown color(s):

    /* 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;
    }
    

    Demo with Dropdown


    打赏 评论
  • 零零乙 2013-08-31 23:49

    Using Less

    You could also consider to compile your own version. Try http://getbootstrap.com/customize/ (which has a apart section for the Navbars settings (Default navbar and Inverted Navbar)) or download your own copy from https://github.com/twbs/bootstrap.

    You will find the navbar settings in variables.less. navbar.less is used to compile the navbar (depends on variables.less and mixins.less).

    Copy the 'navbar-default section' and fill in your own color settings. Changing the variables in variables.less will be the easiest way (changing the default or inverse navbar won't be a problem because you have one navbar per page only).

    You won't change all settings in most cases:

    // 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;
    

    You could also try http://twitterbootstrap3navbars.w3masters.nl/. This tool generates CSS code for your custom navbar. Optionally, you could also add gradient colors and borders to the navbar.

    打赏 评论
  • 叼花硬汉 2013-10-13 16:59

    If it's only about changing the color of the Navbar my suggestion would be to use: Bootstrap Magic. You can change the values for different properties of the Navbar and see a preview. Download the result as a custom CSS style sheet or as a LESS variables file. You can change values with input fields and color pickers. Y

    打赏 评论
  • 撒拉嘿哟木头 2014-10-31 21:21

    Try this too. This worked for me.

    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
      background-color: #00a950;
      color: #000000;
    }
    
    打赏 评论
  • ℡Wang Yan 2014-12-04 23:10

    It took me a while, but I discovered that including the following was what made it possible to change the navbar color:

    .navbar{ 
        background-image: none;
    }
    
    打赏 评论
  • 衫裤跑路 2015-11-22 11:51

    Just add an id to the html navbar, such as:

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

    With this id you can style the navbar color, but also the links and dropdowns

    Examples applied to different types of navbars

    Black

    Yellow

    Darkblue

    Red (Cherry)

    Darkgreen

    Here is the 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; 
    }
    
    打赏 评论
  • elliott.david 2016-02-10 11:54

    In this navbar CSS, set to own color:

    /* 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;
    }

    </div>
    
    打赏 评论
  • 妄徒之命 2016-09-21 15:38

    Do you have to change the CSS directly? What about...

    <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>
    
    打赏 评论
  • python小菜 2017-05-16 08:11

    inverse and defult class name mention in twittter bootstrap cause them black and white color. better you should not override that and add a class near that and write you particular style for that

    my_style{
    background-color:green;
    }

    like so. Thank you.

    </div>
    
    打赏 评论
  • ?yb? 2017-07-01 13:16

    It can be done directly by using style=" " attribute to whichever html tag you want to override it for eg.

    <nav class="navbar navbar-default" style="font-weight: bold; background-color: #569AAB;">
    

    this overrides bootstrap's default CSS.

    There is no need to define a complete set of styling or CSS separately.

    打赏 评论
  • 零零乙 2017-11-25 09:03

    enter image description here

    <nav class="navbar navbar-inverse" role="navigation"></nav>
    
    
    navbar-inverse {
        background-color: #F8F8F8;
        border-color: #E7E7E7;
         }
    

    25+ Bootstrap Nav Menus Code

    打赏 评论
  • 谁还没个明天 2017-12-14 06:48

    Example ,Just try like this

    <!-- 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;
        }
    }
    

    The default major color uses are as below:

    • Navbar Background: #F8F8F8
    • Navbar Border: #E7E7E7
    • Default Color: #777
    • Nav-brand Hover Color: #5E5E5E
    • Hover Color: #333
    • Active Background: #D5D5D5
    • Active Color: #555

    you can learn more http://fellowtuts.com/twitter-bootstrap/to-change-navbar-color-in-twitter-bootstrap-3/

    打赏 评论

相关推荐 更多相似问题