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=& ...
随机推荐
- 洛谷P1587 [NOI2016]循环之美
传送门 不会,先坑着 https://kelin.blog.luogu.org/solution-p1587 //minamoto #include<cstdio> #include< ...
- IT兄弟连 JavaWeb教程 文件上传技术
在Web应用系统开发中,文件上传和下载功能是非常常用的功能. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参 ...
- try catch finally的执行顺序学习
try catch finally的执行顺序学习 首先执行try,如果有异常执行catch,无论如何都会执行finally,当有return以后,函数就会把这个数据存储在某个位置,然后告诉主函数, ...
- Git 深度学习填坑之旅二（文件三种状态、打标签）
0x01 三种状态 Git 有三种状态,你的文件可能处于其中之一: 已提交(committed).已修改(modified)和已暂存(staged). 已提交表示数据已经安全的保存在本地数据库中. 已 ...
- EF下使用自定义的connectionString避免数据库密码泄露
在使用EF框架时,缺省情况下数据库访问字串是明码存放在app.config或web.config中的,相当于让数据库裸奔. 实际上EF在创建数据实体时,可以指定连接字串,取代在app.config中读 ...
- CF1141F Same Sum Blocks(easy/hard)
传送门easy 传送门hard 切水题的感觉真好 看到数据范围这么小,所以暴力枚举所有的可能,然后用map+vector存下每种值的区间,然后贪心去选 代码: #include<cstdio&g ...
- JavaScript进阶 - 第10章 编程挑战
10-1 编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图:
- jQuery基础(2)
jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 零.昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javasc ...
- Mac客户端CentOS服务器 SSH免密码登陆
假定有2个服务器A(127.0.0.1)和B(192.168.0.1),A作为客户端来登录服务器B 1.在服务器A下使用 ssh-keygen -t ras -P 会在-/.ssh目录下'生成公钥(i ...
- SpringCloud多模块整理
1.项目架构 —— project 父项目 —— client 子项目(客户端) 对外暴露的接口 —————— pom.xml 子项目的pom文件 ...