列表组面板和嵌入组件

一．列表组组件

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

//列表项带勋章

<ul class="list-group">

       <li class="list-group-item">1.这是首页</li>

       <li class="list-group-item">2.这是第二页 <span class="badge">10</span></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">1.这是首页</a>

<a href="#" class="list-group-item active">2.这是第二页 <span class="badge">10</span></a>

       <a href="#" class="list-group-item disabled">3.这是第三页</a>

       <a href="#" class="list-group-item list-group-item-success">4.这是第四页</a>

</div>

 

//按钮式列表

<div class="list-group">

       <button class="list-group-item">1.这是首页</button>

<button class="list-group-item active">2.这是第二页 <span class="badge">10</span></button>

       <button class="list-group-item">3.这是第三页</button>

       <button class="list-group-item">4.这是第四页</button>

</div>

 

//定制内容

<div class="list-group">

       <a href="#" class="list-group-item">

              <h4>列表标题</h4>

              <p>详细内容。。。。</p>

       </a>

<a href="#" class="list-group-item active">2.这是第二页 <span class="badge">10</span></a>

       <a href="#" class="list-group-item disabled">3.这是第三页</a>

       <a href="#" class="list-group-item list-group-item-success">4.这是第四页</a>

</div>

二．面板组件

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

//基本实例

<div class="panel panel-danger">

   <div class="panel-heading">

      <h3 class="panel-title">我是标题区域</h3>

   </div>

   <div class="panel-body">

      我是一个面板容器

   </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>

   <ul class="list-group">

      <li class="list-group-item">1.这是首页</li>

<li class="list-group-item">2.这是第二页 <span class="badge">10</span></li>

      <li class="list-group-item">3.这是第三页</li>

      <li class="list-group-item">4.这是第四页</li>

   </ul>

   <div class="panel-footer">

      我是底部

   </div>

</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.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/.swf type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

</div>