close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
分享關於Photoshop教學|商品攝影|網頁教學|Wordpress教學|iPhone教學| Flash教學|jQuery教學...等 
網設必備《Bootstrap》打造Responsive Web Design自適應版型入門
Jan 15th 2014, 01:30, by admin

梅問題-網頁套件《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預覽]


引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 xals2q 的頭像
    xals2q

    2015花千骨線上看tv 2016花千骨 花千骨線上看drama q 花千骨線上看drama 仙俠奇緣之花千骨線上看 花千骨線上看tv543 電視劇花千骨線上看 花千骨線上看第一集

    xals2q 發表在 痞客邦 留言(0) 人氣()