导航条中加入非导航的链接 key:navbar-link - Bootstrap 导航条

导航条中加入非导航的链接

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 导航条中加入非导航的链接

或许你希望在标准的导航组件之外添加标准链接,那么,使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

结合图标的导航链接

如果您想在常规的导航栏导航组件内使用图标,那么请使用 class glyphicon glyphicon-* 来设置图标,更多请查看 Bootstrap 图标

下面的实例演示了这点:

  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-default" role="navigation">  
  12.     <div class="container-fluid">  
  13.         <div class="navbar-header">  
  14.             <a class="navbar-brand" href="#">bootstrap教程</a>  
  15.         </div>  
  16.         <ul class="nav navbar-nav navbar-right">  
  17.             <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>  
  18.             <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>  
  19.         </ul>  
  20.     </div>  
  21. </nav> 
  22.  
  23. </body>   
  24. </html>   

CTRL + D 收藏本页

学习导航


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