<!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. 洛谷P1868 饥饿的奶牛

    P1868 饥饿的奶牛 题目描述 有一条奶牛冲出了围栏,来到了一处圣地(对于奶牛来说),上面用牛语写着一段文字. 现用汉语翻译为: 有N个区间,每个区间x,y表示提供的x~y共y-x+1堆优质牧草.你 ...

  2. vector详解

    /*vector向量容器*/ //用数组方式访问vector元素 #include<iostream> #include<vector> #include<cstdio& ...

  3. MySQL下载与安装配置

    一.Windows 上安装 MySQL Windows 上安装 MySQL 相对简单,最新版本下载地址: 官网:https://dev.mysql.com/downloads/mysql/ 下载步骤: ...

  4. python爬虫——web前端基础（4）

    CSS,指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用. 在HTML中使用CSS样式的方法: 内联样式表:CSS代码直接写在现有的HTML标记中,直接使用style属性改变样式.例 ...

  5. left join on 和where条件的放置（转）

    http://blog.csdn.net/muxiaoshan/article/details/7617533

  6. 关于Mac系统中my sql 和navicat for mysql 的连接问题。

    我这个完完全全的技术小小白,经过数个小时的网搜,navicat for mysql和mysql终于可以可以正常连接了,好开森啊!,我把我遇到的问题,以及解决方法记录下来,希望也可以对遇到同样问题的能够 ...

  7. Codeforces Round #562 (Div. 2) C. Increasing by Modulo

    链接:https://codeforces.com/contest/1169/problem/C 题意: Toad Zitz has an array of integers, each intege ...

  8. (转) RHEL7 忘记密码修改root密码

    博客链接:http://blog.csdn.net/derkampf/article/details/54346516 RHEL7进入单用户方式和重置密码方式发生了较大变化,GRUB由b引导变成了ct ...

  9. openstack安装newton版本keyston部署（一）

    一.部署环境:     两台centos7,  内存2G 控制计算节点: Hostname1:                    ip:172.22.0.218 计算节点及存储节点 Hostnam ...

  10. SQL2000,2005,2008安装在一台机子上

    工欲善其事,必先利其器.本机的系统是在网上自己下载的,是32位windows7旗舰版.因为学习,需要在一台机子上同时安装SQL Server2000,2005,2008三个版本的数据库.先是在网上查了 ...