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 相关文章推荐
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
浅谈js闭包理解
Apr 01 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
Element Card 卡片的具体使用
Jul 26 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/03 咖啡文化
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
Java面试题及答案
2012/09/08 面试题
自我评价的写作规则
2014/01/06 职场文书
物业总经理岗位职责
2014/02/28 职场文书
《开国大典》教学反思
2014/04/19 职场文书
2014年教师节活动总结
2014/08/29 职场文书
科学发展观标语
2014/10/08 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技