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

青灯夜游
發布: 2022-05-10 21:19:21
轉載
2896 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板