Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签

    在开发搜索结果页、列表页时一般会使用到分页器控件，Bootstrap中提供了方便的类来进行分页器的建立，示例以下：

<p>标准的分页器控件</p>
		<ul class="pagination">
			<li>
				<a href="#">&laquo;</a>
			</li>
			<li>
				<a href="#">1</a>
			</li>
			<li>
				<a href="#">2</a>
			</li>
			<li>
				<a href="#">3</a>
			</li>
			<li>
				<a href="#">4</a>
			</li>
			<li>
				<a href="#">5</a>
			</li>
			<li>
				<a href="#">&raquo;</a>
			</li>
		</ul>

效果以下：

为li元素添加disabled类或者active类能够将其设置为禁用或者激活状态，示例以下：

<p>使用disabled类与active类能够将页标签设置为禁用或激活</p>
		<ul class="pagination">
			<li class="disabled">
				<a href="#">&laquo;</a>
			</li>
			<li class="active">
				<a href="#">1</a>
			</li>
			<li>
				<a href="#">2</a>
			</li>
			<li>
				<a href="#">3</a>
			</li>
			<li>
				<a href="#">4</a>
			</li>
			<li>
				<a href="#">5</a>
			</li>
			<li>
				<a href="#">&raquo;</a>
			</li>
		</ul>

效果以下图：

    除了分页器控件，Bootstrap中还提供了一种更为简单的分页控件，示例以下：

<p>只有前进与后退的分页器</p>
		<ul class="pager">
			<li>
				<a href="#">Previous</a>
			</li>
			<li>
				<a href="#">Next</a>
			</li>
		</ul>

效果以下：

这种分页控件默认是居中的，使用previous与next类能够实现两端对齐的效果，示例以下：

<p>进行两端对齐</p>
		<ul class="pager">
			<li class="previous">
				<a href="#">Previous</a>
			</li>
			<li class="next">
				<a href="#">Next</a>
			</li>
		</ul>

效果以下：

    Bootstrap中的标签是一种用于展现文本的控件，示例代码以下：

<p>标签控件演示</p>
		<span class="label label-default">标签</span>
		<span class="label label-primary">标签</span>
		<span class="label label-success">标签</span>
		<span class="label label-info">标签</span>
		<span class="label label-warning">标签</span>
		<span class="label label-danger">标签</span>

效果以下：

开发者也能够使用badge类来建立气泡，示例以下：

<p>进行气泡的建立</p>
		<a href="#">连接<span class="badge">3</span></a>
		<button class="btn btn-primary" type="button">
  		按钮
  		<span class="badge">4</span>
		</button>

   另外，本篇博客中全部的实例代码及显示效果，在以下地址中，须要的能够自行对照学习。

http://zyhshao.github.io/bootStrapDemo/pageAndLabel.html。

前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536