最近在參與討論的時候聽到有人說CSS框架好好用什麼的
所以開始接觸Bootstrap，當初開始學習前端我就是手刻派
我主張「初學儘量不要用太方便的工具，從基層開始」
這個主張在我當初服役期間幫國軍設計線上心情溫度計的時候是非常的有用的
畢竟在那個封閉的環境裏面全部都要手刻，連IDE都不給用
不過出了社會一切講求效率，是時候試看看很多人在使用的Bootstrap
讓我們看看官網上的說明，什麼是Bootstrap？
「Bootstrap是一套HTML、CSS和JS框架，用於開發自適應式網頁與以行動為優先的網頁專案」
如果上面這句有不懂的就得去GOOGLE了，尤其是不懂自適應式或是行動優先這兩個名詞
看了一些影片後才了解原來Bootstrap就是一組打包好的樣式表！以CSS為例，常用的功能都包好了，要使用某些調整只需要直接引入對應的class就好了，方常方便呢。
首先我們進入Bootstrap官網 選擇Download Bootstrap的選項
會下載一個壓縮檔，裏面包含幾個檔案，主要差異是檔名有沒有min
有min的版本大小比較小，因為省略了縮排換行等等幫助閱讀的裝飾看起來像亂碼
而沒有min的就相反啦，檔案稍微大一點但是看起來就比較舒服了。
接下來就是繼續往下滑到Basic template看看我們的第一個範例
恩....看起來和我們用手刻的時候一樣，只是
CSS和js的 改成剛剛下載的Bootstramp檔案就好了
接下來就是拿下面的Examples來練習啦。
第一篇Bootstrap的文章也到了尾聲了，我要去練習Examples啦
同時網路上其實有中文網頁，但是因為翻譯需要時間，所以版本不一定是最新的
如筆者在撰寫這篇文章的時候中文網站的版本是v3.3.1，而正式網站上的是v3.3.7
同時上面還有一行大大的提醒「Aww yeah, Bootstrap 4 is comming!」
所以如果許可的話還是建議使用原文網頁
所以開始接觸Bootstrap，當初開始學習前端我就是手刻派
我主張「初學儘量不要用太方便的工具，從基層開始」
這個主張在我當初服役期間幫國軍設計線上心情溫度計的時候是非常的有用的
畢竟在那個封閉的環境裏面全部都要手刻，連IDE都不給用
不過出了社會一切講求效率，是時候試看看很多人在使用的Bootstrap
讓我們看看官網上的說明，什麼是Bootstrap？
「Bootstrap是一套HTML、CSS和JS框架，用於開發自適應式網頁與以行動為優先的網頁專案」
如果上面這句有不懂的就得去GOOGLE了，尤其是不懂自適應式或是行動優先這兩個名詞
看了一些影片後才了解原來Bootstrap就是一組打包好的樣式表！以CSS為例，常用的功能都包好了，要使用某些調整只需要直接引入對應的class就好了，方常方便呢。
首先我們進入Bootstrap官網 選擇Download Bootstrap的選項
會下載一個壓縮檔，裏面包含幾個檔案，主要差異是檔名有沒有min
有min的版本大小比較小，因為省略了縮排換行等等幫助閱讀的裝飾看起來像亂碼
而沒有min的就相反啦，檔案稍微大一點但是看起來就比較舒服了。
接下來就是繼續往下滑到Basic template看看我們的第一個範例
恩....看起來和我們用手刻的時候一樣，只是
CSS和js的 改成剛剛下載的Bootstramp檔案就好了
接下來就是拿下面的Examples來練習啦。
第一篇Bootstrap的文章也到了尾聲了，我要去練習Examples啦
同時網路上其實有中文網頁，但是因為翻譯需要時間，所以版本不一定是最新的
如筆者在撰寫這篇文章的時候中文網站的版本是v3.3.1，而正式網站上的是v3.3.7
同時上面還有一行大大的提醒「Aww yeah, Bootstrap 4 is comming!」
所以如果許可的話還是建議使用原文網頁
留言
張貼留言