改变导航条的外观颜色(反色)

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 改变导航条的外观颜色(反色)

通过添加 .navbar-inverse 类可以改变导航条的外观。

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

 

反色的导航栏

为了创建一个带有黑色背景白色文本的反色的导航栏,只需要简单地向 .navbar class 添加 .navbar-inverse class 即可,如下面的实例所示:

为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.    <title>Bootstrap 实例 - 改变默认导航的外观颜色</title>   
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   
  6.    <script src="/scripts/jquery.min.js"></script>   
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>   
  8. </head>   
  9. <body>   
  10.    
  11. <nav class="navbar navbar-inverse" role="navigation"> 
  12.     <div class="container-fluid"> 
  13.     <div class="navbar-header"> 
  14.         <a class="navbar-brand" href="#">bootstrap教程</a> 
  15.     </div> 
  16.     <div> 
  17.         <ul class="nav navbar-nav"> 
  18.             <li class="active"><a href="#">iOS</a></li> 
  19.             <li><a href="#">SVN</a></li> 
  20.             <li class="dropdown"> 
  21.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  22.                     Java <b class="caret"></b> 
  23.                 </a> 
  24.                 <ul class="dropdown-menu"> 
  25.                     <li><a href="#">jmeter</a></li> 
  26.                     <li><a href="#">EJB</a></li> 
  27.                     <li><a href="#">Jasper Report</a></li> 
  28.                     <li class="divider"></li> 
  29.                     <li><a href="#">分离的链接</a></li> 
  30.                     <li class="divider"></li> 
  31.                     <li><a href="#">另一个分离的链接</a></li> 
  32.                 </ul> 
  33.             </li> 
  34.         </ul> 
  35.     </div> 
  36.     </div> 
  37. </nav> 
  38.    
  39. </body>   
  40. </html>   

 


没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)