大约五年前，我被要求为 Syncfusion 简洁地系列写一本书，讲述当时一个鲜为人知的叫做 Bootstrap 的 CSS 框架。当时，它只是在版本 2 上正式发布，和许多开发人员一样，我也在涉猎它，看看它能做些什么。
我发现，在为我正在编写的应用程序组合基于网络的用户界面时，有些东西会对我有很大帮助，有些东西我就是放不下。
和很多开发人员一样，我在图形设计部门也不是特别有福气。我可以组装一个功能性的、几乎无法使用的用户界面，剩下的就交给你想象吧。
Bootstrap 2 改变了这一切——几乎在一夜之间，我发现，虽然我仍然不是设计之神，但我的用户界面突然开始看起来和感觉上更加专业，即使它们看起来都一样。此外，我的客户开始注意到，快速制作原型并让他们尝试实际上变成了一个几乎即时反馈的简单过程。最后，因为许多设计师也熟悉 Bootstrap，我正在做的工作意味着他们现在也更容易接受我的布局，并给它们增加一点情趣。
第一本书创作出来没多久，Bootstrap 3 就发布了，Syncfusion 让我写第二本书来覆盖新人。 【推特】 Bootstrap 3 简洁地 于同年 12 月发布。
在过去的五年里，Bootstrap 已经成为至少 90%新创建的 web 项目的头号前端布局框架。从 NuGet 到 Bower，以及这两者之间的任何东西，它在你能想象的每个包源中都是可用的。这是自 VS 2010 年以来，Visual Studio 每个版本产生的每个模板中的默认设置，即使在最新版本中，它也仍然是默认设置。面向下一代的 NET Core SPA 模板。NET 平台。
这本书是为了涵盖 Bootstrap 的下一个进化步骤而写的，从版本 3 到版本 4。
Bootstrap 4 中发生了很多变化，但许多旧的最爱仍然存在。在第 3 版推出后的五年里，HTML5 的广泛采用为 web 开发人员提供了许多新的特性和功能。今天，正如你将在本书后面看到的，我们被复杂的用户界面设计和布局的容易程度宠坏了，即使是像我一样受到设计挑战的开发人员。
如果你是 Bootstrap 世界的新手，我会鼓励你在读这本书之前先读一读关于 Bootstrap 3 的前一本书。这样做将有助于您理解 Bootstrap 4 中仍然可用的一些较旧的东西，但我在本书中不会过多讨论。
请注意，当我们阅读这本书时，我将开始简单地将 Bootstrap 称为 BS，或者在提到特定版本时称为 BS3 或 BS4。
Bootstrap 4 花了很长时间才达到最初的测试阶段，即使在我写这篇文章的时候，它仍然没有达到发布候选阶段。然而，我们已经得到承诺，在我写这篇文章的时候，现有的工具包不会有任何改变。然而，就像信息技术和软件开发行业的任何事情一样，永远无法保证这一点。
与前一本书不同，我不会从“发生了什么变化”一节开始；相反，我将直接用一些简单实用的例子来介绍，你可以尝试一下。随着我们的继续，我将把这些例子构建到更复杂的设计中，同时介绍框架的各个方面来帮助您。
如果您的机器上有 HTML 和 CSS 文件，并且在您选择的浏览器中打开该文件，大多数示例都可以工作。然而，我建议您使用最新版本的 Chrome(在我写这篇文章的时候是 60.0.3112)。
我还建议您使用一个可以将代码提供给浏览器的环境，例如，如果您在 Windows 上，则使用 IIS 7/8；如果您使用 Mac 或 Linux，则使用 Apache/Nginx；如果您使用 Visual Studio，则仅使用 IIS Express。无论你选择哪一个，我带你完成设置都超出了这本书的范围。如果你对网络开发是认真的，那么这是一个值得做的时间投资。
最后，我们将在本书的每个练习中使用相同的模板 HTML，因此，与其在每章中重复它，我将在这里向您展示它是什么样子的。
代码清单 1:基本引导 4 模板
<!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.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body>
<!-- Page content goes here
-->
<!-- Optional JavaScript
-->
<!-- jQuery first, then
Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>在添加任何特定于基站的内容之前，该模板是推荐使用的最低限度的 HTML 片段。它从基于云的 CDN 中获取所需的 jQuery 和 Bootstrap 脚本和资源，这意味着您在使用它时需要与互联网的实时连接。
你可以在这里下载 BS 的本地副本。一旦你这样做了，你就可以完全离线工作了。本书通篇使用的副本是稳定版本的 4.1 版本，所有代码示例都经过了测试，并与之相对应。
要使用本地副本，您需要下载并解压缩下载页面的已编译 CSS 和 JS 部分中提供的 zip 文件。在 ZIP 文件中，你会找到一个 js 和一个 css 文件夹；如果您将您的 HTML 模板复制到放置这两个解压缩文件夹的同一个文件夹中，您可以按如下方式修改代码清单 1 中的模板。
代码清单 2:清单 1 被修改为使用 Bootstrap 的本地副本
<!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="css/bootstrap.min.css">
</head>
<body>
<!-- Page content goes here
-->
<!-- Optional JavaScript
-->
<!-- jQuery first, then
Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script> <script src="/js/bootstrap.min.js"></script>
</body>
</html>请注意，如果您像这样进行本地安装，您很可能需要查看 CSS 和 JS 文件夹，以确保您使用的版本匹配。
您会注意到，在前面的代码示例中的每个<script>和<link>标签中，仍然有版本号，虽然这些在本书编写时是正确的，但是当您自己尝试代码时，它们可能已经改变了。
底线是:如果您在加载 Bootstrap 或模板中所需的任何文件时出现 404 个错误，请仔细检查您是否有正确的版本，以及文件名是否与您可能在本地安装的任何文件相匹配。
准备好开始了吗？
太好了。那我们开始吧…