Bootstrap - 列表組

上一頁
下一頁

列表組是用於顯示一系列內容的有效元件。可以更改和擴充套件它們以支援任何內容。

基本專案

列表組是一個無序列表，包含列表項和合適的類。根據需要建立具有您自己的 CSS 的列表組。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</body>
</html>

活動專案

要顯示當前活動的選項，請將類.active新增到.list-group-item。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item active" aria-current="true">An active item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
        </ul>
</body>
</html>

停用專案

要建立停用的列表組，請將類.disabled新增到.list-group-item。一些帶有.disabled的專案需要自定義 JavaScript 來完全停用它們的點選事件。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item ">item 1</li>
        <li class="list-group-item ">item 2</li>
        <li class="list-group-item disabled" aria-disabled="true">A disabled item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</body>
</html>

連結和按鈕

透過新增.list-group-item-action，您可以使用<a>或<button>來建立具有懸停、停用和活動狀態的可操作列表組專案。

記住這裡不要使用標準的.btn類。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action ">item 1</a>
        <a href="#" class="list-group-item list-group-item-action">item 2</a>
        <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item 3</a>
        <a href="#" class="list-group-item list-group-item-action">item 4</a>
        <a class="list-group-item list-group-item-action disabled">item 5</a>
    </div>
</body>
</html>

您可以將disabled屬性與<button>一起使用，而不是.disabled類。元素<a>不支援disabled屬性。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action ">item 1</button>
        <button type="button" class="list-group-item list-group-item-action">item 2</button>
        <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item 3</button>
        <button type="button" class="list-group-item list-group-item-action">item 4</button>
        <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item 4</button>
    </div>
</body>
</html>

無邊距

要在父容器（例如卡片）中邊緣對齊顯示列表組元素，請透過新增.list-group-flush來移除邊框和圓角。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</button>
 </body>
</html>

編號

  • 要選擇編號的列表組專案，請新增.list-group-numbered修飾符類（並避免使用<ol>元素）。

  • <ol>上的counter-reset用於生成數字，然後使用counter-increment和content透過a::before偽元素對<li>進行樣式化和放置。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ol class="list-group list-group-numbered">
        <li class="list-group-item">Item One</li>
        <li class="list-group-item">Item Two</li>
        <li class="list-group-item">Item Three</li>
    </ol>
</button>
</body>
</html>

正如下面所示，這些與自定義內容完美配合。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <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">Subheading 1</div>
            Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">14</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 2</div>
             Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 3</div>
              Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">8</span>
        </li>
      </ol>
    </button>
    </body>
    </html>

水平

  • 透過新增類.list-group-horizontal，您可以將列表組專案的佈局從所有斷點的垂直方向修改為水平方向。

  • 要從該斷點的最小寬度開始建立水平列表組，請選擇響應式變體.list-group-horizontal-{sm|md|lg|xl|xxl}。

  • 不能將水平列表組與無邊距列表組組合使用。

注意：如果要在水平方向上使列表組專案寬度相等，請向每個列表組專案新增類.flex-fill。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ul class="list-group list-group-horizontal">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-sm">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-md">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-lg">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-xl">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
      <ul class="list-group list-group-horizontal-xxl">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item">item 2</li>
        <li class="list-group-item">item 3</li>
      </ul>
    </button>
    </body>
    </html>

變體

上下文類list-group-item-primary、list-group-item-secondary……等可用於使用狀態背景和顏色設定列表元素的樣式。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ul class="list-group">
        <li class="list-group-item">Default list group item</li>
        <li class="list-group-item list-group-item-primary">Primary list group item</li>
        <li class="list-group-item list-group-item-secondary">secondary list group item</li>
        <li class="list-group-item list-group-item-success">Success list group item</li>
        <li class="list-group-item list-group-item-danger">Danger list group item</li>
        <li class="list-group-item list-group-item-warning">Warning list group item</li>
        <li class="list-group-item list-group-item-info">Info list group item</li>
        <li class="list-group-item list-group-item-light">Light list group item</li>
        <li class="list-group-item list-group-item-dark">Dark list group item</li>
      </ul>
    </body>
    </html>

對於連結和按鈕

  • 您可以將上下文類與.list-group-item-action一起用於<a>和<button>元素。

  • 應用.active狀態以指示上下文列表組專案上的活動選擇。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">item 1</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-primary">item 2</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">item 3</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success">item 4</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger">item 5</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning">item 6</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info">item 7</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light">item 8</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark">item 9</a>
      </div>
    </body>
    </html>

帶徽章

透過使用某些實用工具，可以向任何列表組專案新增徽章以顯示未讀計數、活動等。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        item 1
        <span class="badge bg-primary rounded-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         item 2
        <span class="badge bg-primary rounded-pill">2</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         item 3
        <span class="badge bg-primary rounded-pill">1</span>
      </li>
    </ul>
  </body>
  </html>

自定義內容

使用Flexbox 實用工具，您幾乎可以在其中新增任何HTML，即使對於連結的列表組也是如此，如下所示。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <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">
          <h5 class="mb-1"> Heading 1</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small>muted small print</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">Heading 2</h5>
          <small class="text-body-secondary">2 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small class="text-body-secondary">muted small print</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">Heading 3</h5>
          <small class="text-body-secondary">1 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small class="text-body-secondary">muted small print</small>
      </a>
    </div>
  </body>
  </html>

複選框和單選按鈕

在列表組專案內新增 Bootstrap 的複選框和單選按鈕，並根據需要自定義。您可以不用<label>，並且不要忘記包含aria-label屬性和值以實現輔助功能。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
        <label class="form-check-label" for="firstCheckbox">Male</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
        <label class="form-check-label" for="secondCheckbox">Female</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
        <label class="form-check-label" for="thirdCheckbox">Other's</label>
      </li>
    </ul>
  </body>
  </html>

以下示例演示了單選按鈕。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
        <label class="form-check-label" for="firstRadio">Male</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
        <label class="form-check-label" for="secondRadio">Female</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
        <label class="form-check-label" for="thirdRadio">Other's</label>
      </li>
    </ul>
  </body>
  </html>

要使整個列表組專案可點選，請在標籤上使用.stretched-link樣式。

示例

您可以使用“編輯和執行”選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <ul class="list-group mt-2">
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched1">
            <label class="form-check-label stretched-link" for="checkboxStretched1">Item One</label>
          </li>
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched2">
            <label class="form-check-label stretched-link" for="checkboxStretched2">Item Two</label>
          </li>
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched3">
            <label class="form-check-label stretched-link" for="checkboxStretched3">Item Three</label>
          </li>
        </ul>
  </body>
  </html>
列印頁面
上一頁
下一頁
廣告