妄徒之命 2013-08-30 09:19 采纳率: 100%
浏览 1209
已采纳

在 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条回答 默认 最新

  • 笑故挽风 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)

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(12条)

报告相同问题?

悬赏问题

  • ¥15 kafka topic 所有分副本数修改
  • ¥15 小程序中fit格式等运动数据文件怎样实现可视化?(包含心率信息))
  • ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops?
  • ¥40 串口调试助手打开串口后,keil5的代码就停止了
  • ¥15 电脑最近经常蓝屏,求大家看看哪的问题
  • ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档
  • ¥50 C++五子棋AI程序编写
  • ¥30 求安卓设备利用一个typeC接口,同时实现向pc一边投屏一边上传数据的解决方案。
  • ¥15 SQL Server analysis services 服务安装失败
  • ¥15 基于面向对象的图书馆借阅管理系统