Bootstrap 中 列表组面板和嵌入组件（九）

一、列表组组件

<ul class="list-group">
    <li class="list-group-item active">1、第一条列表</li>
    <li class="list-group-item">2、第二条列表<span class="badge">10</span></li>
    <li class="list-group-item">3、第三条列表</li>
    <li class="list-group-item">4、第四条列表</li>
</ul>

<div class="list-group">
    <a href="#" class="list-group-item">1、第一条列表</a>
    <a href="#" class="list-group-item active">2、第二条列表<span class="badge">10</span></a>
    <button class="list-group-item disabled">3、第三条列表</button>
    <button class="list-group-item list-group-item-success">4、第四条列表</button>
    <a href="#" class="list-group-item">
      <div class="list-group-item-heading">列表标题</div>
      <p class="list-group-item-text">列表详细内容。。。</p>
    </a>
</div>

.list-group     //   定义列表组件，定义在 ul/div

.list-group-item     //   定义列表组件的每个项目，定义在 li/a/button 上 ,其中 button 上是根据内容的变化而变化长短，不是百分百的格局

.badge     //   列表组件中的徽章

.active     //   当前首先项

.disabled     //   设置项目被禁用

 

//  情景类的样式

.list-group-item-success     //   成功绿

.list-group-item-danger    //   危险红

.list-group-item-warning     //   警告黄

.list-group-item-info     //   信息蓝

 

.list-group-item-heading     //   头标题，定义了间距

.list-group-item-text     //   标题文本，定义了行距

 

二、面板组件（存放内容的容器组件，适合做 登录 或者 小窗口）

<div class="panel panel-default panel-success">
    <div class="panel-heading">
      // 面板标题区域
      <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
      这是一个面板容器
    </div>
    <table class="table">
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
    <ul class="list-group">
        <li class="list-group-item active">1、第一条列表</li>
        <li class="list-group-item">2、第二条列表<span class="badge">10</span></li>
        <li class="list-group-item">3、第三条列表</li>
        <li class="list-group-item">4、第四条列表</li>
    </ul>
    <div class="panel-footer">
      底部区域
    </div>
</div>

.panel     //   面板组件

.panel-heading     //   面板标题区域

.panel-title     //   面板标题元素

.panel-body     //   详细内容区域

.panel-footer     //   底部区域

 

//  情景类

.panel-default     //   默认面板样式，灰白色

.panel-success      //   成功绿

.panel-info           //   信息淡蓝

.panel-warning    //   警告黄

.panel-danger      //   危险红

.panel-primary    //   信息深蓝    

 

table 和 列表 都可以做无缝链接，跟 div.panel-body 同级

三、响应式嵌入组件

根据被嵌入的内容的外部容器的宽度，自动创建一个固定的比例，从而浏览器自动确定内容的尺寸，能够在各种设备上缩放。适用于 <iframe> 、<embed>、<video>、<object> 元素

<div class="embed-responsive embed-responsive-16by9">
    <embed src="" type="" wmode="opaque" >
</div>

.embed-responsive    //   响应式嵌入

.embed-responsive-16by9     //   16:9响应式嵌入

.embed-responsive-4by3     //   4:3响应式嵌入