Bootstrap媒体对象的实现


Posted in Javascript onMay 01, 2016

在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媒体对象的实现 

媒体对象的嵌套

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媒体对象的实现

Bootstrap媒体对象的实现

媒体对象列表

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媒体对象的实现

Javascript 相关文章推荐
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
BootStrap glyphicons 字体图标实现方法
May 01 #Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
JavaScript中的继承之类继承
May 01 #Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 #Javascript
js实现的万能flv网页播放器代码
Apr 30 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
解析zend Framework如何自动加载类
2013/06/28 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
创新型城市实施方案
2014/03/06 职场文书
委托书怎么写
2014/07/31 职场文书
纪律教育月活动总结
2014/08/26 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android