Bootstrap中怎麼加入列表?以下這篇文章跟大家介紹Bootstrap5列表群組List group元件的用法,希望對大家有幫助!
清單群組是顯示一系列內容的靈活且強大的元件。 Bootstrap修改和擴展它們以支援其中的任何內容。 最基本的列表組是一個無序的列表,其中包含列表項和適當的類別。在它的基礎上使用下面的選項,或根據需要使用您自己的CSS。 【相關推薦:《bootstrap教學》】
看下面列表是不很簡單,就是在html列表元素的基礎上加了兩個類別list-group和ist-group-item
將active加到list-group-item指示當前的活動狀態。 將disabled加到list-group-item使其呈現停用。
使用a或button,並加入list-group-item-action來建立具有hover、停用和啟用狀態的動態清單群組。我們分離這些偽類別,以確保由非互動元素組成的清單群組(如li或div)不提供點擊或觸擊。
確保不要在這裡使用標準的btn。
在list-group中加入list-group-flush來移除部分邊框及圓角,以在父容器中(如:卡片)產生邊緣貼齊的清單群組。
在list-group中新增list-group-numbered修飾符類(並可選地使用ol元素)以選擇編號的列表組項。數字是透過CSS產生的(與ol的預設瀏覽器樣式相反),以便更好地放置在清單群組項目中,並允許更好的自訂。
數字由ol上的counter reset生成,然後在li上用 ::before 元素設定樣式並放置在counter increment和content中。
- 第一项内容
- 第二项内容
- 第三项内容
li中也可以使用其他元素。
第一项标题第一项内容 第二项标题第二项内容 第三项标题第三项内容
清單並不是總是垂直排列的,在list-group中加入list-group-horizontal將清單顯示改為水平。
你也選擇加入響應式變更.list-group-horizontal-{sm|md|lg|xl|xxl},使清單群組從該斷點的最小min-width開始水平放置。
目前水平列表群組不能與Flush列表群組組合並使用。
- 第一项内容
- 第二项内容
- 第三项内容
在list-group-item中加入list-group -item-顏色
可以改變清單背景顏色。
這裡加入了上一個範例中沒有的懸停樣式。也支援active狀態;應用它以指示情境式列表組項上的活動選擇。
同過通用類,向任何清單項目新增標籤以顯示未讀計數、活動等。
- 第一项内容 14
- 第二项内容 14
- 第三项内容 14
透過彈性盒子通用類,幾乎任何的HTML都能加入到項目內,如以下的清單群組連接。
将Bootstrap的复选框与单选框放在列表群组中,并依据需要进行自定义。您可以在不使用label的情况下使用它们,但请记住要包含aria-label以及必要的内容。
下面两个例子radio和checkbox用法都是一样的,所以每样演示了一个。
如果您希望将label作为list-group-item使用以创造较大的点击区域,这么做是可以的。用将表单和文字包裹在一起即可。
更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!
以上是Bootstrap中怎麼加入列表?清單群組的用法淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章!