第 12 章 列表组面板和嵌入组件

学习要点：

1.列表组组件
2.面板组件
3.响应式嵌入组件

主讲教师：李炎恢

本节课我们主要学习一下 Bootstrap 的三个组件功能：列表组组件、面板组件、 响应式嵌入组件。

一．列表组组件
列表组组件用于显示一组列表的组件。
//基本实例

<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>
    <li class="list-group-item">
        4.这是末尾
    </li>
</ul>

//列表项带勋章

<li class="list-group-item">
    1.这是起始 <span class="badge">10</span>
</li>

//链接和首选

<div class="list-group">
    <a href="#" class="list-group-item active">1.这是起始 <span class="badge">10</span></a>
    <a href="#" class="list-group-item">2.这是第二条数据</a>
    <a href="#" class="list-group-item">3.这是第三排信息</a>
    <a href="#" class="list-group-item">4.这是末尾</a>
</div>

//按钮式列表

<div class="list-group">
    <button class="list-group-item active">
        1.这是起始 <span
        class="badge">10</span>
    </button>
    <button class="list-group-item">
        2.这是第二条数据
    </button>
    <button class="list-group-item">
        3.这是第三排信息
    </button>
    <button class="list-group-item">
        4.这是末尾
    </button>

</div>

//设置项目被禁用

class="list-group-item disabled"

//情景类

<li class="list-group-item list-group-item-success">
    3.这是第三排信息
</li>

//定制内容

<div class="list-group">
    <a href="#" class="list-group-item active"> <h4>内容标题</h4>
    <p class="list-group-item-text">
        这里是相关内容详情！
    </p> </a>
    <a href="#" class="list-group-item"> <h4>内容标题</h4>
    <p class="list-group-item-text">
        这里是相关内容详情！
    </p> </a>
    <a href="#" class="list-group-item"> <h4>内容标题</h4>
    <p class="list-group-item-text">
        这里是相关内容详情！
    </p> </a>
</div>

二．面板组件
面板组件就是一个存放内容的容器组件。
//基本实例

<div class="panel panel-default">
    <div class="panel-body">
        这里是详细内容区！
    </div>
</div>

//带标题容器的面板

<div class="panel panel-default">
    <div class="panel-heading">
        面板标题
    </div>
    <div class="panel-body">
        这里是详细内容区！
    </div>
</div>

//也可以设置标题元素

<div class="panel-heading">
    <h3 class="panel-title">面板标题</h3>
</div>

//带注脚的面板

<div class="panel-footer">
    这里是底部
</div>

//情景效果：default、success、info、warning、danger、primary

<div class="panel panel-success">

//表格类面板

<div class="panel panel-default">
    <div class="panel-heading">
        表格标题
    </div>
    <div class="panel-body">
        <p>
            这里是表格标题的详细内容！
        </p>
    </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>
</div>

//列表类面板

<div class="panel panel-default">
    <div class="panel-heading">
        表格标题
    </div>
    <div class="panel-body">
        <p>
            这里是表格标题的详细内容！
        </p>
    </div>
    <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>
        <li class="list-group-item">
            4.这里是第四个项目
        </li>
    </ul>
</div>

三．响应式嵌入组件
根据被嵌入内容的外部容器的宽度， 自动创建一个固定的比例， 从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。
这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。

//16:9 响应式

<div class="embed-responsive embed-responsive-16by9">
    <embed width="100%" height="100%"
    src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>

//4:3 响应式

<div class="embed-responsive embed-responsive-4by3">
    <embed width="100%" height="100%"
    src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>