Bootstrap历练实例：默认的媒体对象
Bootstrap 多媒体对象（Media Object）
本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
- .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
- .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
让我们来看看下面这个有关默认的媒体对象 .media 的实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：默认的媒体对象</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
<div class="media">
<a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap历练实例：默认的媒体对象的更多相关文章
- Bootstrap历练实例：嵌套的媒体对象
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：默认的列表组
Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...
- Bootstrap历练实例：默认的面板(Panels)
Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...
- Bootstrap历练实例：默认的Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap历练实例：默认的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例：默认的缩略图
本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...
- Bootstrap 历练实例 - 折叠（Collapse）插件方法
方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap历练实例：禁用的按钮
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
随机推荐
- Hyperledger Fabric 第一次安装
第一次安装fabric有很多坑.记录一下,主要跟版本问题. 参考的是http://www.cnblogs.com/aberic/p/7532114.html 这篇博客. 我用的阿里云centOs 7. ...
- 自动化测试工具 Test Studio入门教程
Test Studio安装 可以到下载试用版 官网 http://www.telerik.com/teststudio , 装完以后需要装silverlight 安装好了,主界面是介个样子的 Test ...
- POJ 2411 Mondriaan's Dream 【状压Dp】 By cellur925
题目传送门 这道题暑假做的时候太模糊了,以前的那篇题解大家就别看了==.今天再复习状压感觉自己当时在写些什么鸭.... 题目大意:给你一个\(n\)*\(m\)的棋盘和许多\(1*2\)的骨牌,骨牌可 ...
- Spring配置文件xsi:schemaLocation无法解析导致启动失败的解决方案
今天遇到过情况,spring的配置文件在本地读取没有问题,扔到线上服务器运行就报无法解析xml,找了很久问题,发现是因为线上服务器无法上网,导致无法下载相关的xsd文件,没办法不能上网就只有使用本地的 ...
- Jmeter 的 vars 和 props 用法
meter 的 JSR223 控件是 代替 BeanShell 的新一代脚本控件,支持多种脚本语言,尤其是其中的 Groovy,更是重点推荐使用的脚本语言,本文研究其中的 vars 和 props 两 ...
- Codeforces 185D（发现性质、欧拉定理）
学到的东西 不知道gcd时不妨先假设为d,然后为了满足全部式子说不定可以得到d的取值范围. 幂上带幂考虑欧拉定理的使用. 有几个特殊情况会破坏公式的完美不要紧,看看特殊情况是否能简便地判定. 连乘公式 ...
- jq：jQuery库文件jquery.scrollLoading.js使用方法
图片延迟加载,滚动到哪里加载到哪里: 1:头部加载库文件 <script type="text/javascript" src="/js/jquery.scroll ...
- NET Core 2.0 微服务跨平台实践
NET Core 2.0 微服务跨平台实践 相关博文: Ubuntu 简单安装 Docker Mac OS.Ubuntu 安装及使用 Consul Consul 服务注册与服务发现 Fabio 安装和 ...
- 关于FutureTask的探索
之前关于Java线程的时候,都是通过实现Runnable接口或者是实现Callable接口,前者交给Thread去run,后者submit到一个ExecutorService去执行. 然后知道了还有个 ...
- winform 程序隐藏窗口运行
DWPublishForm frm = new DWPublishForm(); frm.IsAutoUpdate = true; frm.ShowInTaskbar = false; frm.For ...