列表组和嵌入组件 · UI104班随堂笔记

### 列表组组件列表组组件用于显示一组列表的组件。 ~~~html <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> ~~~ **列表项带勋章** ~~~html <li class="list-group-item"> MESSAGE <span class="badge">10</span> </li> ~~~ **链接和首选** ~~~html <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> ~~~ **按钮式列表** ~~~html <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> ~~~ **设置项目被禁用** ~~~html class="list-group-item disabled" ~~~ **情景类** 为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置` .active` 状态。 ~~~html <li class="list-group-item list-group-item-success"> 3.这是第三排信息</li> ~~~ **定制内容** 列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。 ~~~html <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> ~~~ ### 面板组件面板组件就是一个存放内容的容器组件。默认的` .panel `组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。 ~~~html <div class="panel panel-default"> <div class="panel-body"> 这里是详细内容区！ </div> </div> ~~~ **带标题容器的面板** ~~~html <div class="panel panel-default"> <div class="panel-heading"> 面板标题 </div> <div class="panel-body"> 这里是详细内容区！ </div> </div> ~~~ //也可以设置标题元素 ~~~html <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> ~~~ **带注脚的面板** 把按钮或次要的文本放入 .panel-footer 容器内。 ~~~html <div class="panel-footer"> 这里是底部 </div> ~~~ **情景效果：default、success、info、warning、danger、primary ** ~~~html <div class="panel panel-success"> ~~~ **表格类面板** ~~~html <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> ~~~ **列表类面板** ~~~html <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 响应式** ~~~html <div class="embed-responsive embed-responsive-16by9"> <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"> </embed> </div> ~~~ **4:3 响应式** ~~~html <div class="embed-responsive embed-responsive-4by3"> <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"> </embed> </div> ~~~