5分钟学会如何安装Bootstrap-脚本世界

您可以根据自己的喜好，选择英文网站或中文网站进行基本了解：

1.BootStrap英文网站：

http://getbootstrap.com/

2.BootStrap中文网站：

http://www.bootcss.com/

Bootstrap目前几个主要的版本，分别是：

Bootstrap2(v2.3.2)
Bootstrap3(v3.3.7)
Bootstrap4(v4.0.0)

本文我们选择bootstap3.3.7作为演示版本

3.bootstrap 3.x 中文介绍页面：

https://v3.bootcss.com/

4.bootstrap 3.x中文下载页面：

https://v3.bootcss.com/getting-started/#download

第一步：从网站上获取一个指定的Bootstrap版本，您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
也可以直接进入这里给出的第四个中文链接下载页面 https://v3.bootcss.com/getting-started/#download，当点击第4个链接时，您将看到如下所示的网页内容：

点击第一个“用于生产环境的Bootstrap”下面的下载Bootstrap按钮，下载解压后的Bootstrap文件目录结构如下：

上面展示的就是 Bootstrap 的基本文件结构，这些文件可以直接使用到任何 web 项目中。Bootstrap官方提供编译好的 CSS 和 JS (bootstrap.*) 文件（bootstrap.js），还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件（bootstrap.min.js）

第二步：下面是使用了 Bootstrap 的基本的 HTML 模板，这是一个最简单的 Bootstrap 页面，可以对照这些实例按照自己的需求进行修改：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template in jbsage.com</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

第三步：使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）

Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN 还对大量的前端开源工具库提供了 CDN 加速服务。使用CDN加速服务，在联网的状态下，就不用再自己下载Bootstrap了。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">



<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

当然，你也可以导入自己下载好的编译后的Bootstrap文件路径生成模板。这里就不再过多介绍了。

首页

网页制作

Web编程

数据库

5分钟学会如何安装Bootstrap