<aside> 💡
Bootstrap簡介可以參考廖建翔老師的書 (13-1)，注意，最新版本是5.3.5。(2025/04/17)
</aside>
Bootstrap是個很多人使用的框架，提供了一些常用的css樣式以及javascript。讓我們可以直接套用。由於是提供了寫好的css樣式以及javascript，所以，要在我們的檔案裡引用Bootstrap提供的css檔案及javascript檔案。目前最新版本是5.3.5 (2025/04/17)，六角學院的翻譯內容稍微舊一點，還在5.1.1版，參考時請注意版本上的些微差異。Bootstrap官方文件非常完整，初學者常常會不知道從何下手，所以，我們會從新手角度，介紹一些常用的元件。
Bootstrap提供了三種嵌入的方法。
最簡單的就是利用CDN (以5.3.3為例)。
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
第二種方式就是下載CSS及javascript後，嵌入到我們的網頁裡。和前一種作法類似，只是因為我們下載下來了，我們可以去改這些CSS及javascript的內容，但因為內容滿複雜的，如果去修改要很小心，所以，一般我們都不會去修改原始的內容。
第三種方式是利用套件管理系統下載，好處就是可以利用套件管理更換版本，而且還會篩選用到的CSS及JS，降低流量。
<aside> 💡
先以CDN為例，後面會配合Bootstrap Template，教大家第二種方式。
</aside>
新版本的bootstrap已經不再使用jquery了，所以，請讓大家參考下面的例子，這個例子是以CDN的方式載入bootstrap:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
</body>
</html>
上面的例子並沒有用到任何Bootstrap的樣式，我們來套個簡單的樣式在按鈕上面:
<button type="button" **class="btn btn-primary"**>Primary</button>
完整的內容: