Bootstrap 列表组

本章咱们将解说列表组。列表组件用于以列表方式出现杂乱的和自定义的内容。创立一个根本的列表组的过程如下:

  • 向元素 <ul> 增加 class .list-group
  • 向 <li> 增加 class .list-group-item

下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 根本的列表组</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
   <li class="list-group-item">免费域名注册</li>
   <li class="list-group-item">免费 Window 空间保管</li>
   <li class="list-group-item">图画的数量</li>
   <li class="list-group-item">24*7 支撑</li>
   <li class="list-group-item">每年更新本钱</li>
</ul>


</body>
</html>

成果如下所示:

根本的列表组

向列表组增加徽章

咱们能够向恣意的列表项增加徽章组件,它会主动定位到右边。只需求在 <li> 元素中增加 <span class="badge"> 即可。下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组增加徽章</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
   <li class="list-group-item">免费域名注册</li>
   <li class="list-group-item">免费 Window 空间保管</li>
   <li class="list-group-item">图画的数量</li>
   <li class="list-group-item">
      <span class="badge">新</span>
      24*7 支撑
   </li>
   <li class="list-group-item">每年更新本钱</li>
   <li class="list-group-item">
      <span class="badge">新</span>
      扣头优惠
   </li>
</ul>


</body>
</html>

成果如下所示:

列表组中的徽章

向列表组增加链接

经过运用锚标签替代列表项,咱们能够向列表组增加链接。咱们需求运用 <div> 替代 <ul> 元素。下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组增加链接</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#" class="list-group-item active">
   免费域名注册
</a>
<a href="#" class="list-group-item">24*7 支撑</a>
<a href="#" class="list-group-item">免费 Window 空间保管</a>
<a href="#" class="list-group-item">图画的数量</a>
<a href="#" class="list-group-item">每年更新本钱</a>


</body>
</html>

成果如下所示:

列表组中的链接

向列表组增加自定义内容

咱们能够向上面已增加链接的列表组增加恣意的 HTML 内容。下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组增加自定义内容</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="list-group">
   <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">
         入门网站包
      </h4>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">
         免费域名注册
      </h4>
      <p class="list-group-item-text">
         您将经过网页进行免费域名注册。
      </p>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">
         24*7 支撑
      </h4>
      <p class="list-group-item-text">
         咱们供给 24*7 支撑。
      </p>
   </a>
</div>
<div class="list-group">
   <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">
         商务网站包
      </h4>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">
         免费域名注册
      </h4>
      <p class="list-group-item-text">
         您将经过网页进行免费域名注册。
      </p>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">24*7 支撑</h4>
      <p class="list-group-item-text">咱们供给 24*7 支撑。</p>
   </a>
</div>


</body>
</html>

成果如下所示:

列表组中的自定义内容