網頁開發 網頁設計

Bootstrap的網格系統製作出Windows的方塊磚效果

2017/05/24

梅問題-Bootstrap的網格系統製作出Windows的方塊磚效果

  使用Bootstrap的朋友,應該對於它的GridSystem網格系統不陌生,同時也是Bootstrap最核心的應用,由於內建的網格系統相當的易懂好上手,所以透過內建的網格系統,就能快速的設計出RWD自適應的網頁,而這個網格系統,已經省掉大把自刻一千多行的CSS時間,因此只需依照它所提供的結構與標籤名稱,就能讓版面實現自動縮收版排的機制。


  由於內建的網格系統,會依照指定的比例進行縮放調整,而這只針對於寬度的部分,高度則是依照區塊內容的多寡而自動延展,但最近梅干遇到一個小問題,那就是要讓DIV的區塊以正方式呈現,就有點像Windows10方塊磚的效果,由於是自適應,因此也無法將高度設死,因此梅干爬了好多文,總於找到解決辦法,讓在套用Bootstrap的網格系統時,也能實現正方形的區塊,至於要怎麼作,現在就一塊來看看吧!


Step1
首先,先建立好所需的網格數,並且在每個col的欄位中,再加入二個div,分別為dummyblock
[html]
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="dummy"></div>
<div class="block"></div>
</div>
</div>
</div>
</div>
[/html]
Step2
加入CSS設定,同時比較特別的是,原本區塊與區塊間,Bootstrap內建是左右各15像素,現在則透過block的top、right、bottom、left來作設定。
[css]
.dummy {
margin-top: 100%;
}
.block{
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background: #222;
}
[/css]
Step3
完成後,就會看到,畫面有四個色塊,同時會以寬度的比例,作等比放大,變為正方形。
梅問題-Bootstrap的網格系統製作出Windows的方塊磚效果

Step4
只要重覆步驟1,就可在一個大區塊中,再分割出四個小區塊來。
梅問題-Bootstrap的網格系統製作出Windows的方塊磚效果


Step5
最後再每個區塊中,加入背景圖片,並使用CSS3的背景居中屬性。

[css]
.bg1{
background: url(01.jpg) center center;
background-size: cover;
}
[/css]


Step6
再把剛所設定好的背景CSS樣式,加到block的div中。
[html]
<div class="block bg1"></div>
[/html]
Step7
都完成後,就會看到DIV的區塊,雖然是空元素,但區塊卻是以正方形進行縮放,即便到手機下也是一樣保有正方形的區塊,是不是超酷呀!因此下回當遇到DIV要等比縮放時,不妨可試試喔!
梅問題-Bootstrap的網格系統製作出Windows的方塊磚效果
[範例預覽-1] [範例預覽-2] [範例預覽-3] [範例下載]