本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

相信大家一開始在練習網頁的時候可能會為了讓自己網頁底子更扎實，所以網頁的排版、 RWD 等等都自己做，不過人總是怠惰的，等到練習到某個階段後一定會開始想找找看有沒有好用的套件可以讓我用簡單的方式達到美觀的排版以及 RWD ，於是筆者要來推薦一個非常好用的前端開源框架：Bootstrap。

Bootstrap介紹

Bootstrap 從第三個版本開始，為了跟上時代的變遷加入了 RWD 並且以 行動裝置為優先 ，如此一來工程師就不用為了行動裝置而煩惱了，這對前端工程師可以說是一大福音啊！

Bootstrap 除了提供一些基本的參考樣式以及排版模式之外，還提供了許多好用的元件幫助前端工程師加速網頁的開發，使得工程師在開發網頁上變得更加容易了，這幾種優點使得 Bootstrap 非常適合像筆者這種缺乏美感的工程師使用，看看底下這張範例圖是不是就相當簡約好看了呢XD

Bootstrap 常用的內容基本上可分為： Layout 以及 Component 。

• Layout

  Bootstrap 厲害的就在於非常彈性化的排版， Bootstrap 的排版方式除了有 Bootstrap3 出現的 grid 還有另一個 Bootstrap4 才出現的 flex 。

  • grid

    利用 col-number 清楚定義每個column被切割多少等分，而每個column最多只能被切 12 個等分，所以每個column的number總和不能超過12喔！

    

    不曉得各位在上圖有沒有發現除了基本的 .col 外還多了 .col-md ，其實後面這個 md 具有 RWD 的效果喔，以上圖第一行為例子來看，第一行代表著當螢幕寬度 >= 768px時，這個 column container 會被切成8:4的比例，反之 .col-md-8 會以 .col-12 的樣式顯示而 .col-md-4 會以 .col-6 的樣式顯示。
    

  • flex

    將 flexbox 的各種排版模式實作成各個 class 以方便工程師使用，除了基本的 flex 以外還提供了 RWD 版本的 flex 方便工程師處理 RWD 排版問題。

• Component

  Bootstrap 的元件琳瑯滿目，筆者在這邊列舉幾個自己常用的元件。

  • Carousel(輪播)

    

  • Dropdown(下拉選單)

    

  • Form

    

  • Modal

    

  • Navbar

    

  • Pagination

    

總結

Bootstrap 是個非常好用的前端框架，筆者到現在還是會一些 Bootstrap 提供的元件來加速網頁開發， Bootstrap 固然好用但在一些小地方仍然要小心，畢竟 Bootstrap 是利用 class 來套用 CSS ，所以假如自己有要客製化一些樣式要小心 className 的重複。

今天就沒有總結小練習了畢竟 Bootstrap 上面已經提供許多範例可以看了，讀者們不妨可以稍微上去看一下這些範例網頁，對於未來在開發網頁時一定會有很多啟發喔！