我将如何修改CSS来更改Twitter Bootstrap中导航栏的颜色?

最佳答案



可用的导航栏

您有两个基本的导航栏:

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

默认颜色使用

以下是主要颜色及其用法:
  • #F8F8F8:导航栏背景
  • #E7E7E7:导航栏边框
  • #777:默认颜色
  • #333:悬停颜色(#5E5E5E.nav-brand)
  • #555: Activity 颜色
  • #D5D5D5: Activity 背景

  • 默认样式

    如果要放置一些自定义样式,则需要更改以下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 - Generate your own Bootstrap navbar

    [更新]:TWBSColor现在生成SCSS/SASS/Less/CSS代码。
    [更新]:从现在开始,您可以将Less用作TWBSColor提供的默认语言。
    [更新]:TWBSColor现在支持下拉菜单着色
    [更新]:TWBSColor现在允许选择您的版本(添加了对Bootstrap 4的支持)

    10-05 20:40
    查看更多