Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组

    在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

		<p>常规的媒体对象</p>
		<div class="media">
			<div class="media-left">
				<img src="image/icon.png" />
			</div>
			<div class="media-body">
				<h4 class="media-heading">社科院:经济不会发生硬着陆 警惕高房价对消费挤出效应</h4>
				从2010年开始中国经济增速逐年下滑,到2015年经济增速为6.9%,这是从1990年以来最低的增速,也是从改革开放以来首次连续六年经济增速下滑。由于今年前三季度经济增速为6.7%,北京大学国家发展研究院名誉院长、国务院参事林毅夫在18日举行的第一届国家发展论坛上表示, 2016年的经济增速还会继续下行,低于6.9%。
			</div>
         </div>

效果如下图所示:

使用media-middle类与media-bottom类可以设置媒体对象居中或者底部对齐,示例如下:

		<p>媒体对象居中显示</p>
		<div class="media">
			<div class="media-left media-middle">
				<img src="image/icon.png" />
			</div>
			<div class="media-body">
				<h4 class="media-heading">社科院:经济不会发生硬着陆 警惕高房价对消费挤出效应</h4> 从2010年开始中国经济增速逐年下滑,到2015年经济增速为6.9%,这是从1990年以来最低的增速,也是从改革开放以来首次连续六年经济增速下滑。由于今年前三季度经济增速为6.7%,北京大学国家发展研究院名誉院长、国务院参事林毅夫在18日举行的第一届国家发展论坛上表示, 2016年的经济增速还会继续下行,低于6.9%。
			</div>
		</div>
		<br />
		<p>媒体对象底部对齐</p>
		<div class="media">
			<div class="media-left media-bottom">
				<img src="image/icon.png" />
			</div>
			<div class="media-body">
				<h4 class="media-heading">社科院:经济不会发生硬着陆 警惕高房价对消费挤出效应</h4> 从2010年开始中国经济增速逐年下滑,到2015年经济增速为6.9%,这是从1990年以来最低的增速,也是从改革开放以来首次连续六年经济增速下滑。由于今年前三季度经济增速为6.7%,北京大学国家发展研究院名誉院长、国务院参事林毅夫在18日举行的第一届国家发展论坛上表示, 2016年的经济增速还会继续下行,低于6.9%。
			</div>
		</div>

效果如下图所示:

    在实际开发中,列表组的应用也十分广泛,Bootstrap中定义的列表组样式十分灵活,开发者可以灵活的对其进行自定义操作,示例如下:

		<p>列表组示例</p>
		<ul class="list-group">
			<li class="list-group-item list-group-item-info">
				未读消息
				<span class="badge">2</span>
			</li>
			<li class="list-group-item list-group-item-success">
				个人中心
			</li>
			<li class="list-group-item list-group-item-danger">
				退出登录
			</li>
			<li class="list-group-item list-group-item-warning">
				<div class="list-group-item-heading">温馨提示</div>
				<small>更多功能请进个人中心</small>
			</li>
		</ul>

效果如下图所示:

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/medioAndListGroup.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏域名资讯

域名投资大佬Mike Mann售9枚域名价格达百万

今年下半年,海外大佬Frank Schilling、Mike Mann以及Andrew Rosener都出手了。域名交易价格达上百万元,今天我们...

20700
来自专栏机器人网

无人机教程:说说入门那些事

无人机火爆的程度已无需多言。很多朋友或多或少地动过心思,想买一个无人机玩玩,那么,今天我们来说说,要想入门无人机,需要了解及掌握哪些东西呢? 我们将从无人机的...

442120
来自专栏域名资讯

真是热闹! Slade.com等多个域名被曝交易

之前报道了“超自然”SuperNatural.com近139万元成交的消息,没过多久,又传出不少域名交易的消息,他们分别是:   Slade.com...

21990
来自专栏域名资讯

DN榜:域名380.com、CIF.com高价位居一二

在新一期的DN榜中,一枚3数字380.com以32.3万美元(近214万元)的价格位居第一。3字母CIF.com也毫不逊色,以10万美元约66万元的价...

18800
来自专栏大数据文摘

拔线!中国网络安全法草案规定政府可在“紧急状态”下断网

23580
来自专栏灯塔大数据

原创译文 | 美国禁令后中兴不能再购买高通芯片,美国方面解释原因

转载声明 本文为灯塔大数据原创内容,欢迎个人转载至朋友圈,其他机构转载请在文章开头标注:“转自:灯塔大数据;微信:DTbigdata” 导读:中美贸易战愈演愈烈...

28150
来自专栏PPV课数据科学社区

【图观大数据】双十一外国人的奇葩海淘排行:老美最爱假发....

【外国人的奇葩海淘排行】双十一来了!你能想象到在地球的另一端,美国人默默的打开天猫,第一反应是输入“假发”!点大图看外国人的购物癖好:东南亚最爱买中国机顶盒和手...

29940
来自专栏机器人网

SPORT手术机器人将把达芬奇推下神坛?

2000年直觉外科(Intuitive Surgical,ISRG)上市时股价只有9美元,但是凭借其耀眼的外科手术机器人达芬奇外科手术系统,很快就令Northl...

33440
来自专栏企鹅号快讯

盘点世界十大著名黑客攻击事件

相信很多像小编一样的80后,都听说过了蠕虫病毒,或者说熊猫烧香病毒,今天闲着没事,小编来跟大家盘点一下,世界典型大型黑客袭击事件。 一、勒索病毒事件 ? 勒索病...

5.8K60
来自专栏安恒信息

微软公布全球7大黑客攻击趋势

全球网路犯罪猖獗,黑客犯罪手法日新月异。微软指出,根据调查,每一秒即有12人成为数位犯罪的受害者,意即每一年就有4亿台电脑遭受黑客、病毒的攻击,外泄个资或机密而...

28470

扫码关注云+社区

领取腾讯云代金券