自從行動裝置愈來愈普及後,也影響到網頁設計的生態,從原本的桌機版面,到之後衍伸到手機版,甚至到最近火紅的Responsive Web Design自適應版型,無論那一種方式,都是要讓網頁能在各個裝置上,以最佳的方式來呈現,雖然說RWD是最一勞永逸的方式,完全不需判斷裝置的檔頭,全部用CSS的Media Screen,就可自動的縮放版面,相當的方便,但一樣的類別名稱,就得依照個別的解析大小一一設定,每當製作完畢,那CSS碼都幾千行,因此要一個個的慢慢Key實在太慢太累人啦!這時不妨可試試Bootstrap的CSS Framework,且這套組是由知名的社群平台Twitter所開發的,因此無論在結構還是互動性上都相當的完整,再加上3.0版架構更加完整,相當適合拿來打造RWD自適應的,網頁版型啦!至於要怎麼用呢?現在就一塊來看看囉!
Bootstrap:
Bootstrap套件下載:Step1進入網站後,點一下左邊的
Download鈕,將套件下載回來。
Step2下載完畢解壓縮,分別會看到css、fonts、js的資料夾。
Step3接著到jQuery官網中,下載jqury並放到js的資料夾中。
引用Bootstrap套件:Step4這段語法在Bootstrap官網中就可找到,但在jquery的地方,改成在自已本機端,這樣讀取速度會比較快一些。
Step5並儲存在相對的目錄下。
Step6瀏覽一下,哈~這樣就已載入所有的Bootstrap,因此就可使用它的CSS與JS互動特效啦!
Bootstrap(RWD)應用:Step7接著在官網中,可找到以下的表格,此表格相當的重要,主要是在說明,該套件中的螢幕尺寸的那些,分別有四個尺寸,且代稱分別為lg、md、sm、xs....等。
Step8而Bootstrap是將版面欄位,等分等12塊,因此在設計RWD的版面需用百分比的方式來作設計。
Step9比方區塊要居時時,只需加入
container的類別名稱,區塊就會依照視窗尺寸居中啦!
Step10由於為了讓各位可清楚看到是否居中,所以在DIV的區塊加了白框。
Step11同時它可用巢狀式來包覆,因此當用了
container居中後,再用
row接著裡面二個div的總合要是12就可以了。
Step12這時就可看到,下方的區塊中,分別就有內容與側邊欄二區塊。
Step13而Bootstrap還有一個相當棒的功能,就是可讓版尾置底部,除了CSS設定好後,在區塊的地方,要用
wrap包起來,那剩下的部分就是版尾啦!
Step14鏘~鏘~這樣就完成置底部囉!是不是超EZ的呀!
[範例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.
留言列表