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) ...
随机推荐
- 用Java开源项目JOONE实现人工智能编程
http://www.robotsky.com/ZhiN/MoS/2011-08-25/13142461416649.html 用Java开源项目JOONE实现人工智能编程 https://sourc ...
- Windows系统字体与文件对照表
源:Windows系统字体与文件对照表 宋体 (TrueType) = SIMSUN.TTF 黑体 (TrueType) = simhei.ttf 楷体_GB2312 (TrueType) = sim ...
- [Big Data]Spark
SPARK Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapRed ...
- UWSGITOP-----监控uwsgi 性能
启动 uwsgi -x etc/bfdds_cookiemapping_conf.xml --stats /tmp/stats.socket 查看 uwsgitop /tmp/stats.socket ...
- Linux之特殊权限（SUID/SGID/SBIT）
特殊权限的介绍 Set UID 当s这个标志出现在文件所有者的x权限上时,如/usr/bin/passwd这个文件的权限状态:“-rwsr-xr-x.”,此时就被称为Set UID,简称为SUID.那 ...
- WCF不用证书实现验证（messageheader）
上文WCF进阶:将消息正文Base64编码中介绍了实现自定义MessageInspector来记录消息和实现自定义Formatter来改写消息,本文介绍一下在WCF中使用SoapHeader进行验证的 ...
- 在ubuntu上安装k-vim
在ubuntu 上安装k-vim 早就想好好改造一下自己使用的vim了!可惜各种配置都十分复杂,特别是涉及到C语言的语义补全,YouCompleteMe,总是出各种安装问题.今天有人推荐我使用k-vi ...
- UVa 10473 - Simple Base Conversion
题目大意:十进制与十六进制之间的相互转换. #include <cstdio> int main() { #ifdef LOCAL freopen("in", &quo ...
- 如何解决Ajax跨域问题-1
如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpReque ...
- html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...