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