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