1.5 Bootstrap5下载与安装

On this page

1、Bootstrap下载

你从官方网站下载的文档包括经过编译的 CSS 和 JS以及源代码，俺老刘不建议对源代码进行修改和定制，因为这样做的后果是官方升级版本之后你又要定制一番，非常麻烦，况且对新手来说关于定制的那些知识会让学习变得麻烦。还不如直接使用官方的已编译好的css和js文件，对于不满足自己需求的，另外写css文件进行重写即可。

对于源码，建议那些想了解一下框架运行原理的可以参考一下。

由于框架经常会更新，源码下载建议到https://www.bootstrap.cn/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文件会导致这部分用户无法正常浏览网页。另外在开发过程中，使用本地文件的渲染效果比使用网络文件要快得多。如果你做的网站客户都可以畅通无阻访问国外网站，你也可以在网站上线的时候直接把那两个文件引用地址换成下面这个。