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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Material Design组件

Human Interface Guidelines — Accessibility

1652
来自专栏hightopo

HT图形组件设计之道(四)

1305
来自专栏互联网开发者交流社区

SEO-站内优化规范

1242
来自专栏IT平头哥联盟

玩转3D Swiper美女性感秀之思路分析

  继一次的3D魔方之后,这次利用CSS3的transform、translate、rotate、preserve-3d等结合JS的requestAnimati...

930
来自专栏Keegan小钢

App项目实战之路(四):UI篇

上一篇文章[原型篇]发布之后,就开始设计UI了,包括Icon和界面UI,周一到周五晚上一般花两到三到小时,周六日的时候则有五六个小时,最终用了一个星期多才设计完...

1643
来自专栏较真的前端

React 学习路线图 2018版

这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时,原仓库已经有了中文版,...

1444
来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

前言 在我写终结篇的日子里,Vue版本稳定在2.9.1。当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿。 接下来,...

35713
来自专栏V站

PHP神注释记录一番,一个程序员专用的注释包

1842
来自专栏数据小魔方

Xcelsius(水晶易表)系列3——深入了解单值部件

今天继续分享有关单值部件的使用技巧! 今天的小案例非常简单,是一组关于产品销售利润的计算。 给定进货成本、国税税金、零售定价、预计销售数量等,最后需要输出的指标...

2887
来自专栏葡萄城控件技术团队

纯前端表格控件SpreadJS V11.2新版本发布,全面支持React和Vue

SpreadJS 是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,在外观、功能和操作上都与 Excel 高度类似,在表格数据处理上比 Grid ...

1880

扫码关注云+社区

领取腾讯云代金券