[For 新手] 如何使用Bootstrap 裡的 grid system 配置版面

前言:
一個網頁內容通常不會只有一個網頁元件, 所以如果我們希望呈現出來的結果符合預期, 那我們必須要學會如何排版, 有秩序地安置這些網頁元件, 這裡的教學會告訴大家如何使用Grid 來實現排版

首先, 我們來看一下範例

這個頁面可以分成三個部分, 如下圖所示
一. Welcome ,網頁的簡介
二. Game 1 的簡介與下載點
三. Game 2 的簡介與試玩按鈕

基本上如果要使用Grid ,
首先, 我們需要一個 container 當作容器

<div class="container">

...

</div>

接下來, 在container裡定義列與行
定義列的語法 :　<div class="row">

這裡我們先把兩列定義出來

<div class="row">

</div>

<div class="row">

</div>

再來, 定義行

定義行的語法: 　<div class="col-[支援的裝置]-[大小]">

這裡跟列比較不一樣的是, 定義行的時候可以指定要支援的裝置, 以及大小, 

目前可支援的裝置有四種 xs, sm, md, lg, 如果你的網頁是要呈現在手機上的話, 可能就需選擇xs 

目前支援的大小有1~12, 1 表示呈現大小是一整列的1/12的意思, 所以依此類推 12 表示一整列裡佔12/12大的行

這邊, 我們替範例在第一列增加一個行, 還有在第二列裡增加兩個等大的行, 所以原始碼就會變成

<div class="row">

     <div class="col-md-12">

     </div>

</div>

<div class="row">

     <div class="col-md-6">

     </div>

     <div class="col-md-6">

     </div>

</div>

完整程式碼如下:

<div class="container">

　　<div class="row">

　　　<div class="col-md-12">

　　　　<h2>

　　　　　Welcome

　　　　</h2>

　　　　<p>

　　　　　　Hi there, this is the largest website that provides a lot of games. And free of charge. Just register as our member, then sign-in. You can experience games before buying.

　　　　</p>

　　　　<p>

　　　　　<a class="btn" href="#">View details »</a>

　　　　</p>

　　　</div>

　　</div>

　　<div class="row">

　　　<div class="col-md-6">

　　　　<h3>

　　　　　　Game 1. Be a police officer in New York, and catch the bad guy

　　　　</h3>

　　　　<button type="button" class="btn btn-default">

　　　　　Download

　　　　</button>

　　　</div>

　　<div class="col-md-6">

　　　<h3>

　　　　Game 2. Race with your friends on the road.

　　　</h3>

　　　<button type="button" class="btn btn-default">

　　　　Try

　　　</button>

　　</div>

　</div>

</div>