---
# System prepended metadata

title: Bootstrap
tags: ["BIOMEDICAL DATABASE\_"]

---

# Include CSS　（Include via CDN）

$<link>$ 可以用來載入或定義網頁中會用到的資源 (resource)，最常見的像是用來載入 CSS 外部樣式表。
$<link>$ 標籤是放在 $<head>$ 標籤裡面。
屬性：
- rel: 用於 CSS 要加 rel="stylesheet"
- integrity: 目前僅 chrome、firefox 及 opera 有支援，用來檢驗載入的 script 是否經過第三方竄改。為安全性作提升。(integrity=”[hash]-[value]”)
- crossorigin: crossorigin 屬性在 $<audio>$、$<img>$、$<link>$、$<script>$ 和 $<video>$ 元素上有效，提供對 CORS 的支持，定義元素如何處理跨域請求，從而啟用對跨域請求的配置。若是用 anonymous 請求使用 CORS 標頭，並且憑證標誌設定為「同源」。 除非目的地是相同來源，否則不會透過 cookie、客戶端 TLS 憑證或 HTTP 驗證交換使用者憑證。
```html=
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
```

# Include Javascript
```html=
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
```

# progress bar
## div element　 
- The .progress wrapper 
![image](https://hackmd.io/_uploads/ByYAyZlD6.png)
- The .progress-bar wrapper 
![image](https://hackmd.io/_uploads/HkIZxbgwp.png)
## .progress wrapper
需要有 role="progressbar", 和 aria 屬性 
```css=
.progress,.progress-stacked{
    --bs-progress-height:1rem;
    --bs-progress-font-size:0.75rem;
    --bs-progress-bg:var(--bs-secondary-bg);
    --bs-progress-border-radius:var(--bs-border-radius);
    --bs-progress-box-shadow:var(--bs-box-shadow-inset);
    --bs-progress-bar-color:#fff;
    --bs-progress-bar-bg:#0d6efd;
    --bs-progress-bar-transition:width 0.6s ease;
    /*flex 排列效果*/
    display:flex;
    height:var(--bs-progress-height);
    /*hidden  放不下的內容就不顯示出來。*/
    overflow:hidden;
    /*font-size 字體大小*/
    font-size:var(--bs-progress-font-size);
    /*background-color  背景顏色*/
    background-color:var(--bs-progress-bg);
    /*border-radius  border 直徑*/
    border-radius:var(--bs-progress-border-radius)
}
```
- rem：相對單位，每個元素透過「倍數」乘以根元素的 px 值
- 
### aria 屬性
- aria-label: element 的名字

## .progress-bar wrapper
```css=
.progress-bar{
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    color:var(--bs-progress-bar-color);text-align:center;
    white-space:nowrap;
    background-color:var(--bs-progress-bar-bg);
    transition:var(--bs-progress-bar-transition)
}
```
- overflow-visible:
.progress-bar 內的內容是透過 Overflow:hidden 控制的，因此它不會從進度條中溢出。 如果您的進度條比其標籤短，內容將被限制並可能變得不可讀。 若要變更此行為，您可以使用溢位公用程式中的 .overflow-visible
- text-dark:
用 text-dark 可以將字體改成深色
- style: 進度條長度
e.g. style="width: 25%"
- bg-success: 綠色
- bg-info: 藍色
- bg-warning: 黃色
- bg-danger: 紅色

```css=
.bg-success{--bs-bg-opacity:1;
    background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important
}

.bg-info{--bs-bg-opacity:1;
    background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important
}

.bg-warning{--bs-bg-opacity:1;
    background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important
}
.bg-danger{--bs-bg-opacity:1;
    background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important
}
```
- 進度條文字顯示: 
e.g. 
```html=
<div class="progress-bar" style="width: 25%">25%</div>
```

# Reference
[1keydata](https://www.1keydata.com/)
[CSS 語法](https://www.1keydata.com/css-tutorial/tw/)
[flex 排列](https://medium.com/jordanttcdesign/%E5%89%8D%E7%AB%AF%E5%AD%B8%E7%BF%92-css-flex-%E6%AF%92%E8%97%A5%E7%AD%86%E8%A8%98-e229db815bf2)

# button
bootstrp 的 button element 是與 html 的 button element 合用的。相關 css 寫在 .btn  class 中。bootstrap 中　button 預設就是有透明的邊框及背景顏色。而 bootstrap 有已經有預先設定一系列相對應的顏色甚至是功能的 button 樣式，像是：
```html=
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
      <button type="button" class="btn btn-link">Link</button>
```
bootstrap 的 button 也不是只能跟 html button 合用，也可以跟 $<a>$,$<input>$ 合用，為加強可讀性，可以增加 role 屬性，引述 [多年0以后](https://www.jianshu.com/p/df431c35cfeb)
:::info 
html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button比如，$<div role="checkbox" aria-checked="checked"></div>$辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。
:::



