在Twitter Bootstrap中更改导航栏颜色

最新推荐文章于 2024-07-01 21:38:06 发布

asdfgh0077

最新推荐文章于 2024-07-01 21:38:06 发布

阅读量1w

点赞数 1

文章标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 navbar

原文链接：https://oldbug.net/q/1FkJG/Change-navbar-color-in-Twitter-Bootstrap

版权

本文翻译自：Change navbar color in Twitter Bootstrap

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

#1楼

参考：https://stackoom.com/question/1FkJG/在Twitter-Bootstrap中更改导航栏颜色

#2楼

tl;dr - TWBSColor - Generate your own Bootstrap navbar tl; dr- TWBSColor-生成自己的Bootstrap导航栏

Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x 版本说明： -在线工具：Bootstrap 3.3.2+ / 4.0.0+-此答案：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 #F8F8F8 ：导航栏背景
#E7E7E7 : navbar border #E7E7E7 ：导航栏边框
#777 : default color #777 ：默认颜色
#333 : hover color ( #5E5E5E for .nav-brand ) #333 ：悬停颜色（ .nav-brand为#5E5E5E ）
#555 : active color #555 ：活动颜色
#D5D5D5 : active background #D5D5D5 ：活动背景

Default style 默认样式

If you want to put some custom style, here's the CSS you need to change: 如果要放置一些自定义样式，则需要更改以下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;
    }
}

Custom colored navbar examples 自定义彩色导航栏示例

Here are four examples of a custom colored navbar: 以下是自定义彩色导航栏的四个示例：

JSFiddle link JSFiddle链接

在此处输入图片说明

And the SCSS code: 和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; }}}
}

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 我刚刚制作了一个脚本，该脚本将允许您生成主题： TWBSColor-生成自己的Bootstrap导航栏

[Update]: TWBSColor now generates SCSS/SASS/ Less /CSS code. [更新]：TWBSColor现在生成SCSS / SASS / Less / CSS代码。
[Update]: From now, you can use Less as the default language provided by TWBSColor [更新]：从现在开始，您可以将Less用作TWBSColor提供的默认语言。
[Update]: TWBSColor now supports drop down menus colorization [更新]：TWBSColor现在支持下拉菜单着色
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added) [更新]：TWBSColor现在允许选择您的版本（添加了对Bootstrap 4的支持）

#3楼

Updated 2018 for Bootstrap 4 更新了2018年的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.. 在Bootstrap 4中更改Navbar颜色是不同的（并且稍微容易一些）。您可以创建一个自定义的navbar类，然后引用它来更改navbar，而不会影响其他Bootstrap导航。

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

Bootstrap 4.0 Bootstrap 4.0

The CSS required to change the Navbar is much less in Bootstrap 4... 在Bootstrap 4中，更改导航栏所需的CSS少得多。

.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 Demo Bootstrap 4自定义导航栏演示

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... 更改活动/悬停链接的背景颜色也适用于相同的CSS，但是如果您希望bg颜色填充链接的整个高度，则必须调整填充...

py-0 to remove vertical padding from the entire navbar... py-0从整个导航栏中删除垂直填充...

<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 4更改链接和背景颜色演示

Also see: Bootstrap 4 Change Hamburger Toggler Color 另请参阅： Bootstrap 4更改汉堡包切换器颜色

Bootstrap 3 引导程序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 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 带下拉菜单的演示

#4楼

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 . 尝试http://getbootstrap.com/customize/ （其中的导航栏设置有单独的部分（默认导航栏和反向导航栏））或从https://github.com/twbs/bootstrap下载自己的副本。

You will find the navbar settings in variables.less . 您可以在variables.less找到导航栏设置。 navbar.less is used to compile the navbar (depends on variables.less and mixins.less ). navbar.less用于编译导航栏（取决于variables.less和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). 更改variables.less中的variables.less将是最简单的方法（更改默认或反向导航栏不会有问题，因为每页只有一个导航栏）。

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/ . 您也可以尝试http://twitterbootstrap3navbars.w3masters.nl/ 。 This tool generates CSS code for your custom navbar. 该工具为您的自定义导航栏生成CSS代码。 Optionally, you could also add gradient colors and borders to the navbar. （可选）您还可以向导航栏添加渐变色和边框。

#5楼

If it's only about changing the color of the Navbar my suggestion would be to use: Bootstrap Magic . 如果仅是要更改导航栏的颜色，我的建议是使用： 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. 将结果下载为自定义CSS样式表或Less变量文件。 You can change values with input fields and color pickers. 您可以使用输入字段和颜色选择器更改值。

#6楼

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

asdfgh0077

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫