Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果
  使用flickr的朋友,應該對於flickr的相片牆不感陌生,而flickr的相片牆有別於瀑瀑流,而是橫向式的將所有照片進行堆疊,由於照片有橫向有直向,因此在排列時,讓照片的區塊有大大小小,再加上一列裡的照片數量也不一,讓相片牆看起來相當的豐富,而這個相片牆,其實透過Boostrap的網格系統,就能快速的製作出來,同時也可任意的調整每列的相片數量,因此要如何利用Bootstrap的網格系統,製作出flickr的相片牆,現在也一塊來看看吧!

Step1
首先,將相片牆的版型,透過Bootstrap的網格系統,先製作出來。
<div class="container">
<div class="row">
	<div class="col-md-4">
		<div class="half">A</div>
		<div class="half">B</div>
	</div>
	<div class="col-md-8"><div>C</div></div>
</div>
<div class="row">
		<div class="col-md-3"><div>D</div></div>
		<div class="col-md-6"><div>E</div></div>
		<div class="col-md-3"><div>F</div></div>
</div>
<div class="row">
	<div class="col-md-5"><div>G</div></div>
	<div class="col-md-2"><div>H</div></div>
	<div class="col-md-5"><div>I</div></div>
</div>
</div>

Step2
將HTML的區塊規畫好後,再加入CSS作區塊的設定。
div[class^="col"]{
	padding-left:1px; 
	padding-right:1px;
	margin-bottom: 1px;
}
.row{
	margin-bottom: 1px;
}
.row>div>div{
	border:solid 1px #333;
}
.row:nth-of-type(1)>div[class^="col"]>div{
	height: 400px;
}
.row:nth-of-type(1)>div[class^="col"]>div.half{
	height: 200px;
}
.row:nth-of-type(1)>div[class^="col"]>div.half:nth-of-type(1){
	margin-bottom: 1px;
}
.row:nth-of-type(2)>div[class^="col"]>div{
	height: 100px;
}
.row:nth-of-type(3)>div[class^="col"]>div{
	height: 200px;
}

Step3
先預覽一下畫面,可看到相片牆的基本框架已完成。
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果
Step4
這時再把原來div內的英文字拿掉,並在div中以背景的方式,將圖片引用到div中。
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果
Step5
這樣相片牆就完成了,是不是超簡單呀!
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果
Step6
最後再修正css,讓相片牆在手機版時,高度則固定為300像素。
@media(max-width: 640px){
  .row>div>div{
   height: 300px !important;
 }
}

Step7
這樣就大功告成啦!
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果
[範例預覽]

相關文章

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座