Bootstrap - 环境设置

你好，有抱负的网页开发者们！我很高兴能成为你们在这个激动人心的Bootstrap世界中的向导。作为一名有着多年经验的计算机科学教师，我见证了无数学生在意识到Bootstrap可以如何转变他们的网页开发技能时眼前一亮的时刻。那么，让我们跳进去，设置我们的Bootstrap环境吧！

Bootstrap - Environment Setup

Bootstrap是什么？

在我们开始之前，让我们快速回顾一下Bootstrap是什么。想象你正在建造一栋房子。Bootstrap就像是一个预先制造好的套件，为你提供所有建造坚固、美观房子的必要部分，让你能快速完成。在网页开发术语中，它是一个强大的前端框架，提供了预先构建的组件和样式，帮助你轻松创建响应式的、移动设备优先的网站。

编译后的CSS和JS

开始使用Bootstrap最简单的方法是在你的项目中包含其编译后的CSS和JavaScript文件。这就像得到了一个随时可用的工具包——你不需要自己组装工具！

以下是如何在HTML文件中包含Bootstrap的方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的Bootstrap页面</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的内容放在这里 -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在这个例子中，我们在<head>部分链接到Bootstrap的CSS文件，在关闭的</body>标签之前包含JavaScript文件。这确保了样式首先被加载，JavaScript在页面内容加载后运行。

源文件

对于那些喜欢摆弄和定制（我看到你了，未来的开发者们！）的人来说，Bootstrap还提供了源文件。这些是Bootstrap的原始材料，用Sass和JavaScript编写。

要使用源文件，你需要设置一个构建过程，使用任务运行器如Gulp或Webpack。这有点高级，所以我们留到以后的课程再讲。记住，这就像有食谱和原料从零开始烤蛋糕，而不是买一个现成的！

通过jsDelivr使用CDN

CDN代表内容分发网络。这就像在世界各地的图书馆里有这本书的多个副本——用户可以快速访问最近的副本。jsDelivr是一个免费的、开源的CDN，托管Bootstrap文件。

以下是如何通过jsDelivr使用Bootstrap：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

integrity和crossorigin属性是用于安全的。它们就像一个秘密握手，确保你得到的是你期望的确切文件。

包管理器

对于更高级的项目，你可能会使用包管理器如npm或yarn。这些工具帮助管理你的项目的依赖。把它们想象成跟踪你需要的所有网页开发食谱原料的个人助手。

要使用npm安装Bootstrap，你会在终端中打开并输入：

npm install bootstrap

然后，在你的JavaScript文件中，你可以这样导入Bootstrap：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

HTML模板

现在，让我们在一个基本的HTML模板中把所有东西放在一起：

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap示例</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>你好，Bootstrap世界！</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

这个模板包含了必要的meta标签、通过CDN链接到Bootstrap的CSS和JS文件，以及一个简单的"你好，Bootstrap世界！"标题，帮助你开始。

结论

恭喜你！你刚刚设置了你的Bootstrap环境。这就好像你刚刚打开工具箱，把所有的工具都摆好了。现在，你准备好开始构建惊人的响应式网站了。

记住，掌握Bootstrap（或任何技术）的关键是练习。不要害怕实验和犯错误——我们都是这样学习的。在我多年的教学过程中，我看到学生们从完全的初学者到使用Bootstrap在短时间内创建出令人惊叹的网站。

在我们的下一课中，我们将深入探讨使用Bootstrap的网格系统来创建布局。这将会很激动人心，所以请继续关注！

快乐编码，愿你的网站永远响应式！??

方法	描述	易用性	定制性
编译后的CSS和JS	使用预编译的Bootstrap文件	简单	有限
源文件	使用Bootstrap原始源文件	高级	高
通过jsDelivr使用CDN	链接到托管在CDN上的Bootstrap文件	非常简单	有限
包管理器	使用npm或yarn安装Bootstrap	中等	中等

Credits: Image by storyset