Bootstrap 列表组

列表组是创建列表的有用组件。

<!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

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部