<!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 href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="padding:20px">
<ul class="media-list">
<li class="media">

<a href="#" class="pull-left"><img class="media-object" 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 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>

</li>
<li 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>

</liclass="media">
</ul>
</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历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

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

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

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

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

  4. Bootstrap历练实例：轮播(carousel)

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

  5. Bootstrap历练实例：响应式导航(带有表单)

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

  6. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  7. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  8. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

  9. Bootstrap历练实例：简单的可折叠

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

随机推荐

  1. AES 加密 PHP 和 JAVA 互通

    PHP代码: <?php class Security { public static function encrypt($input, $key) { $size = mcrypt_get_b ...

  2. 2017-9-20 NOIP模拟赛

    A 约数之和 (count.pas/c/cpp)TL:1S ML:128MB[Description]我们用 D(x)表示正整数 x 的约数的个数.给定一个正整数 N,求 D(1)+D(2)+…+D( ...

  3. uoj#386. 【UNR #3】鸽子固定器（乱搞）

    传送门 题解 //minamoto #include<bits/stdc++.h> #define R register #define ll long long #define fp(i ...

  4. Ruby: Case表达式

    Ruby的case表达式有两种形式: 第一种形式接近于一组连续的if语句:它让你列出一组条件,并执行第一个为真的条件表达式所对应的语句. 第二种形式,在case语句的顶部指定一个目标,而每个when从 ...

  5. VMware workstation 14 安装 iOS虚拟机

    https://03k.org/vmware-macos.html https://jingyan.baidu.com/article/363872ec206a356e4ba16f30.html 1. ...

  6. [BeiJing wc2012]连连看

    题目链接 费用流板子+拆点 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline int r ...

  7. python进程之理论

    ********进程理论知识******** ****操作系统背景知识**** 顾名思义,进程及正在执行的一个过程,进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念, ...

  8. D. Array Division

    http://codeforces.com/contest/808/problem/D 一开始是没什么想法的,然后回顾下自己想题的思路,慢慢就想出来了.首先要找到是否有这样的一个位置使得: 前缀和 = ...

  9. SpringCloud服务的平滑上下线

    http://blog.itpub.net/31545684/viewspace-2215300/ spring cloud eureka 参数配置 https://www.jianshu.com/p ...

  10. Kendo MVVM 数据绑定(三) Click

    Kendo MVVM 数据绑定(三) Click Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件.当点击目标 DOM 元素时触发 ViewModel ...