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> 

效果图如下;