Bootstrap列表组与面板

列表组

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

1. 首先在<ul>上添加“list-group”类名
2. 然后在<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、面板（基础面板）

1. 首先在父<div>上添加“panel panel-default”类名
2. 然后在子<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