閱讀(7.3k) 書簽贊(2) 我要糾錯(cuò)

Bootstrap4 列表組

2018-05-29 14:05 更新

列表組是一個(gè)靈活而且強(qiáng)大的功能，不僅僅可以用來顯示簡(jiǎn)單的元素列表，還可以顯示復(fù)雜的自定義內(nèi)容，不過大部分的基礎(chǔ)列表都是無序的。

基礎(chǔ)列表創(chuàng)建：

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

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>基礎(chǔ)列表組</h2>
  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>
</body>
</html>

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

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

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>激活狀態(tài)的列表項(xiàng)</h2>
  <ul class="list-group">
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>
</body>
</html>

禁用的列表項(xiàng)

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

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>禁用的列表項(xiàng)</h2>
  <ul class="list-group">
    <li class="list-group-item disabled">Disabled item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>
</body>
</html>

鏈接列表項(xiàng)

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

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>鏈接列表項(xiàng)</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">First item</a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>
</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:

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container">
  <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ǎn)列表項(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>

運(yùn)行以上代碼，得到以下結(jié)果：

QQ截圖20180529140106

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  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" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <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ǎn)列表項(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)容是否對(duì)您有幫助：

← Bootstrap4 分頁(yè)

Bootstrap4 卡片 →

寫筆記

我要補(bǔ)充