Bootstrap 列表組

2018-03-03 16:32 更新

列表組是創(chuàng)建列表的有用組件。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
    <ul class="list-group">
        <li class="list-group-item">Inbox</li>
        <li class="list-group-item">Sent</li>
        <li class="list-group-item">Drafts</li>
        <li class="list-group-item">Deleted</li>
        <li class="list-group-item">Spam</li>
    </ul>

  </body>
</html>

例子

以下代碼將徽章添加到列表組。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
      <div class="row">
        <div class="col-xs-3">
          <ul class="list-group">
          <li class="list-group-item">Inbox <span class="badge">14</span></li>
          <li class="list-group-item">Sent <span class="badge">4</span></li>
          <li class="list-group-item">Drafts <span class="badge">7</span></li>
          <li class="list-group-item">Deleted <span class="badge">24</span></li>
          <li class="list-group-item">Spam <span class="badge">134</span></li>
        </ul>
        </div>
      </div>

  </body>
</html>

當要顯示鏈接列表時，應使用錨元素 a 而不是列表元素 li ，請使用父 div 而不是 ul 。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
      <div class="row">
        <div class="col-xs-4">
          <div class="list-group">
            <a href="#" class="list-group-item active">
                <h4 class="list-group-item-heading">Item heading</h4>
                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </a>
            <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">Item heading</h4>
                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </a>
            <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">Item heading</h4>
                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </a>
            <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">Item heading</h4>
                <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </a>
          </div>
        </div>
      </div>

  </body>
</html>
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號