.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
<ul> <li> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>媒体标题</h4> <p>这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。</p> <!-- 嵌套的媒体对象 --> <div> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 <!-- 嵌套的媒体对象 --> <div> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </div> </div> </div> <!-- 嵌套的媒体对象 --> <div> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>嵌套的媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </div> </div> </li> <li> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"> </a> <div> <h4>媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </li> </ul>
列表组
<!--一般列表组--> <ul> <li>免费域名注册</li> <li> <span>新</span> 24*7 支持 </li> <li>每年更新成本</li> <li> <span>新</span> 折扣优惠 </li> </ul> <!--自定义列表组--> <div> <a href="#"> <h4> 入门网站包 </h4> </a> <a href="#"> <h4> 免费域名注册 </h4> <p> 您将通过网页进行免费域名注册。 </p> </a> <a href="#"> <h4> 24*7 支持 </h4> <p> 我们提供 24*7 支持。 </p> </a> </div>
面板
<div><!--可替代panel-default的类：panel-primary，panel-success，panel-info，panel-warning，panel-danger--> <div> <h3> 带有 title 的面板标题 </h3> </div> <div> 面板内容 </div> <!---带表格--> <table> <th>产品</th><th>价格 </th> <tr><td>产品 A</td><td>200</td></tr> <tr><td>产品 B</td><td>400</td></tr> </table> <!---带列表组--> <ul> <li>免费域名注册</li> <li>免费 Window 空间托管</li> <li>图像的数量</li> <li>24*7 支持</li> <li>每年更新成本</li> </ul> <div>面板脚注</div> </div>
well效果
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>
<div>您好，我在大的 Well 中！</div> <div>您好，我在小的 Well 中！</div>