前端框架 —— bootstrap介紹
阿新 • • 發佈：2022-12-08
前端框架 —— bootstrap介紹
bootstrap安裝
我們可以通過官網下載bootstrap的程式碼到本地，也可以通過CDN分發網路引入我們的html檔案。
下載到本地
下載壓縮包後我們分別開啟css資料夾和js資料夾，會發現有很多檔案。
而實際上只有藍色邊框的兩個檔案是核心檔案，其他檔案可以刪除。
然後我們一般選擇min.js字尾的js檔案和min.css字尾的css檔案，因為它們更小一點，可以略微提升載入速度。
將其放在html檔案的同一資料夾下，方便我們匯入測試：
<!--在head中引入css檔案和js檔案---> <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.bundle.min.js"></script>
匯入後，我們可以通過類屬性給我們的標籤匯入bootstrap給我們提供好的樣式，可以很快的幫我們搭建起一個比較好看的網站。
cdn分發網路匯入
進入頁面後複製其最新的link連結和script連結，就可以使用它們的檔案基於網路載入到頁面中了。
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
官方入門模板
請確保使用最新的頁面設計和開發標準來設定頁面。也就是說，使用 HTML5 文件型別（doctype）、幷包含一個設定 viewport（視口）的 <meta> 標籤以實現正確的響應式佈局行為。這些要求組合在一起之後，你的頁面應當如下所示：
<!doctype html> <html lang="zh-CN"> <head> <!-- 必須的 meta 標籤 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 的 CSS 檔案 --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- JavaScript 檔案是可選的。從以下兩種建議中選擇一個即可！ --> <!-- 選項 1：包含 Popper 的 Bootstrap 整合包 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script> <!-- 選項 2：Popper 和 Bootstrap 的 JS 外掛各自獨立 --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script> --> </body> </html>
bootstrap的使用
關於使用，bootstrap官網都有詳細的說明，請讀者自行查閱。