1.5 Bootstrap5下載與安裝

On this page

1、Bootstrap下載

你從官方網站下載的文檔包括經過編譯的 CSS 和 JS以及源代碼，俺老劉不建議對源代碼進行修改和定制，因為這樣做的后果是官方升級版本之后你又要定制一番，非常麻煩，況且對新手來說關于定制的那些知識會讓學習變得麻煩。還不如直接使用官方的已編譯好的css和js文件，對于不滿足自己需求的，另外寫css文件進行重寫即可。

對于源碼，建議那些想了解一下框架運行原理的可以參考一下。

由于框架經常會更新，源碼下載建議到http://www.roadlinkinfra.com/down/list/下載最新版本。這里我僅對下載頁提供的幾種版本做以下介紹

最簡版（推薦）：很多朋友嫌棄bootstrap文件臃腫，現在整理此版本，只有兩個文件，推薦閱讀本書的人使用此版本，已包括所有功能。
已編譯版js和css文件：包含所有的已編譯文件，可以整體引入框架，也可以部分引入框架。
完整源碼：框架的源碼，可以對框架進行定制和重編譯。
官方自帶案例：官方帶的案例。

2、Bootstrap安裝

Bootstrap5安裝非常簡單，

1、下載已編譯版js和css文件，解壓縮后將目錄改名稱為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確實在這個路徑。

3、Bootstrap5簡易模板

下面是一個Bootstrap5開發的簡易模板，使用的bootstrap5編譯版，建議你直接復制這個，避免出錯。


<!doctype html>
<html lang="zh-CN">
  <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="/static/bootstrap5/css/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="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>
  </body>
</html>

為了方便學習，本教程使用的最簡版，案列放在demo文件夾下，bootstrap文件在demo/bootstrap下，用下面這個模板和目錄結構。


<!doctype html>
<html lang="zh-CN">
  <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>

4、為什么建議使用本地文件而不是cdn文件

其實官方是推薦有cdn文件鏈接的，但是眾所周知的原因，在國內我們很多人的電腦是沒法訪問國外的一些網站的，使用國外cdn文件會導致這部分用戶無法正常瀏覽網頁。另外在開發過程中，使用本地文件的渲染效果比使用網絡文件要快得多。如果你做的網站客戶都可以暢通無阻訪問國外網站，你也可以在網站上線的時候直接把那兩個文件引用地址換成下面這個。