---
# System prepended metadata

title: Untitled

---


### 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 下載在本地端使用的話，如上圖，就會變成自己的伺服器來回取得所需的東西，也會造成自己伺服器的流量過大。