本节课我们主要学习一下 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.这是起始 <spanclass="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>