### Bootstrap5 實戰營-第一週筆記 - [英文版](https://getbootstrap.com/docs/5.0/getting-started/introduction/) - [中文版](https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/) Bootstrap是由 HTML、CSS 和 JavaScript 寫好的前端框架，需要時只要載入已經寫好的程式碼來使用即可。 > **載入方法** 官方提供兩種載入方式： 嵌入C D N：利用網路連上與現在位置最近的伺服器。 - 優點：載入速度快、省流量。 - 缺點：若選擇的C D N瀏覽器掛掉，網站也會跟著掛掉。 上圖為使用 C D N 方式，chrome可視為自己的伺服器，如果要連上六角學院的官網，需要先輸入網址進入，進入後會把首頁的 html 抓下來在自己的瀏覽器解析才可以看到網頁，如果解析到一半，瀏覽器發現 html 有外部伺服器的網址，便會連到最近的伺服器取得需要的東西。 - 使用方式：進入官網的 [Introduction](https://getbootstrap.com/docs/5.0/getting-started/introduction/) ```html <!-- 將此段CSS貼至<html></html>之間 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> ``` ```html <!-- 將此段JavaScript貼至</body>之前 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> ``` --- 下載在本地端使用：將提供的程式碼下載放進自己HTML的資料夾中，打包供使用者使用。 - 優點：可修改程式碼客製化。 - 缺點：程式碼太過龐大時容易拖累自己伺服器流量。 如果把 bootstrap 下載在本地端使用的話，如上圖，就會變成自己的伺服器來回取得所需的東西，也會造成自己伺服器的流量過大。