第 12 章 列表组面板和嵌入组件

学习要点:

1.列表组组件

2.面板组件

3.响应式嵌入组件

主讲教师:李炎恢

本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件、面板组件、 响应式嵌入组件。

一.列表组组件

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

//基本实例

  1. <ul class="list-group">
  2. <li class="list-group-item"> 1.这是起始 </li>
  3. <li class="list-group-item"> 2.这是第二条数据 </li>
  4. <li class="list-group-item"> 3.这是第三排信息 </li>
  5. <li class="list-group-item"> 4.这是末尾 </li>
  6. </ul>

//列表项带勋章

  1. <li class="list-group-item"> 1.这是起始 <span class="badge">10</span>
  2. </li>

//链接和首选

  1. <div class="list-group">
  2. <a href="#" class="list-group-item active">1.这是起始 <span class="badge">10</span></a>
  3. <a href="#" class="list-group-item">2.这是第二条数据</a>
  4. <a href="#" class="list-group-item">3.这是第三排信息</a>
  5. <a href="#" class="list-group-item">4.这是末尾</a>
  6. </div>

//按钮式列表

  1. <div class="list-group">
  2. <button class="list-group-item active"> 1.这是起始 <span class="badge">10</span>
  3. </button>
  4. <button class="list-group-item"> 2.这是第二条数据 </button>
  5. <button class="list-group-item"> 3.这是第三排信息 </button>
  6. <button class="list-group-item"> 4.这是末尾 </button>
  7. </div>

//设置项目被禁用

  1. class="list-group-item disabled"

//情景类

  1. <li class="list-group-item list-group-item-success"> 3.这是第三排信息 </li>

//定制内容

  1. <div class="list-group">
  2. <a href="#" class="list-group-item active"> <h4>内容标题</h4>
  3. <p class="list-group-item-text"> 这里是相关内容详情! </p> </a>
  4. <a href="#" class="list-group-item"> <h4>内容标题</h4>
  5. <p class="list-group-item-text"> 这里是相关内容详情! </p> </a>
  6. <a href="#" class="list-group-item"> <h4>内容标题</h4>
  7. <p class="list-group-item-text"> 这里是相关内容详情! </p> </a>
  8. </div>

二.面板组件

面板组件就是一个存放内容的容器组件。

//基本实例

  1. <div class="panel panel-default">
  2. <div class="panel-body"> 这里是详细内容区! </div>
  3. </div>

//带标题容器的面板

  1. <div class="panel panel-default">
  2. <div class="panel-heading"> 面板标题 </div>
  3. <div class="panel-body"> 这里是详细内容区! </div>
  4. </div>

//也可以设置标题元素

  1. <div class="panel-heading">
  2. <h3 class="panel-title">面板标题</h3>
  3. </div>

//带注脚的面板

  1. <div class="panel-footer"> 这里是底部 </div>

//情景效果:default、success、info、warning、danger、primary

  1. <div class="panel panel-success">

//表格类面板

  1. <div class="panel panel-default">
  2. <div class="panel-heading"> 表格标题 </div>
  3. <div class="panel-body">
  4. <p> 这里是表格标题的详细内容! </p>
  5. </div>
  6. <table class="table">
  7. <tr>
  8. <th>1</th>
  9. <th>2</th>
  10. <th>3</th>
  11. </tr>
  12. <tr>
  13. <td>1</td>
  14. <td>2</td>
  15. <td>3</td>
  16. </tr>
  17. </table>
  18. </div>

//列表类面板

  1. <div class="panel panel-default">
  2. <div class="panel-heading"> 表格标题 </div>
  3. <div class="panel-body">
  4. <p> 这里是表格标题的详细内容! </p>
  5. </div>
  6. <ul class="list-group">
  7. <li class="list-group-item"> 1.这里是首页 </li>
  8. <li class="list-group-item"> 2.这里是第二个项目 </li>
  9. <li class="list-group-item"> 3.这里是第三个项目 </li>
  10. <li class="list-group-item"> 4.这里是第四个项目 </li>
  11. </ul>
  12. </div>

三.响应式嵌入组件

根据被嵌入内容的外部容器的宽度, 自动创建一个固定的比例, 从而让浏览器自动确定内容的尺寸,能够在各种设备上缩放。

这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。

//16:9 响应式

  1. <div class="embed-responsive embed-responsive-16by9">
  2. <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>
  3. </div>

//4:3 响应式

  1. <div class="embed-responsive embed-responsive-4by3">
  2. <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>
  3. </div>

原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/54.html