RWD速成法 (使用Bootstrap Grid System)

前言：
     隨著RWD設計越來越發達，網路上也開始有了很多很方便的framework裡面都有RWD的功能可以套用，Bootstrap就是其中一個。

---

第一步：匯入Bootstrap：

CDN匯入是一個最快捷的方式了

<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet"></link>
<script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

若要下載的話Bootstrap官網可以找到：https://getbootstrap.com/docs/4.0/getting-started/download/

第二步：寫數個div並加上class：

<div class="container">
 <div class="row">
  <div class="col-md-6 col-sm-12">宋詩</div>
  <div class="col-md-6 col-sm-12">七律</div>
  <div class="col-md-6 col-sm-12">文天祥</div>
  <div class="col-md-6 col-sm-12">過零丁洋</div>
  <div class="col-md-6 col-sm-12">辛苦遭逢起一經</div>
  <div class="col-md-6 col-sm-12">干戈寥落四周星</div>
  <div class="col-md-6 col-sm-12">山河破碎風飄絮</div>
  <div class="col-md-6 col-sm-12">身世浮沉雨打萍</div>
  <div class="col-md-6 col-sm-12">惶恐灘頭說惶恐</div>
  <div class="col-md-6 col-sm-12">零丁洋裏嘆零丁</div>
  <div class="col-md-6 col-sm-12">人生自古誰無死</div>
  <div class="col-md-6 col-sm-12">留取丹心照汗青</div>
 </div>
</div>

然後打開我們設定好的網頁會變成這樣 (我有自己加大字體及框線)

將畫面拉小時則會呈現這個畫面

---

補充：Grid System
範例中使用的
"class="col-md-6 col-sm-12"
分別代表著畫面在720px及540px時要做的排版，在Grid System裡面col有分成sm md lg xl等寬度的門檻，然而後面的數字則是代表"等分"，Grid System是以一列12等分的形式去做排版，也就是說當我後面數字設為1，則該欄位只會佔12分之1的寬度，若設為12則是一列獨佔所有寬度，設為6則是佔一半的寬度，然而其他多設的寬度則會順勢往下換行，其他詳細的內容可以參考官方網站的表格

參考至：http://bootstrap.hexschool.com/docs/4.0/layout/grid/

結語：
     使用Bootstrap的Grid System來達成RWD是不是超級輕鬆又簡單，當然這只是一個速成的方式，想要更完整的設計RWD勢必還要搭配CSS、JS來設計比較完善。
     Grid System 只是 Bootstrap 廣大功能中的其中一項，Bootstrap可以讓我們快速地使網頁看起來更體面，既然因為RWD需求匯入了Bootstrap，不訪也去看看它其他強大的功能吧！

下載範例點我

---