1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

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

2016/12/05

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

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


Step1
首先,將相片牆的版型,透過Bootstrap的網格系統,先製作出來。
[html]
<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>
[/html]


Step2
將HTML的區塊規畫好後,再加入CSS作區塊的設定。
[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;
}
[/css]


Step3
先預覽一下畫面,可看到相片牆的基本框架已完成。
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果


Step4
這時再把原來div內的英文字拿掉,並在div中以背景的方式,將圖片引用到div中。
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果


Step5
這樣相片牆就完成了,是不是超簡單呀!
梅問題-Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果


Step6
最後再修正css,讓相片牆在手機版時,高度則固定為300像素。
[css]
@media(max-width: 640px){
.row>div>div{
height: 300px !important;
}
}
[/css]


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


[範例預覽]