Bootstrap列表组、面板和响应式嵌入组件

列表组组件

列表组组件用于显示一组列表的组件

<ul class="list-group">
    <!-- 列表项带勋章 -->
    <li class="list-group-item">1.这只是开始 <span class="badge">10</span></li>
    <li class="list-group-item">2.这是第二条数据</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>
    <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.这是开始</button>
    <!-- 情景效果 -->
    <button class="list-group-item list-group-item-warning">2.这是第二条数据</button>
    <button class="list-group-item list-group-item-success">3.这是第三排信息</button>
    <!-- 设置项目被禁用 -->
    <button class="list-group-item disabled">4.这是末尾</button>
</div>
<!-- 定制类内容 -->
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4>内容标题</h4>
        <p class="list-group-item-text">这是相关内容的详情！</p>
    </a>
    <a href="#" class="list-group-item active">2.这是第二条数据 <span class="badge">10</span></a>
    <a href="#" class="list-group-item">3.这是第三排信息</a>
    <a href="#" class="list-group-item">4.这是末尾</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 panel-default">
    <div class="panel-heading">
        <h3 class="panel-heading">面板标题</h3>
    </div>
    <div class="panel-body">这是面板的详细内容区！</div>、
    <!-- 注脚 -->
    <div class="panel-footer">这是底部</div>
</div>
<!-- 情景效果 -->
<div class="panel panel-success">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        这里是详细内容区！
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        这里是详细内容区！
    </div>
</div>

效果图如下：

<!-- 表格类面板 -->
<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.这只是开始 <span class="badge">10</span></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://study.163.com/course/courseLearn.htm?courseId=1017002#/learn/video?lessonId=1740216&courseId=1017002" 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://study.163.com/course/courseLearn.htm?courseId=1017002#/learn/video?lessonId=1740216&courseId=1017002" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</div>

效果图如下：

<div class="embed-responsive embed-responsive-16by9">  
    <iframe class="embed-responsive-item" src="1.html"></iframe>  
</div> 

效果图如下;