淺析Bootstrap中列表組、分頁和進度條組件的用法

Bootstrap中怎麼實作清單群組、分頁和進度列？以下這篇文章跟大家介紹Bootstrap中列表群組、分頁和進度條元件的用法，希望對大家有幫助！

清單群組

• 使用.list-group選擇清單群組
• 新增.active到a.list-group-item以指示目前的活動選擇。 【相關推薦：《bootstrap教學》】
• #新增.disabled到a.list-group-item以使其顯示為停用
• 使用<a> 或<button> 透過新增來建立具有懸停、停用和活動狀態的可操作.list-group- item-action列表組項
• 新增.list-group-flush以刪除一些邊框和圓角以在父容器（例如卡片）中邊對邊呈現列表組項目
• 新增.list-group-horizo​​ntal以跨所有斷點將清單群組項目的佈局從垂直變更為水平
• 使用上下文類別來設定具有狀態背景和顏色的清單項目的樣式
• 在某些實用程式的幫助下，將徽章新增至任何清單群組項目以顯示未讀計數、活動等

程式碼練習：

		<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設定大小分頁效果 可新增.justify-content-*進行居中，居左，居右設置 程式碼練習：

		<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）的最大值。
• 我們在內部使用 .progress-bar 來指示到目前為止的進度。
• .progress-bar 需要透過內嵌樣式、工具類別或自訂 CSS 屬性來設定其寬度。
• 透過在 .progress-bar 元素內新增文本，就可以為進度條（progress bar）加上標籤。
• 為 .progress 設定了一個 height 值，因此，如果你改變了該值，內部的 .progress-bar 就會自動地調整尺寸。
• 透過使用背景色相關的工具類別可以改變單一進度條（progress bar）的外觀。
• 如果需要，可以在一個進度條（progress）元件內可以新增多個進度條（progress bar）。
• 為任何 .progress-bar 添加 .progress-bar-striped 即可新增條紋樣式，這是透過CSS 的漸進功能在進度條（progress bar ）的背景色上應用條紋效果實現的。
• 條紋漸層也可以有動畫效果。為 .progress-bar 添加 .progress-bar-animated 即可利用 CSS3 動畫功能添加條紋從右到左滾動的動畫效果。

程式碼練習：

		<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>

更多關於bootstrap的相關知識，可存取：bootstrap基礎教學！ ！

以上是淺析Bootstrap中列表組、分頁和進度條組件的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！