Bootstrap媒体对象的实现

 更新时间:2016年05月01日 12:19:58   作者:洛水三千  
在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件。本文给大家介绍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>

效果如下:

相关文章

  • JS获取网页属性包括宽、高等等

    JS获取网页属性包括宽、高等等

    这篇文章主要介绍了JS获取网页属性包括宽、高等等,需要的朋友可以参考下
    2014-04-04
  • JavaScript代码性能优化总结(推荐)

    JavaScript代码性能优化总结(推荐)

    下面小编就为大家带来一篇JavaScript代码性能优化总结(推荐)。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-05-05
  • 微信小程序模板之分页滑动栏

    微信小程序模板之分页滑动栏

    这篇文章主要为大家详细介绍了微信小程序模板之分页滑动栏的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS非Alert实现网页右下角“未读信息”效果弹窗

    JS非Alert实现网页右下角“未读信息”效果弹窗

    这篇文章主要介绍了JS非Alert实现网页右下角“未读信息”效果弹窗的方法,涉及JavaScript动态操作页面元素实现弹窗效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JS 中 reduce()方法使用小结

    JS 中 reduce()方法使用小结

    reduce是一个对数组累积操作的方法,使用时要加上 return 返回累积操作的数据,这样 prev 才能获取上一次执行的结果,否则是 undefined,这篇文章主要介绍了JS 中 reduce()方法及使用详解,需要的朋友可以参考下
    2023-12-12
  • AngularJs 禁止模板缓存的方法

    AngularJs 禁止模板缓存的方法

    本篇文章主要介绍了AngularJs 禁止模板缓存的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JS实现左边列表移到到右边列表功能

    JS实现左边列表移到到右边列表功能

    这篇文章主要介绍了JS实现左边列表移到到右边列表功能,实现功能主要是左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除,需要的朋友可以参考下
    2018-03-03
  • JavaScript+css+HTML实现移动端轮播图(含源码)

    JavaScript+css+HTML实现移动端轮播图(含源码)

    这篇文章主要介绍了JavaScript+css+HTML实现移动端轮播图并含源码的分享,需要的小伙伴可以参考一下,希望对你有所帮助
    2022-01-01
  • JavaScript新增的两个原始数据类型详解(Record和Tuple)

    JavaScript新增的两个原始数据类型详解(Record和Tuple)

    js中原始数据类型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的数据类型),引用的数据类型有Object,Array,Function,下面这篇文章主要给大家介绍了关于JavaScript新增两个原始数据类型(Record和Tuple)的相关资料,需要的朋友可以参考下
    2022-03-03
  • JS解密入门 最终变量劫持

    JS解密入门 最终变量劫持

    看到我的前几篇文章的朋友应该知道,前面的是10进制,直觉解就行了,不过下面有个处理函数,你用10进制解密出来之后还要去分析函数的功能,很不合算。
    2008-06-06

最新评论