原文地址：http://www.work100.net/training/monolithic-frameworks-bootstrap-environment-setup.html
更多教程：光束云 - 免费课程
环境搭建
| 序号 | 文内章节 | 视频 |
|---|---|---|
| 1 | 概述 | - |
| 2 | 下载Bootstrap | - |
| 3 | 文件结构 | - |
| 4 | HTML模板 | - |
| 5 | 实例 | - |
请参照如上章节导航进行阅读
1.概述
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
2.下载Bootstrap
您可以通过地址 http://getbootstrap.com/ 下载 Bootstrap 的最新版本。
当您点击这个链接时，您将看到如下所示的网页：
点击 Download 按钮进入下载页面，如下：
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
本教程编写时，使用的是最新版（Bootstrap 4.4.1）。
3.文件结构
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
-
bootstrap.*：已编译的CSS和JS -
bootstrap.min.*： 已编译并且压缩后的CSS和JS
3.1.CSS文件
Bootstrap包含一些选项，可以包含部分或全部已编译的CSS。
| CSS files | Layout | Content | Components | Utilities |
|---|---|---|---|---|
| bootstrap.css bootstrap.min.css |
Included | Included | Included | Included |
| bootstrap-grid.css bootstrap-grid.min.css |
Only grid system | Not included | Not included | Only flex utilities |
| bootstrap-reboot.css bootstrap-reboot.min.css |
Not included | Only Reboot | Not included | Not included |
3.2.JS文件
同样，我们可以选择包含部分或全部已编译的JavaScript。
| JS files | Popper | jQuery |
|---|---|---|
| bootstrap.bundle.js bootstrap.bundle.min.js |
Included | Not included |
| bootstrap.js bootstrap.min.js |
Not included | Not included |
4.HTML模板
一个使用了 Bootstrap 的基本的 HTML 模板如下所示：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, Bootstrap!</title>
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
5.实例
我们通过一个实例展示下如何构建基于 Bootstrap 的项目。
5.1.创建项目
首先通过 IDEA 创建一个 hello-bootstrap 项目，并构建如下目录结构：
目录结构说明：
| 目录 | 含义 |
|---|---|
| assets/css/ | 样式 |
| assets/images/ | 图片 |
| assets/js/ | JS |
| assets/plugins/ | 插件 |
| assets/plugins/bootstrap/ | Bootstrap 框架 |
| assets/plugins/bootstrap/css/ | Bootstrap 框架的样式 |
| assets/plugins/bootstrap/js/ | Bootstrap 框架的JS |
| assets/plugins/jquery-3.4.1.js | jQuery文件 |
5.2.创建测试文件
在项目根目录新建一个 index.html 文件，引入 Bootstrap 框架，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap</h1>
<script src="./assets/plugins/jquery-3.4.1.min.js"></script>
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
为了对比使用和未使用 Bootstrap 的差异，我们新增一个未引入 Bootstrap 框架的 test.html 文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>Hello Bootstrap</h1>
</body>
</html>
5.3.运行
在 IDEA 编辑器中打开 index.html 和 test.html 文件，点击图示位置运行：
对比下运行结果：
5.4.源码获取
实例源码已经托管到如下地址：
-
https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap
-
https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap
上一篇：简介
下一篇：网格系统
如果对课程内容感兴趣，可以扫码关注我们的
公众号或QQ群，及时关注我们的课程更新
