文档章节

Bootstrap响应式前端框架笔记十二——巨幕与缩略图

珲少
 珲少
发布于 2016/12/14 16:31
字数 760
阅读 365
收藏 0

Bootstrap响应式前端框架笔记十二——巨幕与缩略图

    巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下:

		<p>巨幕演示</p>
		<div class="jumbotron">
			<h1>勿忘国耻!九一八!</h1>
			<p>九一八事变(又称奉天事变、柳条湖事件)是日本在中国东北蓄意制造并发动的一场侵华战争,是日本帝国主义侵华的开端。1931年9月18日夜,在日本关东军安排下,铁道“守备队”炸毁沈阳柳条湖附近日本修筑的南满铁路路轨,并栽赃嫁祸于中国军队。日军以此为借口,炮轰沈阳北大营,是为“九一八事变”。</p>
			<p><a class="btn btn-primary btn-lg">查看详情</a></p>
		</div>

效果如下:

除了使用巨幕,开发者也可以使用page-header类来创建页头,示例如下:

		<p>页头演示</p>
		<div class="page-header">
			<h1>前事不忘,后事之师!<small>祭奠南京大屠杀中遇难的三十万同胞!</small></h1>
		</div>
		<p>南京大屠杀指抗日战争期间,中国当时的首都南京于1937年12月13日沦陷后,日军在南京及附近地区进行长达四十多天的大屠杀[1]  。日军在南京城内对大量平民及战俘进行屠杀、抢掠、强奸、无恶不作。南京大屠杀的死亡人数超过30万。</p>

效果如下:

    Bootstrap中的缩略图也十分容易创建,使用thumbnail类可以将图片元素创建为缩略图样式,如下:

		<p>缩略图</p>
		<div class="row">
			<div class="col-xs-6 col-md-3">
				<a href="#" class="thumbnail">
					<img src="image/test.png">
				</a>
			</div>
		</div>

效果如下图所示:

缩略图组件中也可以添加其他附件,例如标题,段落,按钮等,示例如下:

		<p>缩略图也可以添加一些附件</p>
		<div class="row">
			<div class="col-sm-6 col-md-4">
				<div class="thumbnail">
					<img src="image/nanjing.png">
					<div class="caption">
						<h3>国家公祭</h3>
						<p>南京大屠杀指抗日战争期间,中国当时的首都南京于1937年12月13日沦陷后,日军在南京及附近地区进行长达四十多天的大屠杀[1] 。日军在南京城内对大量平民及战俘进行屠杀、抢掠、强奸、无恶不作。南京大屠杀的死亡人数超过30万。</p>
						<p>
							<a href="#" class="btn btn-primary" role="button">网上献花</a>
							<a href="#" class="btn btn-default" role="button">更多史料</a>
						</p>
					</div>
				</div>
			</div>
		</div>

效果如下:

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

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

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

© 著作权归作者所有

珲少

珲少

粉丝 895
博文 395
码字总数 478712
作品 0
上海
程序员
私信 提问
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
Bootstrap响应式前端框架笔记一——强大的栅格布局

Bootstrap响应式前端框架笔记一——强大的栅格布局 一、Bootstrap? Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使...

珲少
2016/12/01
926
0
Twitter发布Bootstrap 2.0

Twitter今天其开发者博客正式发布了Bootstrap 2.0,源代码已在GitHub上公布。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作...

岭南六少
2012/02/03
1.3W
16
Bootstrap响应式前端框架笔记十——导航栏相关组件

Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下: ...

珲少
2016/12/12
206
0
Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组 在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

珲少
2016/12/20
75
0

没有更多内容

加载失败,请刷新页面

加载更多

金蝶EAS DEP 服务端 脚本

1、服务端执行SQL //服务端更新单据状态var imp = JavaImporter(); imp.importPackage(Packages.com.kingdee.eas.scm.im.inv); imp.importPackage(Packages.com.kingdee.eas.srt.comm......

路过饭堂门口
29分钟前
24
0
Hive之导出文件按逗号分隔到本地文件

如下所示,默认导出的是用\t分隔的,需要使用管道符进行转换,经常使用到,记录下. List-1 hive -e "SELECT * from student" | sed 's/\t/,/g' > /tmp/student.csv...

克虏伯
38分钟前
34
0
转置/解压缩功能(zip的反转)?

我有一个2项元组的列表,我想将它们转换为2个列表,其中第一个包含每个元组中的第一个项目,第二个列表包含第二个项目。 例如: original = [('a', 1), ('b', 2), ('c', 3), ('d', 4)]# an......

技术盛宴
55分钟前
53
0
小猪o2o系统v14.0升级v14.1攻略含小猪CMS微店铺和智慧店铺及小程序百项升级

首先我们要注意升级前的以下几个内容: 即 对环境的要求 网站需求PHP7.1 MYSQL5.1以上 Sw解密组件 解密组件在swoole-loader内 解压缩网站包 修改Conf/db.php内数据库文件 替换数据库内xxx.com...

my_gode
今天
107
0
「干货来袭」Github最全Nodejs资源集

今天给大家分享一下Github上面最全的Nodejs资源集awesome-nodejs,该项目聚合了nodejs各类优质资源,对自立于全栈开发或者想了解nodejs技术栈的开发同学极有帮助,有想进一步了解nodejs的千万...

gamedilong
今天
56
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部