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

梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
  雖然說Bootstrap的網格系統相當的方便好用,但只要區塊內的元素大小不一致時,就會造成跑版的問題,雖然Bootstrap也有提供長短腳的解決方法,但就得去計算出,每滿12個單位數時,加入一個長短腳的修正,所以當元素有長有短時,或許改用瀑布流是一個不錯的方式。
  但要如何將瀑布流的套件與Bootstrap網格系統整合在一塊,其實方法很簡單,當整合後不但讓Bootstrap的網格支援瀑布流排版,同時還能透過Bootstrap內建的網格規則,來控制瀑布流的行列數,至於要怎麼在Bootstrap中使用Masonry套件,現在就一塊來看看吧!
Step1
首先,先在body中加入bootstrap的html網格標籤。

<div class="container">
	<div class="row">
		<div class="col-md-3">
			<img src="01.jpg" alt="" class="img-responsive">
		</div>
		<div class="col-md-3">
			<img src="02.jpg" alt="" class="img-responsive">
		</div>
		<div class="col-md-3">
			<img src="03.jpg" alt="" class="img-responsive">
		</div>
		<div class="col-md-3">
			<img src="04.jpg" alt="" class="img-responsive">
		</div>
	</div>
</div>

Step2
由於圖片有直有橫,這時就會造成跑版的問題。
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
Step3
接著在/body前,加入下方的script。
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script>
	$(function(){
		$('.masonry').masonry({
			itemSelector: '.item'
	});
</script>

Step4
再把row後加入「masonry」,以及把col-md-3後再加入「item」。
<div class="row masonry">
	<div class="col-md-3 item">

Step5
完成後,這時版型就支援瀑布流的排版了。
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
Step6
當把col-md-3改成col-md-6,這是瀑布流就會變成二欄式,因此透過Bootsrap內建的網格數,就可任意的調整瀑布流的欄位數,是不是超方便的呀!
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
[範例預覽]

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

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

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

近期講座

近期講座

更多講座