1.5 Bootstrap5下載與安裝

On this page

1、Bootstrap下載

你從官方網(wǎng)站下載的文檔包括經(jīng)過(guò)編譯的 CSS 和 JS以及源代碼，俺老劉不建議對(duì)源代碼進(jìn)行修改和定制，因?yàn)檫@樣做的后果是官方升級(jí)版本之后你又要定制一番，非常麻煩，況且對(duì)新手來(lái)說(shuō)關(guān)于定制的那些知識(shí)會(huì)讓學(xué)習(xí)變得麻煩。還不如直接使用官方的已編譯好的css和js文件，對(duì)于不滿足自己需求的，另外寫css文件進(jìn)行重寫即可。

對(duì)于源碼，建議那些想了解一下框架運(yùn)行原理的可以參考一下。

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

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

2、Bootstrap安裝

Bootstrap5安裝非常簡(jiǎn)單，

1、下載已編譯版js和css文件，解壓縮后將目錄改名稱為bootstrap5，放在你的網(wǎng)站目錄，例如static目錄下，之所以改名是為了書寫的時(shí)候簡(jiǎn)單，避免輸錯(cuò)。

2、在你的網(wǎng)頁(yè)<head> </head>之間，添加 <meta name="viewport" content="width=device-width, initial-scale=1">和
<link href="/static/bootstrap5/css/bootstrap.min.css" > 。

3、在你的網(wǎng)頁(yè) </body>之前，添加 <script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>。
注意：要確保bootstrap.min.css和bootstrap.bundle.min.js確實(shí)在這個(gè)路徑。

3、Bootstrap5簡(jiǎn)易模板

下面是一個(gè)Bootstrap5開(kāi)發(fā)的簡(jiǎn)易模板，使用的bootstrap5編譯版，建議你直接復(fù)制這個(gè)，避免出錯(cuò)。


<!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開(kāi)發(fā)模板</h1>
	  <div class="text-center text-success fs-1">看到我居中，顏色綠色表示起作用了！</div>


    
    <script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>
  </body>
</html>

為了方便學(xué)習(xí)，本教程使用的最簡(jiǎn)版，案列放在demo文件夾下，bootstrap文件在demo/bootstrap下，用下面這個(gè)模板和目錄結(jié)構(gòu)。


<!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開(kāi)發(fā)模板</h1>
	  <div class="text-center text-success fs-1">看到我居中，顏色綠色表示起作用了！</div>


    
    <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

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

其實(shí)官方是推薦有cdn文件鏈接的，但是眾所周知的原因，在國(guó)內(nèi)我們很多人的電腦是沒(méi)法訪問(wèn)國(guó)外的一些網(wǎng)站的，使用國(guó)外cdn文件會(huì)導(dǎo)致這部分用戶無(wú)法正常瀏覽網(wǎng)頁(yè)。另外在開(kāi)發(fā)過(guò)程中，使用本地文件的渲染效果比使用網(wǎng)絡(luò)文件要快得多。如果你做的網(wǎng)站客戶都可以暢通無(wú)阻訪問(wèn)國(guó)外網(wǎng)站，你也可以在網(wǎng)站上線的時(shí)候直接把那兩個(gè)文件引用地址換成下面這個(gè)。

1.5 Bootstrap5下載與安裝

1、Bootstrap下載

2、Bootstrap安裝

3、Bootstrap5簡(jiǎn)易模板

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

1、Bootstrap下載

2、Bootstrap安裝

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