Bootstrap媒体对象

媒体

媒体是一类具有特殊版式的组件，用来设计图文混排的效果，通常由一个向左或向右浮动的媒体对象（如，图像、视频、音频等）和一个媒体内容块构成。

1、创建媒体

在HTML结构中，一个媒体组件由 .media 的容器创建，其中的媒体对象由 .media-left或.media-right 的容器创建，媒体内容块由 .media-body 的容器创建（其中，由 .media-heading 定义它的标题）。如：

<div class="media">
<div class="media-left">
<a href="#">
<img src="img/cat.jpg">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Lovely Cat</h4>
<p>Cras sit amet nibh libero, in gravida …… viverra turpis. </p>
</div>
</div>

效果如图 3‑82所示：

图3-82 媒体

使用.media-left创建的媒体对象将会向左浮动，如果希望媒体对象向右浮动，请使用.media-right。并且，.media-right应当放在.media-body的后面。如：

<div class="media">
<div class="media-body">
<h4 class="media-heading">Lovely Cat</h4>
<p>Cras sit amet nibh libero, in gravida …… viverra turpis. </p>
</div>
<div class="media-right">
<a href="#">
<img src="img/cat.jpg">
</a>
</div>
</div>

效果如图 3‑83所示：

图3-83 媒体对象向右浮动

2、媒体的嵌套

Bootstrap中的媒体还支持嵌套，即允许在一个媒体组件中，嵌套另一个媒体组件。只需在一个 .media 的 .media-body 中，再嵌套一个 .media 即可。如：

<div class="media">
<div class="media-left">...</div>
<div class="media-body">
<h4 class="media-heading">Lovely Cat</h4>
...

<div class="media">
...
</div>
</div>
</div>

效果如图 3‑84所示：

图3-84 媒体的嵌套

3、媒体的对齐方式

默认情况下，媒体中的图像、视频、音频等使用顶部对齐，如果希望它们居中对齐或底部对齐，只需为它追加 .media-middle 或 .media-bottom 类即可。如：

<div class="media">
<div class="media-left media-middle">
<a href="#">
<img src="img/cat.jpg">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Lovely Cat</h4>
<p>Cras sit amet nibh libero, in gravida …… viverra turpis. </p>
</div>
</div>

效果如图 3‑85所示：

图3-85 媒体的对齐方式

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap媒体对象相关推荐

Bootstrap 媒体对象
媒体对象媒体对象是一类具有特殊版式的组件,用来设计图文混排的效果,它们多是由一幅向左或向右浮动的图像和一些文本构成. Bootstrap提供了两种类型的媒体对象:媒体(.media)和媒体列表(.m ...
Bootstrap媒体对象列表
媒体列表媒体列表,就是媒体的列表.由于媒体列表可以嵌套,因此很适合展示评论或其他需要以列表展示的信息. 媒体列表由 .media-list 的容器创建,其中包含一个或多个 .media.由于它是列表 ...
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
1 缩略图缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过&q ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <div class="well">Bootstrap</div& ...
第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
bootstrap进度条媒体对象和Well组件
学习笔记一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 ...
进度条媒体对象和Well组件
一．Well组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well">Bootstrap</div> //有lg和sm两种可 ...
（十）进度条媒体对象和 Well 组件
一．Well 组件有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...

Bootstrap媒体对象

媒体

Bootstrap媒体对象相关推荐

最新文章

热门文章