Bootstrap教學《Bootstrap網設必備》打造Responsive Web Design自適應版型入門

梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
  自從行動裝置愈來愈普及後,也影響到網頁設計的生態,從原本的桌機版面,到之後衍伸到手機版,甚至到最近火紅的Responsive Web Design自適應版型,無論那一種方式,都是要讓網頁能在各個裝置上,以最佳的方式來呈現,雖然說RWD是最一勞永逸的方式,完全不需判斷裝置的檔頭,全部用CSS的Media Screen,就可自動的縮放版面,相當的方便,但一樣的類別名稱,就得依照個別的解析大小一一設定,每當製作完畢,那CSS碼都幾千行,因此要一個個的慢慢Key實在太慢太累人啦!這時不妨可試試Bootstrap的CSS Framework,且這套組是由知名的社群平台Twitter所開發的,因此無論在結構還是互動性上都相當的完整,再加上3.0版架構更加完整,相當適合拿來打造RWD自適應的,網頁版型啦!至於要怎麼用呢?現在就一塊來看看囉!

Bootstrap:
套件名稱:Bootstrap
套組版本:3.X
套件下載:http://getbootstrap.com/
範例下載:本站下載

Bootstrap套件下載:
Step1
進入網站後,點一下左邊的Download鈕,將套件下載回來。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step2
下載完畢解壓縮,分別會看到css、fonts、js的資料夾。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step3
接著到jQuery官網中,下載jqury並放到js的資料夾中。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
引用Bootstrap套件:
Step4
這段語法在Bootstrap官網中就可找到,但在jquery的地方,改成在自已本機端,這樣讀取速度會比較快一些。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step5
並儲存在相對的目錄下。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step6
瀏覽一下,哈~這樣就已載入所有的Bootstrap,因此就可使用它的CSS與JS互動特效啦!
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Bootstrap(RWD)應用:
Step7
接著在官網中,可找到以下的表格,此表格相當的重要,主要是在說明,該套件中的螢幕尺寸的那些,分別有四個尺寸,且代稱分別為lg、md、sm、xs....等。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step8
而Bootstrap是將版面欄位,等分等12塊,因此在設計RWD的版面需用百分比的方式來作設計。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step9
比方區塊要居時時,只需加入container的類別名稱,區塊就會依照視窗尺寸居中啦!
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step10
由於為了讓各位可清楚看到是否居中,所以在DIV的區塊加了白框。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step11
同時它可用巢狀式來包覆,因此當用了container居中後,再用row接著裡面二個div的總合要是12就可以了。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step12
這時就可看到,下方的區塊中,分別就有內容與側邊欄二區塊。
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step13
而Bootstrap還有一個相當棒的功能,就是可讓版尾置底部,除了CSS設定好後,在區塊的地方,要用wrap包起來,那剩下的部分就是版尾啦!
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
Step14
鏘~鏘~這樣就完成置底部囉!是不是超EZ的呀!
梅問題-網頁套件《BootStrap》打造Responsive Web Design自適應版型入門
[範例1預覽] [範例2預覽]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

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

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

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

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

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

共 3 梅留言