Bootstrap入门（十四）组件8：媒体对象
Bootstrap入门（十四）组件8：媒体对象
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
1.基本样式
2.嵌套使用
3.图片位置
4.使用<ul><li>标签嵌套使用
先引入本地的CSS文件
<link href="bootstrap.min.css" rel="stylesheet">
1.基本样式
我们先在容器div中创建一个class为media的div（媒体对象）
<div class="container">
<div class="media">
...
</div>
</div>
先来一个图片（我们这里就不放了），放在左边
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<a>标签之外就需要承载内容区域，是主体部分，又一个为了div，class为media-body，他的标题需要media-heading类
效果明显和方便，随便输入了大量大写字母
EXAMPLE
<div class="container">
<div class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div>
</div>
效果
再复制几个，就有回复贴之类的效果
2.嵌套使用
可是，有时候不是所有的需求都是在同一排，而是有的是缩进的
我们这里就只需要为其中一个嵌套使用，也就是在一个class为media的div中在嵌入一个class为media的div
<div class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
<div class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div>
</div>
</div>
效果：
3.图片位置
①居右，有人说就是直接把<a>标签的media-left改为media-right就可以了，的确，但是还要把<a>标签放在div中主题内容的下面，即：
<div class="media">
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
<a class="media-right" href="#">
<img src="" alt="64*64图片">
</a>
</div>
效果：
②图片下移
有时候希望图片正在中间显示或者在下面显示，需要在<a>标签中添加新属性（中间media-middle，下面media-bottom）
<div class="media">
<a class="media-left media-middle" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div> <div class="media">
<a class="media-left media-bottom" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</div>
效果：
4.如果量多，可以不用div的形式，而是使用<ul><li>标签嵌套使用
（嵌套，图片移动的效果同上）
DIV UL LI
<div class="container">
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</li>
<li class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</li>
<li class="media">
<a class="media-left" href="#">
<img src="" alt="64*64图片">
</a>
<div class="media-body">
<h4 class="media-heading">ASD</h4>
<p>
ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl
</p>
</div>
</li>
</ul>
</div>
效果：
Bootstrap入门（十四）组件8：媒体对象的更多相关文章
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap历练实例：默认的媒体对象
Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...
- Bootstrap入门（四）表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
- Bootstrap历练实例：嵌套的媒体对象
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- （十）进度条媒体对象和 Well 组件
一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...
- Spring入门(十四)：Spring MVC控制器的2种测试方法
作为一名研发人员,不管你愿不愿意对自己的代码进行测试,都得承认测试对于研发质量保证的重要性,这也就是为什么每个公司的技术部都需要质量控制部的原因,因为越早的发现代码的bug,成本越低,比如说,Dev环 ...
- Bootstrap 学习笔记5 进度条媒体对象和well组件
代码: <ul class="media-list"> <li class="media"> <div class="m ...
- [WebGL入门]十四，绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
- Android入门(十四)内容提供器-实现跨程序共享实例
原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
随机推荐
- process想停就停，真爽
kill -STOP 18168 kill -STOP 18310 kill -CONT 18310 kill -CONT 18168
- hdu-oj 1874 畅通工程续
最短路基础 这个题目hdu-oj 1874可以用来练习最短路的一些算法. Dijkstra 无优化版本 #include<cstdio> #include<iostream> ...
- POJ 2728 Desert King 最优比率生成树
Desert King Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 20978 Accepted: 5898 [Des ...
- PHP学习笔记-1——快捷键
整行删除 ctrl+E set get 生成 alt+ insert 查找.搜索和替换 Ctrl-F3 搜索位于插入点的词 F3/Shift-F3 在文件中查找下一个/上一个 Ctrl-F/H 在文件 ...
- java 单元测试 注入
ApplicationContext appContext = new ClassPathXmlApplicationContext("appContext.xml"); MySQ ...
- jvm 配置，看看
http://my.oschina.net/qiangzigege/blog/661757
- oracle 11g odbc连接串及配置
首先先安装HA-Instant Client-v11.2.0.3.0-x86.rar 下载地址: ftp://hhdown:2-2@58.23.131.52/download/HA-Instant%2 ...
- iOS纯代码制作欢迎界面——UIScrollView, UIPageControl, UIImageView,UIButton, NSTimer
欢迎界面,还是比较简单的,一个UIScrollView控件,一个UIPageControl,几个UIImageView即可摆平.在这里光玩这些,就显得诚意不足了.特意拓展一下,再加几个UIButton ...
- 301、302、200、206、304、404等HTTP状态引见(转载)
该文章来自网上转载,感谢他的辛勤付出! 如果向您的服务器发出了某项请求要求显示您网站上的某个网页,那么,您的服务器会返回 HTTP 状态代码以响应该请求. 一些常见的状态代码为: 200 - 服务器成 ...
- UIAlertView使用全解
举例: UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Default Alert View"messa ...