# Bootstrap 4 - 基礎
###### tags: `FrameWork-bootstrap4`
## 一 . 基礎概念
### (一) . 基本
1. 什麼是boostrap : 是一個**css framework**。
2. 組成 :
- Default style 。
- Grid layout 。
- Pre-defined class (components) 。
3. 優點 : **內建RWD**。
### (二) . Default style
1. Reboot :
- 使的在各個瀏覽器上面使用的boostrap都是一樣的
- 因為不同瀏覽器的default不同，而造成不同效果。
2. Typography: boostrap4內建的一些小class，專用於排版。
- 例如boostrap4有內建的h、display等等功能。
### (三) . Grid layout
1. 是網頁為一個由row和colum組成的網格。
2. 由container class包含row class和col class形成網格。

## 二 . Grid 系統

### (一) . 基本
1. 基本架構 : **巢狀結構**的網格架構。
- row和col的外面要包含一個container - 使的更好操控。
- row為直列，col為橫列，**必用row包住col**。
- 要顯示的內文多寫在col中。

<div class="cntainer">
   <div class="row">
      <div class="col">
          context
      </div>
   </div>
</div>

2. Grid layout是使用flexbox : col會自動分割row的大小。
- 圖一 : 每個col佔row的50%。
- 圖二 : 每個col佔row的25%。

<div class="cntainer">
   <div class="row">
      <div class="col">
          context
      </div>
      <div class="col">
          context2
      </div>
   </div>
</div>

<div class="cntainer">
   <div class="row">
      <div class="col">
          context
      </div>
      <div class="col">
          context2
      </div>
      <div class="col">
          context3
      </div>
      <div class="col">
          context4
      </div>
   </div>
</div>

### (二) . RWD
1. RWD下的網頁操作 : boostrap**設定一個網頁col的最大個數為12個**。
- 此設定方便於排版。
- 若有加入container class下，超過13個欄自動換行。

2. 用數字表示要佔幾欄 : 可以『col-數字』方式設定要佔去幾欄。
- 圖一 : col會自動分配row的空間。
- 圖二 : col只會佔四欄，因此，row右側有三分之一的空間是空的。

<div class="cntainer">
   <div class="row">
      <div class="col">
          context
      </div>
      <div class="col">
          context2
      </div>
   </div>
</div>

<div class="cntainer">
   <div class="row">
      <div class="col-4">
          context
      </div>
      <div class="col-4">
          context2
      </div>
   </div>
</div>

3. 用增加英文表示size : 如果我們需要在**不同的device上讓col佔去不同大小的欄數**。
- 圖一 : 可以使的螢幕在一般size的範圍下col佔4欄，在小size的範圍下col佔6欄。

<div class="cntainer">
   <div class="row">
      <div class="col-md-4 col-sm-6">
          context
      </div>
      <div class="col-md-4 col-sm-6">
          context2
      </div>
   </div>
</div>

4. boostrap4的size表 : 螢幕寬度。

| xs | sm | md | lg |
| --- | -------- | ---- | -------- |
| <768px | 768~991px | 992~1200px | >=1200px |
### (三) . 常用的class
1. ```cantainer``` : 要注意使用的RWD形式。
- 長寬 ： width自動填滿父元素，hight依內容變動。
- 邊界 ： 沒```margin padding border```。
- 內部元素 ： 是block，裡面每一個元素占去一列。
- RWD ： 有多種不同的格式，注意每個有最大的限制，可以用``` cantainer-fluid```。
2. ```row``` : 有邊界。
- 長寬 ： width自動填滿父元素，hight依內容變動。
- 邊界 ： ``` margin```有左右，個-15。
- 內部元素 ： 用```col```自動平分```row```。
- RWD : 有，但預設的```row```是自動調整。