导航条静止在顶部 key:navbar-static-top container container-fluid - Bootstrap 导航条

导航条静止在顶部

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 导航条静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个 .container.container-fluid 容器,用于将导航条居中对齐并在两侧添加内补(padding)。

.navbar-fixed-* 类不同的是,你不用给 body 添加任何内补(padding)。

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

 

静态的顶部

如需创建能随着页面一起滚动的导航栏,请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距(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-default navbar-static-top" 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>    

CTRL + D 收藏本页

学习导航


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