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