Bootstrap中列表組、分頁和進度條組件怎么用

這篇文章主要介紹了Bootstrap中列表組、分頁和進度條組件怎么用的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Bootstrap中列表組、分頁和進度條組件怎么用文章都會有所收獲，下面我們一起來看看吧。

列表組

• 使用.list-group選擇列表組

• 添加.active到 a.list-group-item以指示當前的活動選擇。

• 添加.disabled到 a.list-group-item以使其顯示為禁用

• 使用<a> 或<button> 通過添加來創(chuàng)建具有懸停、禁用和活動狀態(tài)的可操作.list-group-item-action列表組項

• 添加.list-group-flush以刪除一些邊框和圓角以在父容器（例如卡片）中邊對邊呈現(xiàn)列表組項目

• 添加.list-group-horizontal以跨所有斷點將列表組項的布局從垂直更改為水平

• 使用上下文類來設(shè)置具有狀態(tài)背景和顏色的列表項的樣式

• 在某些實用程序的幫助下，將徽章添加到任何列表組項目以顯示未讀計數(shù)、活動等

代碼練習(xí)：

		<ul class="list-group">
			<li class="list-group-item active">列表組一</li>
			<li class="list-group-item">列表組二</li>
			<li class="list-group-item disabled">列表組三</li>
		</ul>
		<br />
		<div class="list-group list-group-flush">
			<a href="#" class="list-group-item active list-group-item-action">列表組一</a>
			<a href="#" class="list-group-item list-group-item-action">列表組二</a>
			<a href="#" class="list-group-item disabled list-group-item-action">列表組三</a>
		</div>
		<br />
		<ul class="list-group list-group-horizontal-sm">
			<li class="list-group-item active">列表組一</li>
			<li class="list-group-item list-group-item-danger">列表組二</li>
			<li class="list-group-item disabled">列表組三</li>
		</ul>
		<br />
		<ul class="list-group">
			<li class="list-group-item d-flex justify-content-between align-items-center">列表組一
			<span class="badge badge-danger">標記</span></li>
			<li class="list-group-item">列表組二</li>
			<li class="list-group-item disabled">列表組三</li>
		</ul>

分頁

添加.pagination，字標簽添加.page-item，鏈接標簽添加.page-link
可添加.pagination-lg或.pagination-sm設(shè)置大小分頁效果 可添加.justify-content-*進行居中，居左，居右設(shè)置 代碼練習(xí)：

		<ul class="pagination pagination-sm justify-content-center">
			<li class="page-item"><a href="#" class="page-link">首頁</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">下一頁</a></li>
		</ul>

進度條

• 我們使用 .progress 作為最外層元素，用于指示進度條（progress bar）的最大值。

• 我們在內(nèi)部使用 .progress-bar 來指示到目前為止的進度。

• .progress-bar 需要通過內(nèi)聯(lián)樣式、工具類或自定義 CSS 屬性來設(shè)置其寬度。

• 通過在 .progress-bar 元素內(nèi)添加文本，就可以為進度條（progress bar）添加標簽。

• 為 .progress 設(shè)置了一個 height 值，因此，如果你改變了該值，內(nèi)部的 .progress-bar 將自動地調(diào)整尺寸。

• 通過使用背景色相關(guān)的工具類可以改變單個進度條（progress bar）的外觀。

• 如果需要，可以在一個進度條（progress）組件內(nèi)可以添加多個進度條（progress bar）。

• 為任何 .progress-bar 添加 .progress-bar-striped 即可添加條紋樣式，這是通過 CSS 的漸變功能在進度條（progress bar）的背景色上應(yīng)用條紋效果實現(xiàn)的。

• 條紋漸變也可以有動畫效果。為 .progress-bar 添加 .progress-bar-animated 即可利用 CSS3 動畫功能添加條紋從右到左滾動的動畫效果。

代碼練習(xí)：

		<div class="progress">
			<div class="progress-bar w-50 ">
			</div>
		</div>
		<br />
		<div class="progress" style="height: 30px;">
			<div class="progress-bar bg-danger" style="width: 35%;">
				30%
			</div>
		</div>
		<br>
		<div class="progress">
			<div class="progress-bar bg-success w-25"></div>
			<div class="progress-bar bg-danger w-25"></div>
			<div class="progress-bar bg-info w-25"></div>
		</div>
		<br />
		<div class="progress">
			<div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated">
			</div>
		</div>

關(guān)于“Bootstrap中列表組、分頁和進度條組件怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Bootstrap中列表組、分頁和進度條組件怎么用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。