Bootstrap中怎麼實作清單群組、分頁和進度列？以下這篇文章跟大家介紹Bootstrap中列表群組、分頁和進度條元件的用法，希望對大家有幫助！
.active到a.list-group-item以指示目前的活動選擇。 【相關推薦：《bootstrap教學》】.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-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中文網其他相關文章！
