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是自動調整。