bootstrap實作紀錄(一)

介紹

bootstrap是一套能使前端開發更快速的框架，它是由Twitter 的 Mark Otto 和 Jacob Thornton 開發的，除了能快速開發還有對於行動裝置設計更方便與跨瀏覽器使之樣式不至於落差太大，另外還提供了漂亮的icon與頁面切版與RWD等。後續文章將會一一實作

我絕對不會說對我們美工不好的人來說bootstrap真是救星XD

如何使用

使用前請先到bootstrap官網下載框架
使用版本為：3.2.0

如果你是下載非編譯或Sass版你將得到以下目錄

其中，我們需為專案引入jquery bootstrap.css 與 bootstrap.js也可以使用CDN的方式做引入如下：

如此便將bootstrap匯入於專案之中

註：注意bootstrap仰賴於jquery，所以一定要匯入並放在bootstrap.js之前。min表示為壓縮版，適用於即將上線的專案

接下來我們附上完整程式碼並看看效果吧

    
    
    
    



    

hello world

    

    

hello there

    
    

    
        1
    
    
        2
    
    
        3
    
    

    

        


        
#
        
First Name
        
Last Name
   

   


        
1
        
水
        
餃
   

        
2
        
精靈
        
遊俠
   

       
3
       
獨孤
       
阿誌
   

    

左bootstrap <----------------------------------------------------------------------------------> 右一般

結論：強大RWD、切版、icon、UI，好框架不用嗎

SHARE

鄭吉清

一個來自高雄的學生、記錄自己所學