2017年5月24日 星期三

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

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

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


Step1

首先,先建立好所需的網格數,並且在每個col的欄位中,再加入二個div,分別為

dummy

block

<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>

Step2

加入CSS設定,同時比較特別的是,原本區塊與區塊間,Bootstrap內建是左右各15像素,現在則透過block的top、right、bottom、left來作設定。

.dummy {
  margin-top: 100%;
}
.block{
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  background: #222;
}

Step3

完成後,就會看到,畫面有四個色塊,同時會以寬度的比例,作等比放大,變為正方形。

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

只要重覆步驟1,就可在一個大區塊中,再分割出四個小區塊來。

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

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

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

Step6

再把剛所設定好的背景CSS樣式,加到block的div中。

 <div class="block bg1"></div>

Step7

都完成後,就會看到DIV的區塊,雖然是空元素,但區塊卻是以正方形進行縮放,即便到手機下也是一樣保有正方形的區塊,是不是超酷呀!因此下回當遇到DIV要等比縮放時,不妨可試試喔!

梅問題-Bootstrap的網格系統製作出Windows的方塊磚效果
[範例預覽-1] [範例預覽-2] [範例預覽-3] [範例下載]



from 梅問題.教學網 https://www.minwt.com/webdesign-dev/html/17668.html

沒有留言:

張貼留言