本篇文章就给大家介绍BootStrap中的列表组组件，面板组件，响应式嵌入组件。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要获取和学习更多的bootstrap相关视频教程也可以访问：bootstrap教程！
一、列表组组件
列表组组件用于显示一组列表的组件
基本实例：
<ul class="list-group">
<li class="list-group-item">我是第一行</li>
<li class="list-group-item">我是第二行</li>
<li class="list-group-item">我是第三行</li>
<li class="list-group-item">我是第四行</li>
</ul>
登录后复制
列表项加上勋章
<ul class="list-group">
<li class="list-group-item">我是第一行
<span class="badge">10</span>
</li>
<li class="list-group-item">我是第二行</li>
</ul>
登录后复制
列表 链接和首选
<p class="list-group">
<a class="list-group-item active">我是第一行
<span class="badge">10</span>
</a>
<a class="list-group-item">我是第二行</a>
<a class="list-group-item">我是第三行</a>
<a class="list-group-item">我是第四行</a>
</p>
登录后复制
第一行为首选状态
第三行是鼠标悬停在上面的时候的状态
按钮式列表
<p class="list-group">
<button class="list-group-item active">我是第一行
<span class="badge">10</span>
</button>
<button class="list-group-item">我是第二行</button>
<button class="list-group-item">我是第三行</button>
<button class="list-group-item">我是第四行</button>
</p>
登录后复制
样式和超链接的列表类似。
情景类
<ul class="list-group">
<li class="list-group-item list-group-item-danger">我是第一行</li>
<li class="list-group-item list-group-item-info">我是第二行</li>
</ul>
登录后复制
可以设置的颜色： success ， warning，danger，info
自定义内容
<p href="#" class="list-group-item active">
<h3>我是标题</h3>
<p>我是一段文本</p>
</p>
登录后复制
二、面板组件
面板组件是一个存放内容的容器组件
基本实例：panel
<p class="panel panel-success">
<p class="panel-body">这里是内容区域</p>
</p>
登录后复制
带标题的面板：panel-heading
<p class="panel panel-success">
<p class="panel-heading">这个是标题啊</p>
<p class="panel-body">这里是内容区域</p>
</p>
登录后复制
设置标题元素：panel-title
<p class="panel panel-success">
<p class="panel-heading">
<h3 class="panel-title">这是标题</h3>
</p>
<p class="panel-body">这里是内容区域</p>
</p>
登录后复制
和以上效果类似，标题字体大一号而已
带注脚的面板：panel-footer
<p class="panel panel-success">
<p class="panel-heading">这是标题</h3></p>
<p class="panel-body">这里是内容区域</p>
<p class="panel-footer">这里是注脚区域</p>
</p>
登录后复制
情景效果
panel panel- default / success / warning / danger / info / primary
表格类面板
<p class="panel panel-warning">
<p class="panel-heading">这是标题</h3></p>
<p class="panel-body">这里是内容区域</p>
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</p>
登录后复制
列表类面板
<p class="panel panel-warning">
<p class="panel-heading">这是标题</h3></p>
<p class="panel-body">这里是内容区域</p>
<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>
<li class="list-group-item">5</li>
</ul>
</p>
登录后复制
二、响应式嵌入组件
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放
这些规则可以直接适用于
