Bootstrap 列表组

2017-08-19 09:02:25 来源: 点击:站内收藏

本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:

  • 向元素 ul 添加 class .list-group
  • 向 li 添加 class .list-group-item

下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 基本的列表组</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<ul class="list-group">
   <li class="list-group-item"><span class="badge">新</span>免费全栈开发教程</li>
   <li class="list-group-item active">免费代码共享资源(激活)</li>
   <li class="list-group-item">图像的数量</li>
   <a href="#" class="list-group-item">这是一个连接项</a>
   <li class="list-group-item">每年更新成本</li>
</ul>
<!-- 列表组 --> 
<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>

样式使用

列表徽章:我们可以向任意的列表项添加徽章组件,它会自动定位到右边。只需要在 li 元素中添加< span class="badge" >即可。

相关热词搜索:
评论正在载入