Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
- .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
- .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
让我们来看看下面这个有关默认的媒体对象 .media 的实例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的媒体对象</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</div> </body>
</html>
结果如下所示：
让我们来看看下面这个有关媒体对象列表 .media-list 的实例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 媒体对象列表</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。</p>
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</div>
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-heading">嵌套的媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</li>
</ul> </body>
</html>
结果如下所示：
Bootstrap<基础二十七> 多媒体对象（Media Object）的更多相关文章
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- Bootstrap <基础二十三>页面标题（Page Header）
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
- Bootstrap <基础二十一>徽章（Badges）
Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class= ...
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
随机推荐
- ionic imgBase64
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: , destinationType: destinationTyp ...
- LRU页面置换算法
本文以序列长度20的{ 7,0,1,2,0,3,0,4,2,3,0,3,2,1,2,0,1,7,0,1};以及页面4:为例: #include <stdio.h> #define Init ...
- ip封包
I P封包 從一直以來討論至今﹐我們都不斷地接觸到“封包”這個詞﹐相信您也很有興趣想知道這個“封包”究竟是個什麼樣的東東吧﹗下面就讓我們一起看看一個IP封包究竟包含了那些內容. 擷取IP封包 如果您的 ...
- mac下安装 xampp 无法启动apache (转，留用)
1.查看端口是否被占用 sudo lsof -i -n 2.用终端运行xampp,查看具体的错误 sudo su /Applications/XAMPP/xamppfiles/xampp star ...
- 各种文件的mime类型
扩展名:abs MIME类型:audio/x-mpeg 扩展名:ai MIME类型:application/postscript 扩展名:aif MIME类型:audio/x-aiff 扩展名:aif ...
- 关于String的equals问题和StringBuilder问题
今天弄了一下String和StringBuilder,遇到了一些问题. 老规矩上代码图片: 发现stringBuilder的equals方法有问题,看了一下源码,发现stringbuilder没有重写 ...
- 推荐6款常用的Java开源报表制作工具
JasperReports是一个基于Java的开源报表工具,它可以在Java环境下像其它IDE报表工具一样来制作报表.JasperReports 支持PDF.HTML.XLS.CSV和XML文件输出格 ...
- Java之工厂方法
普通工厂模式: 第一步:定义接口,坚持面向接口编程, package dp; public interface Sender { public void send();} 第二步:实现接口: p ...
- chrome 跨域设置
右击chrome快捷方式,在启动指令后面添加--disable-web-security,然后保存.如下: "C:\Program Files (x86)\Google\Chrome\App ...
- Ridit分析
对于有序分类资料,由于指标存在等级顺序,因此不能使用卡方检验,除了使用秩和检验之外,ridit检验也是分析有序分类资料的常用方法,属于非参数检验. ridit检验的基本做法是将一组有序分组资料转换成一 ...