导航组件和导航条组件
**
导航组件
**
一般用于做页面里的选项卡等效果(导航有个基础类nav 这个是必须写的基础类)
1,标签页效果(选项卡效果)
nav nav-tabs
active
2,胶囊效果
nav nav-pills
胶囊式也可以竖着排列 添加nav-stacked就可以了
<ul class="nav nav-pills nav-stacked">
...
</ul>
两种形式如何让他们两边对齐,选项均分呢?
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
就是在每一种类后面添加 nav-justified 这个类就可以实现均分效果
**
导航条组件(网上最上面或者最下面的导航)
**
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</nav>
如何在导航中使用表单(比如导航条里面的搜索框)
navbar-form 让输入框适应导航条
navbar-left 让输入框左对齐
对齐方式改变
navbar-right 让搜索框右对齐
**
在导航条内添加按钮
**
<button type="button" class="btn btn-default navbar-btn">按钮</button>
**
把导航条固定在顶部
**
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>