原文地址： 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/ http://getbootstrap.com/下载 Bootstrap 的最新版本。
当您点击这个链接时，您将看到如下所示的网页：
点击
Download
按钮进入下载页面，如下：
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
本教程编写时，使用的是最新版（
Bootstrap 4.4.1）。
3.文件结构
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
-
bootstrap.*
-
bootstrap.min.*
3.1.CSS文件
Bootstrap包含一些选项，可以包含部分或全部已编译的CSS。
| CSS files | Layout | Content | Components | Utilities |
|---|---|---|---|---|
| bootstrap.css bootstrap.min.css | Included | |||
| bootstrap-grid.css bootstrap-grid.min.css | Only grid system | Not included | Only flex utilities | |
| bootstrap-reboot.css bootstrap-reboot.min.css | Only Reboot |
3.2.JS文件
同样，我们可以选择包含部分或全部已编译的JavaScript。
| JS files | Popper | jQuery |
|---|---|---|
| bootstrap.bundle.js bootstrap.bundle.min.js | ||
| bootstrap.js bootstrap.min.js |
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/[email protected]/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://github.com/work100-net/training-stage2/tree/master/hello-bootstrap
- https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap
上一篇：
简介下一篇：
网格系统如果对课程内容感兴趣，可以扫码关注我们的或公众号
，及时关注我们的课程更新QQ群