<!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. codeforces786E ALT【倍增+最小割】

    方案二选一,显然是最小割,朴素的想法就是一排人点一排边点,分别向st连流量1的边,然后人点向路径上的边点连流量inf的边跑最大流 但是路径可能很长,这样边数就爆了,所以考虑倍增,然后倍增后大区间向小区 ...

  2. 寒假作业第二组C题题解

    这道题题意很简单,主要是练习map的使用.看输入有三个数据,水果名,地名,和出现次数.再看输出,很容易想到map<string,int> string是水果,int是次数,那个地名怎么用m ...

  3. Linux systemd 常用命令

    系统管理 systemctl 显示系统状态: $ systemctl status 立即激活单元: # systemctl start [单元] 立即停止单元: # systemctl stop [单 ...

  4. 039 Combination Sum 组合总和

    给一组候选数字(C)(没有重复)并给一个目标数字(T),找出 C 中所有唯一的组合使得它们的和为 T.可以从 C 无限次数中选择相同的数字.说明:    所有数字(包括目标)都是正整数.    解集合 ...

  5. Java基础语法（数组）

    第4天 Java基础语法 今日内容介绍 u 流程控制语句(switch) u 数组 第1章 流程控制语句 1.1 选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句 ...

  6. Ajax简单实例（基于jQuery）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 3D图形引擎决定三维产业差异化

    从2009年中国3D产业初步兴起开始,短短几年间中国的3D技术得到了飞速的发展,3D打印机.3D投影仪.Web3D.虚拟现实.场景漫游等等产业应用应运而生,设备制造商和内容提供商都开始发挥自主创新的优 ...

  8. javascript简单计算器实践

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...

  9. Python +selenium之设置元素等待

    注:本文转载http://www.cnblogs.com/mengyu/p/6972968.html 当浏览器在加载页面时,页面上的元素可能并不是同时被加载完成,这给元素的定位增加了困难.如果因为在加 ...

  10. selenium报错信息-- Python 中 'unicodeescape' codec can't decode bytes in position XXX: trun错误解决方案

    本以为是缺少utf-8造成的错误,但是加完这个还是报错,于是在网上百度了一下是因为上传的路劲粗无偶导致的 正确的写法是把路劲中“\”变为“\\”,或者在路劲的开头加上“r”,或者在路劲的开头加上“r” ...