我怎么去修改CSS来改变Twitter引导导航栏的颜色?
当前回答
在Twitter Bootstrap中提到的逆类和默认类名导致它们是黑色和白色的。
更好的是,你不应该重写它,并在它附近添加一个类,并为它编写特定的样式:
my_style { 背景颜色:绿色; }
其他回答
这花了我一段时间,但我发现包括以下内容可以改变导航栏的颜色:
.navbar{
background-image: none;
}
如果只是改变导航条的颜色,我的建议是使用:Bootstrap Magic。您可以更改导航栏的不同属性的值并查看预览。
以自定义CSS样式表或Less variables文件的形式下载结果。您可以通过输入字段和颜色选择器更改值。
在Twitter Bootstrap中提到的逆类和默认类名导致它们是黑色和白色的。
更好的是,你不应该重写它,并在它附近添加一个类,并为它编写特定的样式:
my_style { 背景颜色:绿色; }
用更少的
您还可以考虑编译自己的版本。尝试http://getbootstrap.com/customize/(其中有一个单独的部分导航栏设置(默认导航栏和反向导航栏))或从https://github.com/twbs/bootstrap下载自己的拷贝。
你可以在variables.less中找到导航栏设置。导航条。Less用于编译导航栏(取决于变量)。Less and mixins.less)。
复制“navbar-default section”并填充你自己的颜色设置。在变量中改变变量。减少导航条是最简单的方法(更改默认或反向导航条不会有问题,因为每个页面只有一个导航条)。
在大多数情况下,您不会更改所有设置:
// 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;
你也可以试试http://twitterbootstrap3navbars.w3masters.nl/。这个工具为你的自定义导航栏生成CSS代码。你还可以在导航栏上添加渐变颜色和边框。
引导5(更新2021年)
默认情况下,引导5中的导航栏是透明的。自Bootstrap 4以来,导航栏背景颜色、文本颜色、链接、下拉菜单和悬停样式的变化不大。
/* change the background color */
.navbar-custom {
background-color: #4433cc;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #ffcc00;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #ffbb00;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: pink;
}
/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
background-color: #ddaa11;
}
/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
color: #000000;
}
/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
color: #eeeeee;
background-color: red;
}
引导5自定义导航条颜色演示
Bootstrap 4.3(2020年更新)
在Bootstrap 4中改变导航条的颜色是不同的(而且更容易一点)。你可以创建一个自定义导航栏类,然后引用它来改变导航栏,而不影响其他引导导航。
<nav class="navbar navbar-custom">...</nav>
引导 4.3+
在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;
}
引导4自定义导航条演示
改变活动/悬停链接的背景色也适用于相同的CSS,但如果你想让bg颜色填充整个链接的高度,你必须调整填充…
Py-0删除垂直填充从整个导航栏…
<nav class="navbar - navbar-expand-sm navbar-custom py-0">.
/* 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更改链接和背景颜色演示
另请参阅:如何更改引导4导航栏按钮图标的颜色?
**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;
}
自定义导航条演示Bootply
如果导航栏有下拉菜单,添加以下内容来改变下拉菜单的颜色:
/* 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;
}
带下拉菜单的演示
如果你想一起改变主题颜色(在导航栏之外),请看这个答案