Change navbar color in Twitter Bootstrap

后端 未结 12 2022
悲&欢浪女
悲&欢浪女 2020-11-22 00:19

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

12条回答
  •  抹茶落季
    2020-11-22 00:19

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

提交回复
热议问题