列表组

1、列表组（基础列表组）

首先在<ul>上添加“list-group”类名

然后在<li>上添加“list-group-item”类名
代码示例：
<ul class="list-group">
  <li class="list-group-item">列表1</li>
  <li class="list-group-item">列表2</li>
  <li class="list-group-item">列表3</li>
</ul>
示例：基础列表组.png

2、列表组（标记徽章）

.badge：在<li>中添加带“badge”类名的<span>
<ul class="list-group">
   <li class="list-group-item">
      <span class="badge">13</span>列表1
  </li>
</ul>
示例：列表组-标记徽章.png

3、列表组（链接）

方法1：直接在<li>中添加<a href="##">XX</a>

<ul class="list-group">
   <li class="list-group-item">
      <a href="##">选项1</a>
  </li>
  <li class="list-group-item">
      <a href="##">选项2</a>
  </li>
  <li class="list-group-item">
      <a href="##">选项3</a>
  </li>
</ul>

示例：

带链接的列表组1.png

方法2：将<ul>与<li>换为<div>与<a>

<div class="list-group">
  <a href="##" class="list-group-item">选项1</a>
  <a href="##" class="list-group-item">选项2</a>
  <a href="##" class="list-group-item">选项3</a>
</div>

示例：

带链接的列表组2.png

4、列表组（自定义列表组）

.list-group-item-heading：用来定义列表项头部样式

.list-group-item-text：用来定义列表项主要内容
<div class="list-group">
   <a href="##" class="list-group-item">
      <h4 class="list-group-item-heading">标题</h4>
      <p class="list-group-item-text">文本内容...</p>
  </a>
</div>
示例：自定义列表组.png

5、列表组（状态设置）

.active：表示当前状态（直接将此类名添加至选项中）

.disabled：表示禁用状态（直接将此类名添加至选项中）

6、列表组（彩色列表组）

.list-group-item-success：成功，背景色绿色

.list-group-item-info：信息，背景色蓝色

.list-group-item-warning：警告，背景色为黄色

.list-group-item-danger：错误，背景色为红色
<div class="list-group">
  <a href="##" class="list-group-item">默认</a>
  <a href="##" class="list-group-item list-group-item-success">成功</a>
  <a href="##" class="list-group-item list-group-item-info">信息</a>
  <a href="##" class="list-group-item list-group-item-warning">警告</a>
  <a href="##" class="list-group-item list-group-item-danger">错误</a>
</div>
示例：彩色列表组.png

列表组

1、面板（基础面板）

首先在父<div>上添加“panel panel-default”类名

然后在子<div>上添加“panel-body”类名
代码示例：
<div class="panel panel-default">
   <div class="panel-body">基础面板</div>
</div>
示例：基础面板.png

2、面板（自定义面板）

.panel-heading：用来设置面板头部样式

.panel-footer：用来设置面板尾部样式
<div class="panel panel-default">
   <div class="panel-heading">头部</div>
   <div class="panel-body">内容</div>
   <div class="panel-footer">尾部</div>
</div>
示例：自定义面板.png

3、面板（彩色面板）

.panel-primary：重点蓝

.panel-success：成功绿

.panel-info：信息蓝

.panel-warning：警告黄

.panel-danger：危险红
<div class="panel panel-primary">
  <div class="panel-heading">头部</div>
  <div class="panel-body">内容</div> 
  <div class="panel-footer">尾部</div>
</div>
示例：彩色面板.png