详解Bootstrap媒体对象
在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下:
LESS: media.less
SASS: _media.scss
媒体对象一般是成组出现,一组媒体对象一般包括以下几部分:
1、媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media
2、媒体对象的对象:一般是图片,需使用类.media-object
3、媒体对象的主体:就是媒体对象的主体内容,可以是任何元素,需使用类.media-body
4、媒体对象的标题:用来描述媒体对象的一个标题,需使用类.media-heading
此外,bootstrap框架中常使用类.pull-left和.pull-right来控制媒体对象中的对象浮动方式
下面是它们的css源码:
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}
媒体样式相对来说比较简单,只是设置它们之间的间距;
下面来看看媒体对象的运用:
<h1>默认媒体对象</h1>
<div class="media">
<a href="#" class="pull-right">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的夜里,总该另有一 番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑……</div>
</div>
</div>
媒体对象的嵌套
bootstrap媒体对象嵌套,只需将另一个媒体对象结构放在媒体对象的主体(.media-body)中。下面来看看媒体对象嵌套的运用
<h1>默认媒体对象的嵌套</h1>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">荷塘月色</h4>
<div>月光如流水一般,静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">这里是嵌套内容1111</h4>
<div>荷塘的四面,远远近近,高高低低都是树,而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁,漏着几段空隙,像是特为月光留下的。</div>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/5.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">这里是嵌套内容2222</h4>
<div>树梢上隐隐约约的是一带远山,只有些大意罢了。树缝里也漏着一两点路灯光,没精打采的,是渴睡人的眼。这时候最热闹的,要数树上的蝉声与水里的蛙声;但热闹是它们的,我什么也没有</div>
</div>
</div>
</div>
</div>
</div>
</div>
效果如下:
媒体对象列表
bootstrap框架提供了一个媒体对象列表展示的效果,在写结构的时候可以使用标签ul,并在标签ul上添加类名.media-list,在标签li上使用类.media
例如:
<h1>媒体对象列表</h1>
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表111</h4>
<div>沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四周,长着许多树,蓊蓊(wěng)郁郁(2)的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/2.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表222</h4>
<div>路上只我一个人,背着手踱(duó)着。这一片天地好像是我的;我也像超出了平常的自己,到了另一个世界里。我爱热闹,也爱宁静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表333</h4>
<div>白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。曲曲折折的荷塘上面,弥望(3)的是田田(4)的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="img/4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体对象列表444</h4>
<div>忽然想起采莲的事情来了。采莲是江南的旧俗,似乎很早就有,而六朝时为盛;从诗歌里可以约略知道。采莲的是少年的女子,她们是荡着小船,唱着艳歌(14)去的。采莲人不用说很多,还有看采莲的人。那是一个热闹的季节,也是一个风流(15)的季节。梁元帝(16)《采莲赋》里说得好:。</div>
</div>
</li>
</ul>
效果如下:
详解Bootstrap媒体对象的更多相关文章
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- Bootstrap媒体对象
前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...
- c# 把一个匿名对象赋值给一个Object类型的变量后,怎么取这个变量? c# dynamic动态类型和匿名类 详解C# 匿名对象(匿名类型)、var、动态类型 dynamic 深入浅析C#中的var和dynamic
比如有一个匿名对象,var result =......Select( a=>new { id=a.id, name=a.name});然后Object obj = result ;我怎 ...
- Java精通并发-自旋对于synchronized关键字的底层意义与价值分析以及互斥锁属性详解与Monitor对象特性解说【纯理论】
自旋对于synchronized关键字的底层意义与价值分析: 对于synchronized关键字的底层意义和价值分析,下面用纯理论的方式来对它进行阐述,自旋这个概念就会应运而生,还是很重要的,下面阐述 ...
- 测开之路一百一十三:bootstrap媒体对象
实现效果,左边是图片或者其他媒体,右边是对应的描述 引入bootstrap和jquery标签 class="media" 数量多一些看着就会很规整 <!DOCTYPE htm ...
- 详解Bootstrap按钮组件
按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按钮 ...
- 详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
- 详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形 ...
- 详解css媒体查询
简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...
随机推荐
- PHP验证码参考页面
http://blog.sina.com.cn/s/blog_95ee14340100z8q9.html http://www.jb51.net/article/44951.htm
- 第二次作业#include <stdio.h> int main() { int a,b,c,d,e; printf("请输入一个不多于五位的整数:\n"); scanf("%d",&a); if(a>=100000||a<=0) { printf("输入格式错误! \n"); } else { if(
1 判断成绩等级 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误". ...
- 02-JAVA中的基本语法
第一个动手动脑: 首先用枚举类型定义两个变量,然后判断两个变量是否引用同一对象,在判断枚举类型是否是原始数据类型,再从字符串中转换,最后列出所有的对象. 很明显,这两个变量都是枚举类型,但是这两个变量 ...
- 用T-sql 实现Oracle Connect by 的功能
; with subDepartment as ( select BesonDepartmentID, DepartmentName, ParentBesonDepartmentID, 1 as Hi ...
- Win7中不能调试windows service
多年前玩过一次windows service,觉得挺简单的. 这次工作要维护产品中的windows service,发现不是那么简单,vs附加调试器的窗体中无法找到windows service进程. ...
- redis hash map
redis hash的使用详见文章:http://www.miaoyueyue.com/archives/235.html hash操作命令如下: hset(key, field, value):向名 ...
- EasyUI 添加tab页(iframe方式)(转)
function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选 ...
- LeetCode OJ-- String to Integer (atoi) **
https://oj.leetcode.com/problems/string-to-integer-atoi/ 细节题,把一个字符串转换成整数 class Solution { public: in ...
- WebService 基本操作
1.新建asp.net web 应用程序 2.添加web 服务webservice.asmx public string HelloWorld(int a) { if (a==1) { return ...
- JS实现滑动门效果
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin ...