第2節(jié) Bootstrap5下載安裝
Bootstrap5下載安裝與測試
1.2.1 Bootstrap版本說明
（1）Bootstrap的版本
已編譯版。已編譯好的js和css文件，包含所有的已編譯文件，可以整體引入框架，也可以部分引入你需要的框架組件。
源碼版。你可以根據(jù)需要修改源碼后，重新編譯出定制版的Bootstrap。
（2）版本選擇建議
對(duì)于一般應(yīng)用，俺老劉不建議對(duì)源代碼進(jìn)行修改和定制，因?yàn)檫@樣做的后果是官方升級(jí)版本之后你又要定制一番，非常麻煩，況且對(duì)新手來說關(guān)于定制的那些知識(shí)會(huì)讓學(xué)習(xí)變得麻煩。還不如直接使用官方的已編譯好的css和js文件，對(duì)于不滿足自己需求的，另外寫css文件進(jìn)行重寫即可。 對(duì)于源碼，建議那些想了解一下框架運(yùn)行原理的可以參考一下。
（3）最簡版本
對(duì)于那些和俺老劉一樣有潔癖，不喜歡臃腫代碼的人來說，可以直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js兩個(gè)文件，就完全可以使用Bootstrap了，是不是太爽了。
1.2.2 Bootstrap5安裝
（1）普通安裝
1 、Bootstrap下載。 Bootstrap5安裝非常簡單，下載已編譯版js和css文件（由于框架經(jīng)常會(huì)更新，源碼下載建議到www.roadlinkinfra.com 下載最新版本），解壓縮后將目錄改名稱為bootstrap5，放在你的網(wǎng)站目錄，例如static目錄下，之所以改名是為了書寫的時(shí)候簡單，避免輸錯(cuò)。
2、在你的網(wǎng)頁<head> </head>之間，添加
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/static/bootstrap5/css/bootstrap.min.css" >
3、在你的網(wǎng)頁 </body>之前，添加
<script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>
注意：要確保bootstrap.min.css和bootstrap.bundle.min.js確實(shí)在這個(gè)路徑。 另外如果你使用了最簡安裝或改變了路徑，要按照你的實(shí)際路徑寫。
4、你的代碼就可以寫在<body>和<script之間了。
（2）最小化安裝
1、直接下載最小化版本，或者下載已編譯版本文件，提取css/bootstrap.min.css和js/bootstrap.bundle.min.js兩個(gè)文件放在靜態(tài)文件所在目錄下的Bootstrap5文件夾中。 2、在你的網(wǎng)頁<head> </head>之間，添加
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap5/css/bootstrap.min.css" >
3、在你的網(wǎng)頁 </body>之前，添加
<script src="bootstrap5/js/bootstrap.bundle.min.js" ></script>。
注意：這里用相對(duì)路徑可以在編輯靜態(tài)頁面預(yù)覽效果的時(shí)候不用放在服務(wù)器，直接用瀏覽器打開即可。
1.2.3 Bootstrap5測試模板
由于官方自帶的模板文件根本不能測試出系統(tǒng)是否正常運(yùn)行，所以我寫了個(gè)簡易的測試模板，你在開發(fā)的時(shí)候可以直接復(fù)制來用，避免出錯(cuò)，本模板是演示用的，直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js兩個(gè)文件放在演示案例所在目錄的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開發(fā)模板</h1> <div class="text-center text-success fs-1">看到我居中，顏色綠色表示起作用了！</div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
下面是一個(gè)導(dǎo)航條演示，別看代碼那么多，其實(shí)全部是從手冊(cè)上一次直接復(fù)制進(jìn)來的，沒有手寫任何代碼。
<!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>導(dǎo)航條演示</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div> <a href="#">Navbar</a> <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li> <a href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul aria-labelledby="navbarDropdown"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><hr></li> <li><a href="#">Something else here</a></li> </ul> </li> <li> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
自己動(dòng)手做一下，如果你顯示的頁面和我圖片的不一樣，那么很有可能是你放置的路徑存在問題，請(qǐng)仔細(xì)核對(duì)一遍，尤其是注意相對(duì)路徑和絕對(duì)路徑，以及目錄單詞的拼法，很可能會(huì)因?yàn)橐粋€(gè)字母的差別或者是多了一個(gè)空格導(dǎo)致路徑錯(cuò)誤。