# Bootstrap 筆記 ## 需求 ### 必要組合 2 選 1 | 必要組合 1 | CDN | | -- | -- | | jquery.js | [link](https://code.jquery.com) | | popper.js | [link](https://cdnjs.com/libraries/popper.js) | | bootstrap.js | [link](https://www.bootstrapcdn.com) | | bootstrap.css | 同上 | | 必要組合 2 | CDN | | -- | -- | | jquery.js | [link](https://code.jquery.com) | | bootstrap.bundle.js | [link](https://www.bootstrapcdn.com) | | bootstrap.css | 同上 | :::info bootstrap.bundle.js 同時包含 bootstrap.js 和 popper.js ::: --- ## 載入 ### 透過 html 以組合 2 為例, 使用最小化壓縮版本 ```htmlmixed= <body> <link rel="stylesheet" href="路徑/bootstrap.min.css" /> <script src="路徑/jquery.min.js"></script> <script src="路徑/bootstrap.bundle.min.js"></script> </body> ``` --- ## TS 簡易使用範例 * 使用只顯示外框的按鈕樣式 ```typescript let button = document.createElement("button"); button.className = "btn btn-outline-primary"; parentNode.appendChild(button); ``` [參考文件](https://getbootstrap.com/docs/5.0/components/buttons/) --- ###### tags: `Bootstrap`