Boootstrap教學-非RWD自適應網頁也可使用Bootstrap的Grid

梅問題-Boootstrap教學-使用Bootstrap的Grid,關閉RWD自適應效果
  現在幾乎所有的大大小小的專案,都使用Bootstrap,尤其是它的Grid相當的好用,只要依照它的格式,就能快速的將版面分割完成,且又具備了RWD自適應的效果,同時完全不用寫到任何的CSS樣式,當習慣了Bootstrap的結構後,現在在製作非RWD的頁面時,也會不自覺的依照Bootstrap結構,但其實非RWD的網頁,一樣也是可使用Bootstrap的Grid,只要作點小修改,就可依照Boostrap的樣式標籤來使用啦!就可快速的用Bootstrap來分割畫面啦!相當快速與好用,因此有在用Bootstrap的朋友,也趕快來看看如何關閉Bootstrap的RWD自適應,並套用到一般的頁面中。

Step1
首先,將container的width設為固定值,接著在html的標籤中,一樣是使用col,但要用col-xs-*這組,這樣才不會當螢幕解析縮小時,區塊就變成手機的形式,區塊堆疊在一起。
梅問題-Boootstrap教學-使用Bootstrap的Grid,關閉RWD自適應效果
Step2
當設定好後,這時無論視窗怎麼變,裡面的區塊都不為所動,同時下方也會出現捲軸,是不是超方便的呀!無論是不是RWD網頁,皆可使用Bootstrap的Grid。
梅問題-Boootstrap教學-使用Bootstrap的Grid,關閉RWD自適應效果
[範例預覽]

相關文章

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

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

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

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

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

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

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

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

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

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





回應本篇 »

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

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

近期講座

近期講座

更多講座