在Twitter Bootstrap中改变导航条的颜色
我如何去修改CSS来改变Twitter Bootstrap中导航条的颜色?
687
3
我如何去修改CSS来改变Twitter Bootstrap中导航条的颜色?
可用的导航条
你有两个基本的导航栏。
默认的颜色使用
以下是主要的颜色和它们的用法。
#F8F8F8
: 导航栏背景#E7E7E7
: 导航栏边框#777
:默认颜色#333
:悬停颜色(#5E5E5E
用于.nav-brand
)。#555
:活动颜色#D5D5D5
: 活动背景默认风格
如果你想放一些自定义样式,这里是你需要改变的CSS。
自定义彩色导航条的例子
下面是四个自定义彩色导航条的例子。
[JSFiddle链接][2]
还有SCSS代码。
最后,一个小礼物
我刚刚做了一个脚本,可以让你生成你的主题。 TWBSColor - 生成你自己的Bootstrap导航条
[更新]。TWBSColor现在可以生成SCSS/SASS/Less/CSS代码。
[更新]:从现在开始,你可以使用Less作为TWBSColor提供的默认语言
[更新]:TWBSColor现在支持下拉菜单的着色。 [更新]:TWBSColor现在可以选择你的版本(增加了对Bootstrap 4的支持)[更新]:TWBSColor现在可以选择你的版本。
为Bootstrap 4更新了2018年。
在Bootstrap 4中,改变导航条的颜色是不同的(而且更容易一点)。你可以创建一个自定义的导航条类,然后引用它来改变导航条,而不影响其他Bootstrap导航。
Bootstrap 4.0
在Bootstrap 4中,改变导航条所需的CSS要少得多...
Bootstrap 4自定义导航栏演示![在此输入图片描述][1]
改变活动/悬停链接的底色也可以用同样的CSS,但如果你想让bg颜色充满链接的全部高度,你必须调整padding...
py-0
去掉整个导航条的垂直填充......
Bootstrap 4 更改链接和背景颜色演示
另见:https://stackoverflow.com/questions/42586729/
Bootstrap 3
Bootply上的自定义导航栏演示
如果导航条有下拉菜单,请添加以下内容来改变下拉菜单的颜色。
带下拉的演示
使用更少
你也可以考虑编译你自己的版本。试试http://getbootstrap.com/customize/(其中有一个单独的部分用于导航栏设置(默认导航栏和反转导航栏)),或者从https://github.com/twbs/bootstrap,下载你自己的副本。
你可以在
variables.less
中找到导航条的设置。navbar.less
是用来编译导航条的(取决于variables.less
和mixins.less
)。复制'navbar-default部分',并填入你自己的颜色设置。改变
variables.less
中的变量将是最简单的方法(改变默认或反向导航条不会有问题,因为你每页只有一个导航条)。在大多数情况下,你不会改变所有的设置。
你也可以试试http://twitterbootstrap3navbars.w3masters.nl/。这个工具可以为你的自定义导航条生成CSS代码。另外,你还可以为导航条添加渐变的颜色和边框。