bootstrap导航、导航条及导航翻页相关详解

一，导航

导航条都需要.nav,基础样式为相对定位、块级显示、padding、active、disabled状态下的颜色等

1.选项卡导航

<li class=“active“><a href=“#“>Home</a></li>//第一个高亮

<li class=”disabled”><a href=“#“>SVN</a></li>//第二个禁用

</ul>

2.胶囊式选项卡导航

3.堆叠式导航

4.自适应导航

在ul上添加.nav-justified样式

5.二级导航实现

<ul class=”nav nav-tabs”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>VB.Net</a></li>
<li class=”dropdown”>
<a data-toggle=”dropdown” href=”#”>
Java <span class=”caret”></span>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Swing</a></li>
<li class=”divider”></li>
<li><a href=”#”>分离的链接</a></li>
</ul>
</li>
<li><a href=”#”>PHP</a></li>
</ul>

二，导航条

1.基础导航条

<nav class=”navbar navbar-default”> //2.在外包装父元素容器上应用.navbar .navbar-default样式

　<div class=”navbar-header”>
　 <a href=”##” class=”navbar-brand”>啦啦啦</a>
　</div>
<ul class=”nav navbar-nav”> //1.在ul上设置.nav .navbar-nav样式
<li class=”active”><a href=”##”>网站首页</a></li>
<li><a href=”##”>系列教程</a></li>
<li><a href=”##”>名师介绍</a></li>
</ul>
</nav>

其中.nav .navbar .navbar-nav等控制大小、内外边距、行距等方面的样式

颜色是由.narbar-default和navbar-inverse控制

2.导航条中的表格

在.navbar容器内放置form元素，然后在form元素上应用.navbar-form样式，并用.navbar-left和.navbar-right实现左右浮动样式

3.导航条中的按钮、文本和链接

导航条中的按钮navbar-btn

导航条中的文本navbar-text

导航条中的普通链接navbar-link

4.顶部固定或底部固定

使用.navbar-fixed-top和.navbar-fixed-bottom进行固定，为了不阻挡其他元素，要设置body{padding-top:70px;}或body{padding-bottom:70px;}

5.响应式导航条

<nav class=”navbar navbar-default”>
<div class=”navbar-header”>//.navbar-header。该类不仅会使头部的文字看起来大一些，而且也是导航栏的头部，当小屏幕上时是唯一能够显示的导航栏内容之一。

<!–1.navbar-toggle样式效果是：相对定位，右浮动，内容居中，焦点时取消轮廓，在大于768px时display:none，且.icon-bar图标要包在其中。2.data-toggle指以什么事件触发，在这里指折叠。3.data-target指事件的目标，在这里指折叠的对象，内容可以用class或id表示，在这里指class为navbar-responsive-collapse的div。4.–>

<span class=”sr-only”>Toggle Navigation</span> //隐藏
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>

<!–.icon-bar在.navbar-toggle中时，样式为块级显示，高度限制为3个，垂直间距为4px–>
</button>

<a href=”##” class=”navbar-brand”>慕课网</a> //.navbar-brand规定了颜色和样式
</div>

<!–1.collapse样式为默认隐藏,2.navbar-collapse样式为大于768px时，强制显示，块级等。3.navbar-responsive-collapse表示事件目标。4.点击时，添加class=in,显示为块–>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”##”>网站首页</a></li>
<li><a href=”##”>系列教程</a></li>
<li><a href=”##”>名师介绍</a></li>
<li><a href=”##”>成功案例</a></li>
<li><a href=”##”>关于我们</a></li>
</ul>
</div>
</nav>