熱門文章
- Bootstrap安裝教程 (發布時間：2021-06-25 17:03:51)
- bootstrap框架怎么用？10分鐘教你學會使用bootstrap開發網頁 (發布時間：2021-06-25 16:32:17)
- Bootstrap5 出來了，我應該學習Bootstrap4還是Bootstrap5？ (發布時間：2021-05-02 13:21:53)
最新文章
- 我通過重新學習 HTML 學到的東西 (發布時間：2021-06-30 17:37:25)
- 設計師：注意你的語言 (發布時間：2021-06-30 17:28:00)
- 設計全方位搜索 (發布時間：2021-06-30 17:12:41)
- CSS 垂直媒體查詢的用例 (發布時間：2021-06-30 17:05:47)
- 世界上最受歡迎的排版博客現在有一家商店 (發布時間：2021-06-30 17:05:31)
- 每天學習前端 Web 開發的旅程 (發布時間：2021-06-30 16:31:02)
- Bootstrap安裝教程 (發布時間：2021-06-25 17:03:51)
- bootstrap框架怎么用？10分鐘教你學會使用bootstrap開發網頁 (發布時間：2021-06-25 16:32:17)
- 2021年世界上制造業網站設計的 5 個最佳范例 (發布時間：2021-06-22 15:29:54)
- CMS 的興起和“網站管理員”的衰落 (發布時間：2021-06-22 15:26:45)
Bootstrap安裝教程
發布時間：2021-06-22 15:26:45
bootstrap安裝教程目錄
1、Bootstrap版本說明
（1）Bootstrap的版本
已編譯版。已編譯好的js和css文件，包含所有的已編譯文件，可以整體引入框架，也可以部分引入你需要的框架組件。
源碼版。你可以根據需要修改源碼后，重新編譯出定制版的Bootstrap。
（2）bootstrap版本選擇建議
對于一般應用，俺老劉不建議對源代碼進行修改和定制，因為這樣做的后果是官方升級版本之后你又要定制一番，非常麻煩，況且對新手來說關于定制的那些知識會讓學習變得麻煩。還不如直接使用官方的已編譯好的css和js文件，對于不滿足自己需求的，另外寫css文件進行重寫即可。 對于源碼，建議那些想了解一下框架運行原理的可以參考一下。
（3）最簡版本
對于那些和俺老劉一樣有潔癖，不喜歡臃腫代碼的人來說，可以直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js兩個文件，就完全可以使用Bootstrap了，是不是太爽了。
2、Bootstrap5下載安裝
（1）普通安裝
1 、Bootstrap下載。 Bootstrap5安裝非常簡單，下載已編譯版js和css文件（由于框架經常會更新，源碼下載建議到m.roadlinkinfra.com 下載最新版本），解壓縮后將目錄改名稱為bootstrap5，放在你的網站目錄，例如static目錄下，之所以改名是為了書寫的時候簡單，避免輸錯。
2、在你的網頁<head> </head>之間，添加
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/static/bootstrap5/css/bootstrap.min.css" >
3、在你的網頁 </body>之前，添加
<script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>
注意：要確保bootstrap.min.css和bootstrap.bundle.min.js確實在這個路徑。 另外如果你使用了最簡安裝或改變了路徑，要按照你的實際路徑寫。
4、你的代碼就可以寫在<body>和<script之間了。
（2）最小化安裝
1、直接下載最小化版本，或者下載已編譯版本文件，提取css/bootstrap.min.css和js/bootstrap.bundle.min.js兩個文件放在靜態文件所在目錄下的Bootstrap5文件夾中。 2、在你的網頁<head> </head>之間，添加
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap5/css/bootstrap.min.css" >
3、在你的網頁 </body>之前，添加
<script src="bootstrap5/js/bootstrap.bundle.min.js" ></script>
注意：這里用相對路徑可以在編輯靜態頁面預覽效果的時候不用放在服務器，直接用瀏覽器打開即可。
3、Bootstrap5測試模板
由于官方自帶的模板文件根本不能測試出系統是否正常運行，所以我寫了個簡易的測試模板，你在開發的時候可以直接復制來用，避免出錯，本模板是演示用的，直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js兩個文件放在演示案例所在目錄的Bootstrap5文件夾中。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>Hello, world!</title> </head> <body> <h1>Bootstrap5開發模板</h1> <div class="text-center text-success fs-1">看到我居中，顏色綠色表示起作用了！</div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
安裝完成，你可以看下一篇文《bootstrap框架怎么用？10分鐘教你學會使用bootstrap開發網頁》