溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“Bootstrap中如何添加列表”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Bootstrap中如何添加列表”吧!
列表組是顯示一系列內(nèi)容的靈活而強(qiáng)大的組件。Bootstrap修改和擴(kuò)展它們以支持其中的任何內(nèi)容。 最基本的列表組是一個(gè)無序的列表，其中包含列表項(xiàng)和適當(dāng)?shù)念?。在它的基礎(chǔ)上使用下面的選項(xiàng)，或者根據(jù)需要使用您自己的CSS。
看下面列表是不很簡(jiǎn)單，就是在html列表元素的基礎(chǔ)上加了兩個(gè)類list-group和ist-group-item
<ul class="list-group"> <li class="list-group-item">第一行</li> <li class="list-group-item">第二行</li> <li class="list-group-item">第三行</li> <li class="list-group-item">第四行</li> <li class="list-group-item">第五行</li> </ul>
將active加到list-group-item指示當(dāng)前的活動(dòng)狀態(tài)。 將disabled加到list-group-item使其呈現(xiàn)禁用。
<ul class="list-group"> <li class="list-group-item">第一行</li> <li class="list-group-item active">第二行</li> <li class="list-group-item">第三行</li> <li class="list-group-item disabled">第四行</li> <li class="list-group-item">第五行</li> </ul>
使用a或button，并加入list-group-item-action來創(chuàng)建具有hover、禁用和啟用狀態(tài)的動(dòng)態(tài)列表群組。我們分離這些偽類別，以確保由非交互元素組成的列表群組（如li或div）不提供點(diǎn)擊或觸擊。
確保不要在這里使用標(biāo)準(zhǔn)的btn。
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> 第一行 </a> <a href="#" class="list-group-item list-group-item-action">第二行</a> <a href="#" class="list-group-item list-group-item-action">第三行</a> <a href="#" class="list-group-item list-group-item-action">第四行</a> <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">第五行</a> </div> <div class="list-group"> <button type="button" class="list-group-item list-group-item-action active" aria-current="true"> 第一行 button </button> <button type="button" class="list-group-item list-group-item-action">第二行</button> <button type="button" class="list-group-item list-group-item-action">第三行</button> <button type="button" class="list-group-item list-group-item-action">第四行</button> <button type="button" class="list-group-item list-group-item-action" disabled>第五行</button> </div>
在list-group中加入list-group-flush來移除部分邊框及圓角，以在父容器中（如：卡片）產(chǎn)生邊緣貼齊的列表群組。
<ul class="list-group list-group-flush"> <li class="list-group-item">第一行</li> <li class="list-group-item active">第二行</li> <li class="list-group-item">第三行</li> <li class="list-group-item disabled">第四行</li> <li class="list-group-item">第五行</li> </ul>
在list-group中添加list-group-numbered修飾符類（并可選地使用ol元素）以選擇編號(hào)的列表組項(xiàng)。數(shù)字是通過CSS生成的（與ol的默認(rèn)瀏覽器樣式相反），以便更好地放置在列表組項(xiàng)目中，并允許更好的自定義。
數(shù)字由ol上的counter reset生成，然后在li上用 ::before 元素設(shè)置樣式并放置在counter increment和content中。
<ol class="list-group list-group-numbered"> <li class="list-group-item">第一項(xiàng)內(nèi)容</li> <li class="list-group-item">第二項(xiàng)內(nèi)容</li> <li class="list-group-item">第三項(xiàng)內(nèi)容</li> </ol>
li中還可以使用其他元素。
<ol class="list-group list-group-numbered"> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">第一項(xiàng)標(biāo)題</div> 第一項(xiàng)內(nèi)容 </div> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">第二項(xiàng)標(biāo)題</div> 第二項(xiàng)內(nèi)容 </div> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">第三項(xiàng)標(biāo)題</div> 第三項(xiàng)內(nèi)容 </div> </li> </ol>
列表并不是總是豎向排列的，在list-group中加入list-group-horizontal將列表顯示改為水平。
你也選擇加入響應(yīng)式變化.list-group-horizontal-{sm|md|lg|xl|xxl}，使列表群組從該斷點(diǎn)的最小min-width開始水平放置。
目前水平列表群組不能與Flush列表群組合并使用。
<ol class="list-group list-group-horizontal"> <li class="list-group-item">第一項(xiàng)內(nèi)容</li> <li class="list-group-item">第二項(xiàng)內(nèi)容</li> <li class="list-group-item">第三項(xiàng)內(nèi)容</li> </ol>
在list-group-item中加入list-group-item-顏色可以改變列表背景顏色。
<ul class="list-group"> <li class="list-group-item">默認(rèn)</li> <li class="list-group-item list-group-item-primary">list-group-item-primary</li> <li class="list-group-item list-group-item-secondary">list-group-item-secondary</li> <li class="list-group-item list-group-item-success">list-group-item-success</li> <li class="list-group-item list-group-item-danger">list-group-item-danger</li> <li class="list-group-item list-group-item-warning">list-group-item-warning</li> <li class="list-group-item list-group-item-info">list-group-item-info</li> <li class="list-group-item list-group-item-light">list-group-item-light</li> <li class="list-group-item list-group-item-dark">list-group-item-dark</li> </ul>
這里添加了上一個(gè)示例中沒有的懸停樣式。還支持active狀態(tài)；應(yīng)用它以指示情境式列表組項(xiàng)上的活動(dòng)選擇。
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">默認(rèn)</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">list-group-item-primary</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">list-group-item-secondary</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">list-group-item-success</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">list-group-item-danger</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">list-group-item-warning</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">list-group-item-info</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">list-group-item-light</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">list-group-item-dark</a> </div>
同過通用類，向任何列表項(xiàng)目添加標(biāo)簽以顯示未讀計(jì)數(shù)、活動(dòng)等。
<ol class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> 第一項(xiàng)內(nèi)容 <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> 第二項(xiàng)內(nèi)容 <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> 第三項(xiàng)內(nèi)容 <span class="badge bg-primary rounded-pill">14</span> </li> </ol>
通過彈性盒子通用類，幾乎任何的HTML都能加入到項(xiàng)目內(nèi)，如以下的列表群組連接。
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">文章標(biāo)題</h6> <small>發(fā)布日期</small> </div> <p class="mb-1">文章內(nèi)容摘要</p> <small>小字，可用于文章來源、作者等信息</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">阿里會(huì)接盤蘇寧嗎？</h6> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">在蘇寧對(duì)網(wǎng)絡(luò)傳聞辟謠之后，海豚社獨(dú)家得到消息，阿里方面已經(jīng)派人入駐蘇寧在某些省份的分公司。</p> <small class="text-muted">來源：搜狐科技</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h6 class="mb-1">蘋果「革命性」神秘新品確定了！</h6> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">和造車一樣，蘋果正在研發(fā)的VR眼鏡早就變成了公開的秘密。雖然一直活在傳言中，每年都沒看見成品出現(xiàn)，不過好歹進(jìn)展一直都在緩慢曝光中。</p> <small class="text-muted">來源：搜狐科技</small> </a> </div>
將Bootstrap的復(fù)選框與單選框放在列表群組中，并依據(jù)需要進(jìn)行自定義。您可以在不使用label的情況下使用它們，但請(qǐng)記住要包含aria-label以及必要的內(nèi)容。
下面兩個(gè)例子radio和checkbox用法都是一樣的，所以每樣演示了一個(gè)。
<ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" value="" aria-label="..."> 選項(xiàng)一 </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" value="" aria-label="..."> 選項(xiàng)二 </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" value="" aria-label="..."> 選項(xiàng)三 </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" value="" aria-label="..."> 選項(xiàng)四 </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" value="" aria-label="..."> 選項(xiàng)五 </li> </ul>
如果您希望將label作為list-group-item使用以創(chuàng)造較大的點(diǎn)擊區(qū)域，這么做是可以的。用<label class="list-group-item">...</label>將表單和文字包裹在一起即可。
<div class="list-group"> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> 選項(xiàng)一 </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> 選項(xiàng)二 </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> 選項(xiàng)三 </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> 選項(xiàng)四 </label> <label class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value=""> 選項(xiàng)五 </label> </div>
到此，相信大家對(duì)“Bootstrap中如何添加列表”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
