Bootstrap5 列表組

2023-06-25 17:21 更新

大部分基礎(chǔ)列表組都是無序的。


要創(chuàng)建列表組，可以在 <ul> 元素上添加 .list-group 類, 在 <li> 元素上添加 .list-group-item 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>基礎(chǔ)列表組</h2>
  <ul class="list-group">
    <li class="list-group-item">第一項(xiàng)</li>
    <li class="list-group-item">第二項(xiàng)</li>
    <li class="list-group-item">第三項(xiàng)</li>
  </ul>
</div>

</body>
</html>

激活狀態(tài)的列表項(xiàng)

通過添加 .active 類來設(shè)置激活狀態(tài)的列表項(xiàng)：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>激活狀態(tài)的列表項(xiàng)</h2>
  <ul class="list-group">
    <li class="list-group-item active">激活列表項(xiàng)</li>
    <li class="list-group-item">第二項(xiàng)</li>
    <li class="list-group-item">第三項(xiàng)</li>
  </ul>
</div>

</body>
</html>

禁用的列表項(xiàng)

.disabled 類用于設(shè)置禁用的列表項(xiàng):

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>禁用的列表項(xiàng)</h2>
  <ul class="list-group">
    <li class="list-group-item disabled">禁用項(xiàng)</li>
    <li class="list-group-item">第二項(xiàng)</li>
    <li class="list-group-item">第三項(xiàng)</li>
  </ul>
</div>

</body>
</html>

鏈接列表項(xiàng)

要創(chuàng)建一個鏈接的列表項(xiàng)，可以將 <ul> 替換為 <div> ， <a> 替換 <li>。如果你想鼠標(biāo)懸停顯示灰色背景就添加.list-group-item-action 類:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>鏈接列表項(xiàng)</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">第一項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-action">第二項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-action">第三項(xiàng)</a>
  </div>
</div>

</body>
</html>

移除列表邊框

使用 .list-group-flush 類來刪除列表的邊框和圓角：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>移除列表邊框</h2>
  <p>使用 .list-group-flush 類來刪除列表的邊框和圓角：</p>
</div>
  
<div class="container">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一項(xiàng)</li>
    <li class="list-group-item">第二項(xiàng)</li>
    <li class="list-group-item">第三項(xiàng)</li>
    <li class="list-group-item">第四項(xiàng)</li>
  </ul>

</div>

</body>
</html>

水平列表組

我們可以將 .list-group-horizontal 類添加到 .list-group 類后面來創(chuàng)建水平列表組：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>水平列表組</h2>
  <p>可以將 .list-group-horizontal 類添加到 .list-group 類后面來創(chuàng)建水平列表組：</p>
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">第一項(xiàng)</li>
    <li class="list-group-item">第二項(xiàng)</li>
    <li class="list-group-item">第三項(xiàng)</li>
    <li class="list-group-item">第四項(xiàng)</li>
  </ul>
</div>

</body>
</html>

多種顏色列表項(xiàng)


列表項(xiàng)目的顏色可以通過以下列來設(shè)置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>多種顏色列表項(xiàng)</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">成功列表項(xiàng)</li>
    <li class="list-group-item list-group-item-secondary">次要列表項(xiàng)</li>
    <li class="list-group-item list-group-item-info">信息列表項(xiàng)</li>
    <li class="list-group-item list-group-item-warning">警告列表項(xiàng)</li>
    <li class="list-group-item list-group-item-danger">危險列表項(xiàng)</li>
    <li class="list-group-item list-group-item-primary">主要列表項(xiàng)</li>
    <li class="list-group-item list-group-item-dark">深灰色列表項(xiàng)</li>
    <li class="list-group-item list-group-item-light">淺色列表項(xiàng)</li>
  </ul>
</div>

</body>
</html>

鏈接的多種顏色列表項(xiàng)

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>多種顏色列表項(xiàng)</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">激活列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-success">成功列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-secondary">次要列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-info">信息列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-warning">警告列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-danger">危險列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-primary">主要列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-dark">深灰色列表項(xiàng)</a>
    <a href="#" class="list-group-item list-group-item-light">淺色列表項(xiàng)</a>
  </div>
</div>

</body>
</html>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號