# Bootstrap 工具
###### tags: `BootStrap`
Date : 2022/05/24

## Clearfix (清除浮動)

## 連結顏色 (Colored links)

<a href="#" class="link-primary">Primary link</a>

/
## Ratios (比例)
將所有嵌入如` <iframe>` 包在帶有 .ratio 和長寬比 class 的父元素中。我們的通用選擇器 .ratio > * 會自動調整直接子元素的大小。


## Position (位置)


#### 固定頂端

<div class="fixed-top">...</div>

#### 固定底部

<div class="fixed-bottom">...</div>

#### Responsive sticky top

<div class="sticky-top">...</div>

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>

## 堆疊 (Stacks)
### 垂直 vstack
`vstack`
`gap-3 (通用類別-間隔)`

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>


### 水平 hstack

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>


### 搭配 margin-auto

<!-- gap 網隔間隙 -->
<div class="hstack gap-3 ">
  <div class="bg-light border me-auto">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>
<h3>EX 2</h3>
<div class="vstack gap-3 " style="height: 300px">
  <div class="bg-light border mb-auto">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>


### 使用 vr (vertical rules) 產生分隔線

<div class="hstack gap-3">
  <div class="bg-light ">First item</div>
  <div class="vr"></div>
  <div class="bg-light ">Second item</div>
  <div class="vr"></div>
  <div class="bg-light ">Third item</div>
</div>


## 連結延伸 .stretched-link
` class加在按鈕上`

利用 偽元素 postion 蓋上讓整個卡片可以點擊。
==父元素 必須具備 position: relative==
範例中的 .card 本身有具備 position: relative;
(請看筆記檔案or文件範例)

## 文字截斷 (當文字過長
文字截斷 (Text truncation)

==需為 display: inline-block 或是 display: block==

<!-- Block  -->
<div class="row">
  <div class="col-2 text-truncate " >
    This text is quite long, and will be truncated once displayed.
  </div>
</div>

<!-- Inline-Block  -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  This text is quite long, and will be truncated once displayed.
</span>

<!-- 設定最大寬度就可以截斷範圍 (例如max-width 或是 col-2)-->

- 多行截斷(網路上找就可以找到)

    .text-truncate-mutiple {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 4; /*截斷行數*/
      -webkit-box-orient: vertical;
    }