# 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的角色，为选中状态。 :::