组件（五）

• 媒体对象

1. 默认样式：默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。.media、.media-left、.media-body、.media-object、.media-heading

   <div class="media">
       <div class="media-left">
           <div class="media-object">
               <img src="img/heroplane0.png">
           </div>
       </div>
       <div class="media-body">
           <div class="media-heading">
                   <h2>linux技术</h2>
               <p>linux is very much!</p>
           </div>
       </div>
   </div>

   截图：
   

   可以嵌套，做评论回复：

   <div class="media">
       <div class="media-left">
           <div class="media-object">
               <img src="img/heroplane0.png">
           </div>
       </div>
       <div class="media-body">
           <div class="media-heading">
                   <h2>linux技术</h2>
               <p>linux is very much!</p>
           </div>
           <div class="media">
               <div class="media-left">
                   <div class="media-object">
                       <img src="img/heroplane0.png">
                   </div>
               </div>
               <div class="media-body">
                   <div class="media-heading">
                       <h2>linux技术</h2>
                       <p>linux is very much!</p>
                   </div>
               </div>
           </div> 
       </div>
   </div>

   截图：
   

   图片在右边：

   <div class="media">
       <div class="media-body">
           <div class="media-heading">
                   <h2>linux技术</h2>
               <p>linux is very much!</p>
           </div>
       </div>
       <div class="media-left">
           <div class="media-object">
               <img src="img/heroplane0.png">
           </div>
       </div>
   </div>

   截图：

2. 对齐：图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。.media-bottom、.media-middle

   <div class="media">
       <div class="media-left media-bottom">  底部对齐
           <div class="media-object">
               <img src="img/heroplane0.png">
           </div>
       </div>
       <div class="media-body">
           <div class="media-heading">
                   <h2>linux技术</h2>
               <p>linux is very much!</p>
           </div>
       </div>
   </div>

3. 媒体对象列表：

   <ul class="media-list">
     <li class="media">
       <div class="media-left">
         <a href="#">
           <img class="media-object" src="..." alt="...">
         </a>
       </div>
       <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
         ...
       </div>
     </li>
   </ul>

   截图：
   

• 列表组

1. 基本实例

   <ul class="list-group">
       <li class="list-group-item">linux is very much!</li>
       <li class="list-group-item">linux is very much!</li>
       <li class="list-group-item">linux is very much!</li>
       <li class="list-group-item">linux is very much!</li>
   </ul>

   截图：
   

2. 链接列表组：

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

   截图：
   

3. 被禁用的条目：.disabled
4. 按钮：列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！

   <div class="list-group">
     <button type="button" class="list-group-item">Cras justo odio</button>
     <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
     <button type="button" class="list-group-item">Morbi leo risus</button>
     <button type="button" class="list-group-item">Porta ac consectetur ac</button>
     <button type="button" class="list-group-item">Vestibulum at eros</button>
   </div>

5. 情景类：

   <ul class="list-group">
     <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
     <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
     <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
     <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
   </ul>
   <div class="list-group">
     <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
     <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
     <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
     <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
   </div>

   截图：
   

6. 定制类容：

   <div class="list-group">
       <a class="list-group-item" href="#">
           <h2>新闻</h2>
           <p>linux is very much!linux is very much!linux is very much!linux is very much!
              linux is very much!linux is very much!linux is very much!linux is very much!</p>
       </a>
   </div>

   截图：
   

• 面板

1. 基本实例：默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

   <div class="panel">
       <div class="panel-body">
           linux ls very much!
       </div>
   </div>

   截图：
   

2. 带标题的面板：通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

   为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

   <div class="panel panel-default">
     <div class="panel-heading">Panel heading without title</div>
     <div class="panel-body">
       Panel content
     </div>
   </div>
   
   <div class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">Panel title</h3>
     </div>
     <div class="panel-body">
       Panel content
     </div>
   </div>

   截图：
   

3. 带脚注的面板：把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

   <div class="panel panel-default">
     <div class="panel-body">
       Panel content
     </div>
     <div class="panel-footer">Panel footer</div>
   </div>

   截图：
   

4. 情景效果：

   <div class="panel panel-primary">...</div>
   <div class="panel panel-success">...</div>
   <div class="panel panel-info">...</div>
   <div class="panel panel-warning">...</div>
   <div class="panel panel-danger">...</div>

5. 带表格的面板：

   <div class="panel panel-default">
     <!-- Default panel contents -->
     <div class="panel-heading">Panel heading</div>
     <div class="panel-body">
       <p>...</p>
     </div>
   
     <!-- Table -->
     <table class="table">
       ...
     </table>
   </div>

   截图：
   

   如果没有 .panel-body ，面版标题会和表格连接起来，没有空隙。

   <div class="panel panel-default">
     <!-- Default panel contents -->
     <div class="panel-heading">Panel heading</div>
   
     <!-- Table -->
     <table class="table">
       ...
     </table>
   </div>

   
   

6. 带列表组的面板：

   <div class="panel panel-default">
     <!-- Default panel contents -->
     <div class="panel-heading">Panel heading</div>
     <div class="panel-body">
       <p>...</p>
     </div>
   
     <!-- List group -->
     <ul class="list-group">
       <li class="list-group-item">Cras justo odio</li>
       <li class="list-group-item">Dapibus ac facilisis in</li>
       <li class="list-group-item">Morbi leo risus</li>
       <li class="list-group-item">Porta ac consectetur ac</li>
       <li class="list-group-item">Vestibulum at eros</li>
     </ul>
   </div>

   截图：
   

• 具有响应式的嵌入内容

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

   这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。

   <div class="embed-responsive embed-responsive-16by9">
       <iframe class="embed-responsive-item" src="http://www.baidu.com"></iframe>
   </div>

   截图：
   

• well

1. 在后面加圆角背景：

   <div class="well">Look, I'm in a well!</div>

   截图：
   

2. 尺寸：.well-lg、.well-sm