# 0407 Bootstrap 官方文件導讀
###### tags: `HTML / CSS`

[Bootstrap 官網](https://getbootstrap.com/)
==只有官網文件上寫的東西才能用 Bootstrap 框架 class 設定，有特殊需要可以自己加==
[Source files](https://getbootstrap.com/docs/5.0/getting-started/download/#source-files)
## 框線系統 (續昨天)

- Bootstrap 有內建 reset

Docs/Layout/Container:

`.container-fluid` 在任何裝置都是滿版

* Bootsrap 是將屬性作成 class 名稱
範例：

.tmp{
  justify-content: flex-start;
  justify-content: flex-end;
  justify-content: center;
}
在Bootsrap會呈現：
<div class="justify-content-stat"></div>
<div class="row justify-content-end"></div>
<div class="row justify-content-center"></div>


|縮寫|全名| |縮寫|全名
|:---:|----|---|:---:|---|
|x|水平軸| |g | gutters 欄跟欄的間距|
|y|垂直軸||m | margin|
|s|flex主軸方向起點||p | padding|
|e|flex主軸方向終點|
|t|top
|b|bottom

* gutters 控制格線系統的 padding
* g-0 ~ g-5
* gy 設定上下，gx 設定左右


從row去決定底下要分幾欄以及欄跟欄的間距

#### 父層設定變數（自訂屬性），子層套用變數

.g-5{
--bs-gutter-x: 3rem
}
.row{
padding-right: calc(var(--bs-gutter-x)/2);
/*格線套用*/
}

spacer 與 gutter 與 rem 的關係(utility/spacing) (layout/gutter)
3rem => 16px * 3 => 48px / 2 = 24px
*1 rem = 16 px*
rem: 相對於瀏覽器預設字體大小的長度單位 (Unit relative to font size of the root element.=>取自MDN官網解釋)

## 色彩系統
### 基本常用色定義
Sass變數代入

1. 先定義基本色彩色碼

    $blue:    #0d6efd;
    $indigo:  #6610f2;
    $purple:  #6f42c1;
    $pink:    #d63384;
    $red:     #dc3545;
    $orange:  #fd7e14;
    $yellow:  #ffc107;
    $green:   #198754;
    $teal:    #20c997;
    $cyan:    #0dcaf0;

1. 接著定義Bootstrap常用色

    $primary:       $blue;
    $secondary:     $gray-600;
    $success:       $green;
    $info:          $cyan;
    $warning:       $yellow;
    $danger:        $red;
    $light:         $gray-100;
    $dark:          $gray-900;

### 背景顏色(utilities/background)
.bg-顏色

只提供固定色彩及自訂主要、次要色彩
漸層色(.bg-gradient)

### 框線顏色 (utilities/border)
.border-顏色 (沒有 .border-body)

### 文字色彩 (utilities/colors)
.text-顏色
.text-顏色-不透明度(數字) 例：.text-black-50 (不透明度 0.5)
-> 官方僅提供.text-black-50、.text-white-50，若想要其他的自己寫


### 表格色彩 (content/tables)

### 寬度(utilities/sizing)

### Display (utilities/display)《很重要》
- `.d-{value}` for `xs`
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
- 編寫順序為由小到大，所以 .d-md-none 代表從 md 以上都隱藏

### Flex (utilities/flex)《很重要》

有問題或是想確定屬性設定的話可以下載原始碼 (Source files) 直接查看
[下載位置](https://getbootstrap.com/docs/5.0/getting-started/download/)

### position (utilities/position)
目前 5.0 版本還無法做到 RWD 設定


### (utilities/borders)

<img src="..." class="rounded-circle" alt="...">

要是正方形，才會變成一個圓

### (utilities/overflow)

## 選單相關 (/Components)
### navbar
考量手機跟桌機的版面設定
### pagination

<nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>

active，表作用中

### list group
### breadcrumb

### 會遭遇的情況
1. 背景要滿版但是選單不要
2. logo、選單、搜尋區塊的配置

### 卡片組件 (components/card)
- 記得把官網內建的 inline-style 刪除 ( `style="width: 18rem`)
- 修改成自己能用的版本之後，建成一個 Snippet 使用

disabled 禁用

Snippet 命名建議
bs, b5開頭 = bootstrap
後面加數字 444 3333 84 93 66 分欄數
bs-card 卡片組件
如果同一個 snippet 有兩個指令的話兩個都可以選，跳出來再選擇就好

只要格線(欄) bs444

要container row 格線 cr444

* 一個卡片組件會區分三段
card-header
card-body
card-footer

* List groups / flush
依照需求選擇貼在 card `body` 的裡面或外面

<div class="card">
    <img src="https://picsum.photos/300/200/?random=2" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
    </ul>
</div>


貼在card-body裡會呈現這樣↓ 格線不會延伸到格子


### Image overlays
- 把 card-body 改成 card-img-overlay

### components/dropdowns

### components/collapse

- 有下面兩種屬性就可以使用 JS 功能
- data-bs-toggle
- data-bs-target="#collapseExample"
- #為id名稱
- data-bs-target=".collapseExample"
- .為class名稱
- target為設定對象

### components/accordion

收合區多一個屬性 data-bs-parent


### components/carousel 幻燈片

Amos 說 Bootstrap的不好用，建議使用其他套件
＊＊ 推薦 [Swiper](https://swiperjs.com/demos) ＊＊
其他：
[Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/)
[Aos (做動畫用)](https://michalsnik.github.io/aos/)
[wow.js (做動畫用)](https://wowjs.uk/)

### components/tooltips

需要使用 JS 的功能，在檔案裡貼上，貼到 script 裡
跟Bootstrap貼在一起
有些需要使用到 JS 或是沒辦法直接修改的屬性，可以先翻 Bootstrap 原始碼找到設定的選取器，再直接編輯該選取器的屬性覆蓋掉原始設定

### components/popovers

### forms
要看一下，蠻重要的（Form control / Select)

### Sass

## 在電腦中開啟手機的 debug 工具

android: 開啟開發者模式後用連接線連到電腦再開啟 chrome 連 chrome://inspect/#devices
裡面就可以開啟檢查跟開發者工具
[safari iOS](https://blog.toright.com/posts/3661/mobile-webapp-開發技巧-透過-safari-web-inspector-遠端偵錯-ios-uiwebview.html)
[chrome android](https://blog.xuite.net/yh96301/blog/539578941)

---

### 常用色彩類別
> 透過類別名稱中，不同前綴字可產生相對應的樣式效果

| 前綴字 | 對應CSS效果 |
|:-----:|-----------------------|
|text- | color: XXX; |
|bg- | background-color: XXX;|
|border-| border-color: XXX; |
|link- | 除了改變文字顏色以外，在hover和focus狀態下亦有套用色彩|

### 色彩應用
> 不同元件都有對應的色彩應用類別，以下列表都有各自定義的樣式效果

| 前綴字 | 文件連結 |
|:-----:|-----------------------|
|table- | [連結](https://getbootstrap.com/docs/5.0/content/tables/#variants)|
|alert- | [連結](https://getbootstrap.com/docs/5.0/components/alerts/)|
|btn-| [連結](https://getbootstrap.com/docs/5.0/components/buttons/) |

複習 [flex: 1 1 0%;](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex)

複習[grow, shrink](https://wcc723.github.io/css/2020/03/08/flex-size/)

## 其他框架
1. (投影片) [Swiper](https://swiperjs.com/demos/)
2. (投影片) [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/)
3. (動畫) [AOS](https://michalsnik.github.io/aos/)
4. (動畫) [wow.js](https://wowjs.uk/)

## Amos's 格線系統 snippet
| 1. **c**ontainer + **r**ow (cr)| 2. 只要格線 bs4444, bs333, bs39 ... | 3. 巢狀結構(1+2) cr444 |
| -------- | -------- | -------- |
|  |  |  |
- Amos 使用情境，可由以上 1+2 進行變化 
- 常用組件可修改後製作 (e.g. bs-card) ，同指令簡碼可用描述區分

---

### SASS & SCSS

https://sass-lang.com/guide