bootstrap框架之导航

导航

种类：

1. 选项卡导航 .nav-tabs，可以结合Tab插件使用显示tab的内容
2. 胶囊式选项卡导航 .nav-pills
3. 堆叠式导航 ：在胶囊式基础上添加 .nav-stacked，其实效果就是竖着的胶囊式导航
4. 自适应导航：在上面的基础上添加 .nav-justified。设置li充满整个父容器

<ul class="nav nav-tabs"></ul>
<ul class="nav nav-"></ul>

导航条

在navbar的整个设计上，nav、navbar、navbar-nav等是控制大小、内外边距、行距等方面的样式；
颜色则由navbar-default和navbar-inverse这两大风格控制

基础导航条

  <div class="navbar navbar-default">
		 <div class="navbar-header">
    		<a href="" class="navbar-brand"></a>
    	</div>
    	<ul class="nav navbar-nav">
	    	<li><li>
    	</ul>
    	<ul class="nav navbar-nav">
	    	<li><li>
    	</ul>
    	...
    </div>
  </div>

主要样式：

.navbar{
  position: relative;
  min-height: 50px;
}
.nav::before,
.navbar-header::before,
.navbar::before{
  display: table;
  content: '';
}
.nav::after,
.navbar-header::after,
.navbar::after{
  clear: both;
  display: table;
  content: '';
}

.navbar-header{
  float: left;
}
.nav{
  padding-left: 0;
  list-style: none;
}
.nav > li{
  position: relative;
  display: block;
}
.nav > li > a{
  position: relative;
  display: block;
}
.navbar-nav{
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-brand{
  float: left;
  padding: 15px;
}

上面的源码是不完全的，我是摘取自我感觉对于导航条的形成有重要作用的样式。从源码中看得到，float:left是最重要的，对于position:relative的样式作用暂时不懂，等看到导航条里的表单的时候再看看。还有 伪类::before和::after 的作用也是蛮大的，取掉使用浮动的副作用。剩下的就是使用padding、border、border-radius来进行修饰导航条的外观，li 和 a 标签的空间大小。

顶部或底部固定的导航条

需要给body设置padding-top或者padding-bottom，样式使用的display:flexd。

<div class="navbar navbar-default navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
		</div>
		<ul class="nav navbar-nav">
			...
		</ul>
	</div>
</div>
<div class="nav navbar-fixed-bottom"></div>

响应式导航条

<!--在基础导航上-->
<div class="navbar-header">
	<button data-toggle="collapse" data-target=".navbar-responsive-collapse" class="navbar-toggle">
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>
	<a href="" class="navbar-brand"></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
	<ul class="nav navbar-nav">
	</ul>
</div>

导航中的表单

<div class="navbar navbar-default">
	<div class="navbar-header"><div>
	<ul class="nav navbar-nav"></ul>
	<form class="navbar-form">
		<div class="form-group">
			<input class="form-control">
		</div>
		<button class="btn btn-default"></button>
	</form>
</div>

源码上设置display为行块级元素。大小通过设置padding等来实现，不懂的是手敲出来的代码实现的效果大小是不同（原因懂了，因为我没设置box-sizing：border-box）。
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式，使用场景

1. 使行内元素盒模型与其行内元素容器垂直对齐
2. 垂直对齐表格单元内容:

分页导航

1. 可以设置状态，允许点击和不允许点击
2. 可以设置大小 .pagination-
3. li里面支持a和span标签

<!--页码分页-->
<ul class="pagination">
	<li class="active"><a href=""></a></li>
	<li><a href="">1</a></li>
	<li class="disabled"><a href=""></a></li>
</ul>
<!--翻页-->
<ul class="pager">
	<li>上一页</li>
	<li>下一页</li>
</ul>
<ul class="pager">
	<li class="previous">上一页</li>
	<li class="next">下一页</li>
<ul>

主要样式：

.pagination{
  display: inline-block;
  padding-left: 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span{
  position: relative;
  float: left;
  padding: 16px 12px;
  margin-left: -1px;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination::before,
.pager::before{
  display: table;
  content: '';
}
.pagination::after,
.pager::after{
  display: table;
  content: '';
  clear: both;
}
.pager{
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
}
.pager li {
  display: inline;
}
.pager li > a,
.pager li > span{
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

在源码阅读中，主要是将li变成行级line元素，这样所有li都在一行上。li里面的a和span变成行块级元素（目前不懂这两标签相对定位是干吗嘛用的）。在手敲的时候，才了解到text-align对于是块级元素有效。