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历练实例：默认的媒体对象的更多相关文章

  1. Bootstrap历练实例：嵌套的媒体对象

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

  3. Bootstrap历练实例：默认的面板(Panels)

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...

  4. Bootstrap历练实例：默认的Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  5. Bootstrap历练实例：默认的进度条

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap历练实例：默认的缩略图

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...

  7. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  8. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  9. Bootstrap历练实例：禁用的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

随机推荐

  1. BitMap的原理以及运用

    位图(Bitmap),即位(Bit)的集合,是一种数据结构,可用于记录大量的0-1状态,在很多地方都会用到,比如Linux内核(如inode,磁盘块).Bloom Filter算法等,其优势是可以在一 ...

  2. Git 深度学习填坑之旅一（git安装和配置、基本命令）

    前戏 最近不管是工作还是ctf比赛,接触与使用git变得越来越多,git半吊子水平的我已经不能支撑日常工作了.碰巧自己公司项目刚上线,现在能挤出一点时间来挖一下这个坑... 为什么使用Git 1.后悔 ...

  3. 黑马MyBatis入门day1

    package com.itheima.domain; /* CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username ...

  4. Codeforces 161C（分治、性质）

    要点 因为当前最大字符只有一个且两边是回文的,所以如果答案包含最大字符则一定是重合部分. 若不包含,则用此字符将两个区间分别断为两部分,则共有四种组合,答案一定为其中之一. #include < ...

  5. 不可见类有抽象父类，spring配置子类bean，注入父类，aop就可以切父类的方法

    public class TestBeanChild { int b = 1; public TestBean createDefault() { return new TestBeanDefault ...

  6. redis安装&启动

    1.下载:redis.io,我下载的是5.0. 2.安装 1).tar -zxvf redis-5.0.0 2).进入src目录,执行make 3.回退到src的上一级目录,编辑redis.conf ...

  7. @Slf4j注解的使用

    项目中使用Slf4j日志: private static final Logger log=LoggerFactory.getLogger(TestMain.class); 使用@Slf4j以后,默认 ...

  8. mysql主给备赋予权限时报错，MySQL [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause

    https://www.cnblogs.com/skymyyang/p/7551646.html 在my.cnf 里面设置sql_mode='STRICT_TRANS_TABLES,NO_ZERO_I ...

  9. 【0 基础学Dojo】第【1】篇 HelloWord

    打开dojo 官网首页 http://dojotoolkit.org/,我们看到 点击get dojo  你将得到下载Dojo 的不同方式 2,点击下面方式下载, 解压后 新建myTest.html, ...

  10. HashMap与TreeMap

    package com.jckb; import java.util.Map; import java.util.Set; import java.util.TreeMap; /**TreeMap * ...