标签：复杂 种类 通过 默认 博客 obj head 简单的 asi
1.Bootstrap 多媒体对象（Media Object）
这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
让我们来看看下面这个有关默认的媒体对象 .media 的实例：
<div class="media"> <a class="media-left" href="#"> <img class="media-object" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=025d341a54e736d158138b0ea36b28ff/728da9773912b31b0a02b7ef8618367adbb4e18e.jpg" alt="媒体对象" height="80px;"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </div> <div class="media"> <a class="media-left" href="#"> <img class="media-object" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=025d341a54e736d158138b0ea36b28ff/728da9773912b31b0a02b7ef8618367adbb4e18e.jpg" alt="媒体对象" height="80px;"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 <div class="media"> <a class="media-left" href="#"> <img class="media-object" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=025d341a54e736d158138b0ea36b28ff/728da9773912b31b0a02b7ef8618367adbb4e18e.jpg" alt="媒体对象" height="80px;"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> 这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。 </div> </div> </div> </div>
让我们来看看下面这个有关媒体对象列表 .media-list 的实例：
<ul class="media-list"> <li class="media"> <a class="media-left" href="#"> <img class="media-object" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=025d341a54e736d158138b0ea36b28ff/728da9773912b31b0a02b7ef8618367adbb4e18e.jpg" alt="通用的占位符图像" height="80px;"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> <p>这是一些示例文本。这是一些示例文本。</p> </div> </li> <li class="media"> <a class="media-right" href="#"> <img class="media-object" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=025d341a54e736d158138b0ea36b28ff/728da9773912b31b0a02b7ef8618367adbb4e18e.jpg" alt="通用的占位符图像" height="80px;"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4> 这是一些示例文本。这是一些示例文本。 </div> </li> </ul>
2.Bootstrap 列表组
列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
下面的实例演示了这点：
<ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">免费 Window 空间托管</li> <li class="list-group-item">图像的数量</li> </ul>
2.1向列表组添加自定义内容
<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> 入门网站包 </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免费域名注册 </h4> <p class="list-group-item-text"> 您将通过网页进行免费域名注册。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 支持 </h4> <p class="list-group-item-text"> 我们提供 24*7 支持。 </p> </a> </div>
3.Bootstrap 面板（Panels）
面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：
<div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div> </div>
我们可以通过以下两种方式来添加面板标题：
下面的实例演示了这两种方式：
<div class="panel panel-default"> <div class="panel-heading"> 不带 title 的面板标题 </div> <div class="panel-body"> 面板内容 </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> 带有 title 的面板标题 </h3> </div> <div class="panel-body"> 面板内容 </div> </div>
我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的实例演示了这点：
<div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div> <div class="panel-footer">面板脚注</div> </div>
4.Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well：
<div class="well">您好，我在 Well 中！</div>
您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。
<div class="well well-lg">您好，我在大的 Well 中！</div> <div class="well well-sm">您好，我在小的 Well 中！</div>
标签：复杂 种类 通过 默认 博客 obj head 简单的 asi
原文地址：http://www.cnblogs.com/lingwang3/p/7225529.html
