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

成都創新互聯公司主要從事網站建設、網站設計、網頁設計、企業做網站、公司建網站等業務。立足成都服務赫章,10余年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:18980820575

列表組

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

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

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

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

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

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

• 使用上下文類來設置具有狀態背景和顏色的列表項的樣式

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

代碼練習：

		<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中列表組、分頁和進度條組件怎么用
本文路徑：http://m.newbst.com/article40/jicjho.html

成都網站建設公司_創新互聯，為您提供靜態網站、ChatGPT、小程序開發、軟件開發、網站內鏈、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯