Bootstrap 媒体对象

媒体对象

媒体对象是一类具有特殊版式的组件，用来设计图文混排的效果，它们多是由一幅向左或向右浮动的图像和一些文本构成。

Bootstrap提供了两种类型的媒体对象：媒体（.media）和媒体列表（.media-list）。媒体用来展示单个对象，媒体列表用来展示多个对象。

媒体

默认情况下，媒体由一个向左或向右浮动的媒体对象（如，图像、视频、音频等）和媒体内容构成。一个媒体中，可以嵌套另一个媒体。

在HTML结构中，一个媒体由 3 部分组成：.media 创建媒体容器，.media-object 创建媒体对象，.media-body 创建媒体内容（其中，由 .media-heading 创建媒体的标题）。如：

<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...

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

效果如图 4‑61所示：

图4-61 Bootstrap媒体对象

关于作者

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

Bootstrap 媒体对象相关推荐

Bootstrap媒体对象
媒体媒体是一类具有特殊版式的组件,用来设计图文混排的效果,通常由一个向左或向右浮动的媒体对象(如,图像.视频.音频等)和一个媒体内容块构成. 1.创建媒体在HTML结构中,一个媒体组件由 .med ...
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 媒体对象相关推荐

最新文章

热门文章