---
# System prepended metadata

title: Bootstrap 通用類別
tags: [BootStrap]

---

# Bootstrap 通用類別
###### tags: `BootStrap`
Date : 2022/05/18

## 背景
與上下文文字顏色類別相似，將元素的背景設定為任何上下文類別。背景通用類別 沒有設定 color，所以在某些情況下你需要使用 `.text-* 顏色通用類別`。
![](https://i.imgur.com/5bo1s3q.png)
```html
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
```

### 背景漸層
通過添加 `.bg-gradient` 類別，將 linear gradient 作為背景圖像添加到背景中。這個漸層從半透明的白色開始，逐漸淡出到底部。

> 你的自定義 CSS 需要漸層嗎？只需添加 background-image: var(--bs-gradient);。

![](https://i.imgur.com/ArUw5yI.png)

:::danger
需要漸層色明顯或是漸白/漸黑，可以修改"`--bs-gradient`"
:::

### 透明度 Opacity
```html
    <div class="bg-primary text-white bg-opacity-10">.bg-primary</div>
```
![](https://i.imgur.com/JP4hJYL.png)

## 邊框 (Borders)
### 增加
```html
    <div class="row">
      <div class="col"><span class="border border-1"></span></div>
      <div class="col"><span class="border-top border-2"></span></div>
      <div class="col"><span class="border-end border-3"></span></div>
      <div class="col"><span class="border-bottom border-4"></span></div>
      <div class="col"><span class="border-start border-5"></span></div>x
    </div>
```
![](https://i.imgur.com/1NKLl1l.png)

### 減少
```html
    <div class="row">
      <div class="col"><span class="border border-0"></span></div>
      <div class="col"><span class="border border-top-0"></span></div>
      <div class="col"><span class="border border-end-0"></span></div>
      <div class="col"><span class="border border-bottom-0"></span></div>
      <div class="col"><span class="border border-start-0"></span></div>
    </div>
```
![](https://i.imgur.com/0Yx9TLH.png)

### 邊框顏色
```html
    <div class="row">
      <div class="col"><span class="border border-primary"></span></div>
      <div class="col"><span class="border border-secondary"></span></div>
      <div class="col"><span class="border border-success"></span></div>
      <div class="col"><span class="border border-danger"></span></div>
      <div class="col"><span class="border border-warning"></span></div>
      <div class="col"><span class="border border-info"></span></div>
      <div class="col"><span class="border border-light"></span></div>
      <div class="col"><span class="border border-dark"></span></div>
      <div class="col bg-secondary"><span class="border border-white"></span></div>
    </div>
```
![](https://i.imgur.com/L0WLhsD.png)

### Border-radius
```html
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
```
![](https://i.imgur.com/0PnAix1.png)
/

```html
    <div class="row">
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=1" class="rounded">
      </div>
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=2" class="rounded-top">
      </div>
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=3" class="rounded-end">
      </div>
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=4" class="rounded-bottom">
      </div>
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=5" class="rounded-start">
      </div>
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=6" class="rounded-circle">
      </div>
      <div class="col">
        <img src="https://picsum.photos/150/75/?random=7" class="rounded-pill">
      </div>
      <div class="col">
        <img src="https://picsum.photos/75/75/?random=8" class="rounded-0">
      </div>
    </div>
```

![](https://i.imgur.com/LlYOaX0.png)

### 邊框寬度
![](https://i.imgur.com/Jz7bOda.png)

## 顏色 (Colors)
使用 color 通用類別為文字上色。如果要為連結上色，你可以使用 .link-* helper classes。它們具有 :hover and :focus 的狀態。
![](https://i.imgur.com/SZlWo6M.png)
```html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
```


## Display

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

value 為以下其中一個：

- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex

![](https://i.imgur.com/7jqsYwy.png)

### 隱藏元素
d-none 隱藏
```html
<div class="d-flex justify-content-center align-items-center d-lg-none bg-primary text-white" style="width:300px;height:300px;">
lg 尺寸上消失
/div>

<div class="d-none d-lg-block bg-success text-white">xs 尺寸以上消失，lg 尺寸出現</div>

```
![](https://i.imgur.com/P9GHQX0.png)

 ### 運用在列印的 Display
 
```html
<div class="d-print-none bg-danger text-white">螢幕出現(列印隱藏)</div>
<div class="d-none d-print-block bg-success text-white">列印出現(螢幕隱藏)</div>
<div class="d-none d-lg-block d-print-block bg-primary text-white">xs 尺寸以上消失，lg 尺寸出現，列印也會出現</div>
```


## 浮動 (Float)
![](https://i.imgur.com/glQTrjF.png)

```htmlembedded=
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
```

- 響應式
![](https://i.imgur.com/DsRgDxp.png)
```htmlembedded=
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
```
![](https://i.imgur.com/xlKgL0l.png)

## 互動 (Interactions)

### 文字選擇
```htmlembedded=
<p class="user-select-all">當使用者點選時，這個段落將會被全選。</p>
<p class="user-select-auto">這個段落具有預設的選取行為。</p>
<p class="user-select-none">當使用者點選的時候，此段落將不會被選取</p>
```

### Pointer 事件
Bootstrap 提供 `.pe-none` 與 `.pe-auto `類別，以移除、添加元素的互動性。
![](https://i.imgur.com/AwZZGBg.png)

```htmlembedded=
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">這個連結</a> 
不可被點選</p>

<p><a href="#" class="pe-auto">這個連結</a> 可以被點選 (此為預設行為).</p>

<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">這個連結</a> 無法被點選，因為其 <code>pointer-events</code> 屬性繼承自父層。然而 <a href="#" class="pe-auto">這個連結</a> 具有 <code>pe-auto</code> 類別，因此可以被點選。</p>
```

- 定位堆疊造成連結可點擊的假象
![](https://i.imgur.com/evHlVPa.png)

可以在 particle 加上 point-event:none，這樣就具有穿透的效果。
```htmlembedded=
  <div class="box">
    <a href="https://www.google.com">前往連結</a>
    <div class="particle"></div>
  </div>
```

## 透明度 (Opacity)
![](https://i.imgur.com/z53CEs7.png)

```htmlembedded=
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
```

## 溢出 (Overflow)
![](https://i.imgur.com/Ntc7nhY.png)

```htmlembedded=
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
```

## 位置 (Position)

### 定位值
```htmlembedded=
<div class="position-static">...</div>  <!--預設-->
<div class="position-relative">...</div>  <!--相對定位-->
<div class="position-absolute">...</div>  <!--絕對定位-->
<div class="position-fixed">...</div>  <!--固定-->
<div class="position-sticky">...</div> <!--黏貼標籤-->

```

### 排列位置 ：  {property}-{position}
其中，property 為以下的其中一種:

- top - 用於垂直定位 top
- start - 用於水平定位 left (LTR)
- bottom - 用於垂直定位 bottom
- end - 用於水平定位 right (LTR)

其中，position 為以下的其中一種:

- 0 - 用於 0 的邊界定位
- 50 - 用於 50% 的邊界定位
- 100 - 用於 100% 的邊界定位

![](https://i.imgur.com/jGXwCdJ.png)

```htmlembedded=
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>
```


### 置中
> 可以透過轉換通用類別 `.translate-middle` 將元素置中。
>此類別將 transform 之 translateX(-50%) 與 translateY(-50%) 應用於元素，並結合使用邊界定位通用類別，讓你可以把元素完全置中。
>
![](https://i.imgur.com/Zj76pkf.png)

```htmlembedded=
 <div class="box position-relative">
    <div class="box1 position-absolute top-50 start-50 translate-middle"></div>
  </div>


  <div class="box position-relative">
    <div class="box2 position-absolute start-50 translate-middle-x"></div>
  </div>

  <div class="box position-relative">
    <div class="box3 position-absolute top-50 translate-middle-y"></div>
  </div>
```

![](https://i.imgur.com/ogfabuk.png)


## 陰影 (Shadows)

![](https://i.imgur.com/wHfMlFT.png)


```html
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
```


## 尺寸 (Sizing)

w-*
![](https://i.imgur.com/rPoQgzT.png)


```htmlembedded=
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
```

h-*

![](https://i.imgur.com/R4uER7K.png)

```htmlembedded=
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>
```

>可以根據需求使用 max-width: 100%; 和 max-height: 100%; 通用類別。

```htmlembedded=
<!--使用通用類別來設定相對於視窗的寬度和高度。-->
# <div class="min-vw-100">Min-width 100vw</div>
# <div class="min-vh-100">Min-height 100vh</div>
# <div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
```
## 間隔 (Spacing) p-* / m-*

**property 設定:**

* m - 設定 margin 的類別
* p - 設定 padding 的類別

**sides 設定:**

* t - 設定 margin-top 或是 padding-top 的類別
* b - 設定 margin-bottom 或是 padding-bottom 的類別
* s - 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right
* e - 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left
* x - 同時設定 *-left 和 *-right
* y - 同時設定 *-top 和 *-bottom
* 空白 - 同時設定 margin 或 padding 在元素的四個邊緣

**size 設定:**

* 0 - 設定 margin 或是 padding 為 0
* 1 - (預設) 設定 margin 或是 padding 為 $spacer * .25
* 2 - (預設) 設定 margin 或是 padding 為 $spacer * .5
* 3 - (預設) 設定 margin 或是 padding 為 $spacer
* 4 - (預設) 設定 margin 或是 padding 為 $spacer * 1.5
* 5 - (預設) 設定 margin 或是 padding 為 $spacer * 3
* auto - 設定 margin 為 auto

## 文字 (Text)

### 對齊
![](https://i.imgur.com/MvwQyBA.png)

### Text wrap 和 overflow
![](https://i.imgur.com/i4NX4Y2.png)

### 大小寫變換
![](https://i.imgur.com/zUDhuFe.png)

### 文字大小
![](https://i.imgur.com/SRPPlyi.png)
