# Bootstrap 4 - 元件筆記
###### tags: `FrameWork-bootstrap4`
## 一 . Card
### (一) . 基礎

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. 
    Some example text.</p>
  </div>
</div>

1. ```card``` class:給出整個卡片的外框，border為1px。
- 高 : 依內容變動。
- **寬 : 父容器的100%**。
3. ```card-body``` class: 加入padding，使內文看起來有排版。
4. ```card-title``` class: 加一點margin-bottom而已，可以直接用```<h>```取代。
5. ```card-text``` class : 加一點margin-bottom而已，可以直接用```<p>```取代。

### (二) . headr 、footer

<div class="container">
    <div class="card">
        <div class="card-header">
            <div class="card-title"> header-title</div>
            <div class="card-text"> header-text</div>
     </div>
     <div class="card-body">
            <div class="card-title"> body-title</div>
            <div class="card-text"> body-text</div>
     </div>
     <div class="card-footer">
            <div class="card-title"> footer-title</div>
            <div class="card-text"> footer-text</div>
        </div>
     </div>
    </div>

1. ```card-headr``` class : 跟card-body幾乎一樣，padding數據不一樣，加上在**底下**會加入一個底線。
2. ```card-footer``` class : 跟card-body幾乎一樣，padding數據不一樣，加上在**上方**會加入一個底線。
3. 可以在footer和headr加入card-title和card-text : 效果跟在card-body加入完全一樣。

### (三) . 加入影像 :

  <div class="card" style="width:400px">
        <div class="card-body">
            <h4 class="card-title">John Doe</h4>
            <p class="card-text">Some example text 
            some example text.John Doe is an architect and 
            engineer</p>
            <a href="#" class="btn btn-primary">See 
            Profile</a>
        </div>
        <img class="card-img-top" src="http://fakeimg.pl/300x300" alt="Card image" style="width:100%">
  </div>

1. ```img-top``` class : 將影像加入card-body前面時。
2. ```img-bottom``` class : 將影像加入card-body後面時。
3. 基本上兩個沒甚麼差，css properity一樣，數據不一樣而已。
4. 把img加入 card-body或card-headr或card-footer : 使影像佔不到整個card的畫面，因為有padding。

## 二 . Alert
### (一) . 基本
#### 第一點 ： **基本class** ：
1. ```class="alert" ``` : alert最外層的wraper。
- 通常用```<div>```。
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 有padding，1px的border，有margin-butomm。
2. ```class="alert-info" ``` : 改變alert的背景，字體顏色。
- 改變color、background-color、border-color的屬性。
3. ```class="alert-link" ``` : 使```<a>```的文字可以對應```class="alert-info" ```改變顏色。
- 通常用```<a>```。
- 沒有任何長寬、padding、margin、order屬性。
- 僅改變文字顏色，字體大小。
4. ```class="alert-heading" ``` : 使heading的文字顏色跟隨```class="alert-info" ```改變顏色。
- 通常用```<h>```類。
- 沒有任何長寬、padding、margin、order屬性。
- 僅改變顏色。
5. alert的內文直接用```<p>```即可，也可以不要用。

#### 第二點 ： **基本佈局** ：

 <div class="alert alert-info">
    <h5 class="alert-heading"> heading </h5>
    <p>
        context
        <a class="alert-link" href="#">Link</a>
    </p>
</div>

1. 佈局模型 ：
- ```alert```和``` alert-info``` : 為底，最基本外層。
- ```alert-heading```包住```<h>```tag，改變顏色。
- ```alert-link``` :包住```<a>```tag， 改變顏色。
2. 顏色 ：
- ```alert-info```為主要的決定。
- ```alert-heading``` 和```alert-link```會依照外層的```alert-info```改變顏色。
- 內文可以用```<p>```包住，沒有class可以加，顏色在```alert-info```已經設定好。

### (二) . 標準動態佈局
#### 第一種變化 ： 關閉alert
1. ```data-dismiss="alert"``` : 加在alert內部的tag中，當此tag被點擊時，關閉外層```alert```。
- 只要有這個屬性，基本上就可以關閉alert了。
- 每個alert都要有一個這個，不再任一個alert的```data-dismiss="alert"``` 被點擊時不有作用。
2. ```class="close" ``` : 可以使關閉button的外型好看點。
3. ```class="fade"``` : 有此設定下的tag會在關閉的時候會有淡去的動畫。
- 如果直接加上此class的話，tag會在初次渲染的時候就觸發消失。
- 所以要加上下一個提及的class。
5. ```class="show"``` : 通常加在一個有關閉和開啟動作的tag，可以使初次渲染的時候，此tag不被消失。

<div class="alert alert-info fade show">
   <h1 class="alert-heading"> heading </h1>
   <button type="button" class="close" data-dismiss="alert" >close</button> 
   <p>
      context
      <a class="alert-link" href="#">Link</a>
   </p>
</div>

#### 第二種變化 ： 加上```<hr>```
- 因為```alert```的設計本身沒有向```card```元素有```header```跟```footer```。

1. 可以```<hr>```加上分別出來上面跟下面。
2. ```<hr>``` : 一條線加上```margin-top```，```margin-bottom```。
3. 一般用一個```<hr>```就好，不要用兩個，比例看起來怪怪的。
4. 再加上```<br>```在```<button>```的尾端。
- 因為```<button>```是一個inline tag，後面直接接上一個```<hr>```會有重複的問題。
- 加上```<br>```可以使button結束就換行，不會跟```<hr>```搶位子。

<div class="alert alert-info fade show">
    <h3 class="alert-heading"> heading </h3>
    <button type="button" class="close"  data-dismiss="alert">close</button><br>
    <hr>
    <p>
        context
        <a class="alert-link" href="#">Link</a>
    </p>
</div>

## 三 . Model
### (一) . 基本
#### 第一點 ： 基本class :
1. ```class="modal"``` : 最外層的wrap，在modal被呼叫後佔滿整個視窗。
2. ```class="modal-dialog"``` : 第二層的wrap，有margin，讓視覺上modal的內容跟整個視窗分離。
4. ```class="modal-content"``` : 第三層wrap，包住內容的。
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 沒有padding，margin，有1px的border。
6. ```class="modal-body"``` : 主要包住內文的，若要使用row-col的話，必須加在這裡。
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 有```padding```， 沒有```margin```或```border```。
5. ```data-target="#id_for_modal" ```和```data-toggle="modal"``` : 加在modal外。
- 由外層開啟modal的基本方法。
- 外部tag ： 加入```data-target="#id_for_modal" ```和```data-toggle="modal"``` 。
- 內部tag : 在```class="modal"```中加入```id="id_for_modal"```，記住，內部tag的id必須跟外部```data-target="" ```的一樣。

#### 第二點 ： 基本佈局 :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tar">
      Launch static backdrop modal
</button>
<div class="modal" id="tar">
   <div class="modal-dialog">
     <div class="modal-content">
        <div class="modal-body">
          test
        </div>
     </div>
   </div>
</div>

1. 佈局模型 ：
- 第一層wrap為```class="modal"```。
- 第二層wrap為```class="modal-dialog"```。
- 第三層wrap為```class="modal-content"```。
- ```class="modal-content"```內開始加入真正的內容。
- ```class="modal-content"```可以視為card元件中的```class="card"```內部加入```body header footer```
2. 顏色 ： 基本上可以自己加入，沒有boostrap4已經做好的。

### (二) . 標準動態佈局
#### 第一種變化 ： 加入header、footer和關閉按鈕
1. ```class="modal-header"``` : 在下方加入一條線的區域。
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 有padding，沒有margin和border。
2. ```class="modal-footer"``` : 在上方加入一條線的區域。
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 有padding，但比```class="modal-header"```小，沒有margin，有1px的border。
3. ```class="modal-title"``` : 多用於```class="modal-header"```內顯示modal的標題。
- 只有增加行寬的功能，所有仍要搭配```<h>```類的tag。
4. ```data-dismiss="modal"``` : 加在```class="modal"``` 內部的元素的屬性，可以關閉所包覆的modal(同於上面alert的關閉。)。
- 只要有這個屬性，基本上就可以關閉modal了。
- 每個modal都要有一個這個，不再任一個modal的```data-dismiss="alert"``` 被點擊時不有作用。
- 可以加入close或btn等等的class使按鈕外觀好看一點。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tar">
      Launch static backdrop modal
</button>
<div class="modal" id="tar">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">heading </h2>
      </div>
      <div class="modal-body">
        test
      </div>
      <div class="modal-footer">
        <button type="button" class="close" data-dismiss="modal">Close </button>
      </div>
    </div>
  </div>
</div>

## 四 . Collapse

## 五 . Navbar

### (ㄧ) . 基本
#### 第一點 ： **基本class** ：
1. ```class="navbar"``` : 整個navbar的base。
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 有padding，沒有margin。
- display : 是flex，內容為justify-content-between。
2. ```class="navbar-brand"``` : navbar的brand，使之特別明顯。
- 長寬 ： ```heigth```填滿父元素，```width```依內容。
- 邊界 ： 有margin-right，有上下padding。
3. ```class="navbar-nav"```:
- 長寬 ： ```heigth```填滿父元素，```width```依內容。
- 邊界 ：沒有margin或padding。
- display : 是flex，內容為colume。
4. ```class="navbar-item"``` :
- 長寬 ： ```width```填滿父元素，```heigth```依內容。
- 邊界 ： 有padding，沒有margin。

#### 第二點 ： **基本佈局** ：

<nav class="navbar navbar-dark bg-dark">
    <a href="#" class="navbar-brand"> Brand </a>
    <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Main</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Others</a></li>
    </ul>    
</nav>

1. 佈局模型 ：
- navbar為底，最基本的外層。
- navbar-brand和navbar-nav為兩個主要子元素。
- navbar-brand放logo。
- navbar-nav包住其他的選單功能。
- navbar-item為每一個選單的選項。

2. 顏色 ：
- navbar-dark : 可以使得此navbar裡面所有的元素的字體顏色變換。
- bg-dark : 可以使得此navbar的背景變成黑色。

3. 問題 ：
- navbar是justify-content-between的預設 ： 在navbar-nav中加入mr-auto，使navbar-nav在navbar-brand後。
- navbar-nav的內容安排是colume的，因為boostarp4原本是因應手機而設計的，改方法下面會提及。

### (二) . 標準動態佈局

1. 解決navbar-nav的內容安排是colume的問題 ：
- 用```class="collapse navbar-collapse"```包住整個```navbar-nav```。
- 再在```class="navbar"```中加入```class="navbar-expand-sm"```
2. 原理 ： 把整個navbar-nav變成一個可拉的清單，而控制的標準就是navbar-expand-sm。
- navbar-expand-sm : 在sm大小以上的螢幕，會navbar-collapse內容。
- navbar-collapse : 對應同一個navbar中的navbar-expand。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a href="#" class="navbar-brand"> Brand </a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="#" class="nav-link">Main</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Others</a></li>
        </ul>  
    </div>  
</nav>

3. 補強 ： 在限制之外顯示navbar-nav。
- 若設定 ： navbar-expand-sm，在sm的螢幕上，navbar-nav會完全消失不見。
- 方法 ： 設定一個```navbar-toggler```，在限制發生時，開啟```navbar-nav```

<nav class="navbar navbar-expand-sm mynavbar navbar-dark">
    <a href="#" class="navbar-brand"> Brand </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarlist">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarlist">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="#" class="nav-link">Main</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Others</a></li>
        </ul>  
    </div>  
</nav>

4. 替換```<a>```為```<span>``` :
- ```<a> ```的缺點 ： 他一定需要一個```href```的屬性，會造成，他必須有一個連接。
- 用```<span>```替換 ： 除了```href```的屬性都保留，再加上```type="button"```，可以讓游標移動時有點擊的效果。