---
# System prepended metadata

title: Bootstrap 工具
tags: [BootStrap]

---

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

## Clearfix (清除浮動)
![](https://i.imgur.com/zHBIXMg.png)

## 連結顏色 (Colored links)
```html=
<a href="#" class="link-primary">Primary link</a>
```
/
## Ratios (比例)
![](https://i.imgur.com/vGEowlv.png)
將所有嵌入如` <iframe>` 包在帶有 .ratio 和長寬比 class 的父元素中。我們的通用選擇器 .ratio > * 會自動調整直接子元素的大小。

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

## Position (位置)


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

#### 固定頂端
```html
<div class="fixed-top">...</div>
```
#### 固定底部
```html
<div class="fixed-bottom">...</div>
```

#### Responsive sticky top

```html
<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 (通用類別-間隔)` 
```html
<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>

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

### 水平 hstack
```html
<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>

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

### 搭配 margin-auto
```html
<!-- 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>
```
![](https://i.imgur.com/OSicgwT.png)

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

```html
<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>

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

## 連結延伸 .stretched-link
` class加在按鈕上`
 
利用 偽元素 postion 蓋上讓整個卡片可以點擊。
==父元素 必須具備  position: relative==
範例中的 .card 本身有具備  position: relative;
(請看筆記檔案or文件範例)

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

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

<!-- 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)-->

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

```css=
    .text-truncate-mutiple {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 4; /*截斷行數*/
      -webkit-box-orient: vertical;
    }
```
![](https://i.imgur.com/WFGhMJQ.png)

