# [Bootstrap] 宣告指令（位置移動、色系變更）

###### tags: `Bootstrap`
### 1. 色系調色盤-bg/text


<p class="text-primary">.text-primary</p>


參考來源：https://bootstrap.hexschool.com/docs/4.0/utilities/colors/

### 2. 移動位置區塊-p/m

移動y軸代表調整上下位置，x軸則是左右位置
pl|py=padding left|padding top & bottom
ml=margin left

### 3. 響應式圖片

Bootstrap 中的圖片可利用img-fluid設定為響應式

<img src="..." class="img-fluid" alt="Responsive image">

* .rounded 可以讓圖片顯示圓角傚果
* .rounded-circle 可以設置橢圓形圖片

`<img src="..." class="rounded float-left" alt="...">
`

### 4. 背景圖案

background-attachment是背景固定模式的屬性，而不同的固定模式就有不一樣的視覺效果

* scroll模式也是預設值，背景圖會隨著外圍頁面滾動而移動。
* fixed模式，不管外面、裡面怎麼滾，他都是不會動的。
* local模式，主要的特色就是，自己的區塊內如果滾動時，背景圖也會跟著移動。

body  {
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

參考來源
https://wcc723.github.io/css/2013/09/25/background-att/

### 5. 調整水平方向，不換行

d-flex 方向性:
透過通用類別來設定 flex 容器與內層 flex 的方向，在大多的情況下你可以忽略水平的 class，因為瀏覽器預設值是 row，不過有些特定情境下需要設定這個值(像是響應式情境)。

justify-content 是管水平方向對齊的，align-items 是管垂直方向對齊的

### 6. icon圖型


<i class="fas fa-band-aid"></i>

參考資料
https://pjchender.blogspot.com/2015/04/font-awesomeicon.html