建站知识

当前位置:首页 > 新闻资讯 > 建站知识 >

已阅读

bootstrap框架-导航栏

来源:admin       时间:2016-01-11 09:03         责任编辑:admin
1、导航外框架
向 <nav> 标签添加 class .navbar、.navbar-default。向上面的元素添加 role="navigation",有助


于增加可访问性
<nav class="navbar navbar-default" role="navigation">


</nav>


2.新增导航头部 .navbar-header
.navbar-header 里一般放置logo与菜单切换按钮


<div class="navbar-header"> </div>
在navbar-header内新增logo的class


<a class="navbar-brand" href="index.html"><img src="dist/images/OneLeaf-logo.png" 


width="128" height="72"></a>      


h5切换按钮
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-


target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle 


navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span 


class="icon-bar"></span> </button>


3.添加带有 class .nav、.navbar-nav 的无序导航菜单列表
<ul class="nav navbar-nav"> </ul>
 
4.响应式的导航栏 加入 navbar-collapse collapse 类


<div id="navbar" class="navbar-collapse collapse">
</div>


5.搜索框 navbar内
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交</button>
      </form>


6.导航栏中的按钮,可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮,按钮


在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。      
<button type="button" class="btn btn-default navbar-btn">
         导航栏按钮
      </button>
7.导航栏中的文本
 <p class="navbar-text">Signed in as Thomas</p>


8.非导航链接    <a href="#" class="navbar-link">Thomas</a>


9.可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、


表单、按钮或文本 这些组件。




10. 固定在定部 navbar-fixed-top 在导航外框架中增加这个样式。


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">


11. 固定到底部 请向 .navbar class 添加 class .navbar-fixed-bottom