Bootstrap之导航条
基本导航条
<!-- navbar-inverse相反颜色风格 -->
<!-- navbar-static-top去除圆角 -->
<!-- navbar-fixed-top滚动时固定在顶部 (根据导航条的高度 给body的margin-top可以解决导航条遮盖问题)
navbar-fixed-bottom滚动时固定在底部
-->
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-fixed-top">
<!-- 把容器写在导航里(常用做法) -->
<div class="container">
<!-- navbar-brand用来存放logo (需要一个容器navbar-header包裹住) -->
<div class="navbar-header">
<a href="" class="navbar-brand">此处存放logo</a>
</div>
<!-- nav navbar-nav 菜单 -->
<!-- 导航左浮动navbar-left
右浮动navbar-right
-->
<!-- navbar-btn使导航中的按钮垂直居中 -->
<!-- navbar-link 改变链接颜色 -->
<!-- navbar-text使文字垂直居中 -->
<!-- navbar-form用于form表单 -->
<ul class="nav navbar-nav">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
</div>
</nav>响应式导航条
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- navbar-toggle导航条点击切换 -->
<!-- data-target指定要切换的菜单 -->
<button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
<!-- icon-bar 横条 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">此处存放logo</a>
</div>
<!-- collapse navbar-collapse 折叠 -->
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
</div>
</div>
</nav>滚动监听
<!-- data-offset=\'200\'距离顶端200px时发生变化 -->
<!-- data-target 指定监听的元素 -->
<!-- data-spy 指定监听事件 -->
<body data-spy="scroll" data-target="#myNavbar" data-offset="200">
<!-- 滚动监听 在监听的元素必须有相对定位 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">此处存放logo</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active"><a href="#aa">one</a></li>
<li><a href="#bb">two</a></li>
<li><a href="#cc">three</a></li>
</ul>
</div>
</div>
</nav>
<div class="pos">aaaaaaaa</div>
<div class="pos">bbbbbbbb</div>
<div class="pos">cccccccc</div>
</body>- 上一篇 »Bootstrap 滚动监听，Scrollspy插件
- 下一篇 »bootstrap的导航改造