腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Twitter Bootstrap 3中更改导航栏颜色？

问如何在Twitter Bootstrap 3中更改导航栏颜色？

提问于 2017-12-15 02:38:56

回答 2关注 0查看 1K

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

bootstrap

游戏社交场景解决方案

整合腾讯在社交娱乐及游戏体验方面的技术能力，满足玩家对游戏内即时通信和语音互动的社交刚性需求，提升游戏黏性

回答 2

人生的旅途

发布于 2017-12-15 03:49:09

您可以创建自定义的导航栏类，然后引用它来更改导航栏而不会影响其他的Bootstrap导航。

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

Bootstrap 3 CSS

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

如果导航栏有下拉菜单，请添加以下内容以更改下拉菜单的颜色：

/* 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;

Bootstrap 4更新

我知道原来的问题是为3.x，但我认为一个新的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;

最爱开车啦

发布于 2017-12-15 03:46:49

可用的导航栏

你有两个基本的navbars：

<!-- A light one -->

<nav class="navbar navbar-default" role="navigation"></nav>

<!-- A dark one -->

<nav class="navbar navbar-inverse" role="navigation"></nav>

默认的颜色使用

这里是主要颜色和它们的用法：

#F8F8F8：navbar背景

#E7E7E7：navbar边框

#777：默认颜色

#333：悬停颜色（#5E5E5E为.nav-brand）

#555：活动的颜色

#D5D5D5：活动背景

默认样式

如果你想放置一些自定义的风格，这里是你需要改变的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;

和开发者交流更多问题细节吧，去写回答

bootstrap 导航栏

html css

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class="sr-only">展开导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">网站标题</a> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> <li><a href="#">导航标题2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">下拉菜单1</a></li> <li class="divider"></li> <li><a href="#">下拉菜单2</a></li> <li class="divider"></li> </ul> </li> </ul> </div> </nav> </body> </html>

用户5760343

2019/07/05

3.5K0

bootstrap导航栏(bootstrap页面)

bootstrap https java 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/126954.html原文链接：https://javaforall.cn

全栈程序员站长

2022/08/01

3.7K0

bootstrap 导航栏 3

html css jquery javascript

用户5760343

2019/07/05

2.2K0

bootstrap nav导航栏

java apache

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

用户5760343

2019/07/05

3.8K0

bootstrap affix 左侧栏导航栏

http linux

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 附加导航（Affix）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> /* Custom Styles / ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; / Set the top position of pinned element */ } </style> <script> ("#myNav").affix({ offset: { top: 125 } }); }); </script> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" id="myNav"> <li class="active"><a href="#section-1">第一部分</a></li> <li><a href="#section-2">第二部分</a></li> <li><a href="#section-3">第三部分</a></li> <li><a href="#section-4">第四部分</a></li> <li><a href="#section-5">第五部分</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in

用户5760343

2019/07/07

2.9K0

bootstrap 垂直式导航栏

html css jquery javascript

用户5760343

2019/07/05

2K0

iOS 原生导航栏修改导航栏文字颜色大小

ios

// 黑色导航栏状态栏 self.navigationController.navigationBar.barStyle = UIBarStyleBlack; self.navigationController.navigationBar.barTintColor = [UIColor blackColor]; // 白色文字 // 中间title [self.navigationController.navigationBar setTitleTextAttributes:@{NSFontAttr

ppppy

2022/11/15

2.6K0

bootstrap 胶囊式导航栏

html css jquery javascript

用户5760343

2019/07/05

1.1K0

bootstrap 常用导航栏页脚常用**

html css

用户5760343

2019/07/05

8860

bootstrap 按钮组水平导航栏

button class default dropdown href

用户5760343

2019/07/05

1.6K0

bootstrap nav 黑色样式导航栏

class dropdown href nav navbar

黑色样式导航栏 <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

用户5760343

2019/07/05

1.6K0

Android系统更改状态栏字体颜色

android

原文地址：http://blog.isming.me/2016/01/09/chang-android-statusbar-text-color/，转载请注明出处。随着时代的发展，Android的状态栏都不是乌黑一片了，在Android4.4之后我们可以修改状态栏的颜色或者让我们自己的View延伸到状态栏下面。我们可以进行更多的定制化了，然而有的时候我们使用的是淡色的颜色比如白色，由于状态栏上面的文字为白色，这样的话状态栏上面的文字就无法看清了。因此本文提供一些解决方案，可以是MIUI6+,Flyme4+

非著名程序员

2018/02/02

2.5K0

bootstrap 面包屑导航栏常用样式

class href image png

用户5760343

2019/07/05

1.8K0

bootstrap 导航栏淡入淡出常用样式

ios java 网站 apache

<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鸟教程 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div>

用户5760343

2019/07/05

1.8K0

缩小自定义导航栏按钮之间的距离修改导航栏按钮图片的颜色不用系统的颜色

ios

UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];

conanma

2021/05/11

1.8K0

bootstrap nav导航栏跟随页面滚动常用样式

c++

navbar-static-top <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

用户5760343

2019/07/05

3.7K0

怎么修改锦鲤主题导航栏的颜色背景

html css

其实一直有人问，怎么修改导航栏的黑色背景，因为这个涉及div框架和class样式表，不是一段代码就能搞定的，今天有时间就把教程整理以下，当然不是一步一步教，因为我并不适合做老师，我只是把成品拿出来，然后把对应的颜色空余出来，至于要什么颜色，自己添加就行了。

李洋博客

2021/06/15

1.4K0

BootStrap 导航栏实现下滑消失，上滑出现

css

首先是导入bootstrap等样式，和jquery，再复制一个nav组件；代码如下:

多凡

2020/07/27

2K0

Bootstrap响应式前端框架笔记十——导航栏相关组件

bootstrap

Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏，示例如下：

珲少

2018/08/15

2.4K0

点击加载更多

相似问题

如何更改导航栏中后退按钮的颜色？

2247

云通信会话列表导航栏题文字的颜色怎么改？

1185

如何使Twitter的 bootstrap工具提示有多行？

286

tabBar导航栏图标大小建议？

3723

如何更改Bootstrap Popover的宽度？

21.6K

问如何在Twitter Bootstrap 3中更改导航栏颜色？

游戏社交场景解决方案

回答 2

人生的旅途

最爱开车啦

如何更改导航栏中后退按钮的颜色？

云通信会话列表导航栏题文字的颜色怎么改？

如何使Twitter的 bootstrap工具提示有多行？

tabBar导航栏图标大小建议？

如何更改Bootstrap Popover的宽度？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐