CSS Bootstrap

如果我们为贵公司构建一个网站，我们无疑会有一个广泛的待办事项清单。设计应该捕捉我们公司的美学。在不超出预算的情况下，我们希望拥有满足访客期望的必要功能。无论访客的设备或浏览器如何，我们都希望设计响应式布局，始终如一地显示按钮和表单等功能。

我们可以使用 Bootstrap 来完成我们列表中的最后一项。Bootstrap 的开源框架使得创建移动优先的 Web 项目和响应式网站变得简单。我们不必从头开始创建网站，因为它提供了可重用的代码库。

让我们深入了解 Bootstrap，以便更好地理解为什么互联网上有超过 2100 万个网站在使用它。

什么是 CSS Bootstrap？

Bootstrap 是最受欢迎的 CSS 框架，用于创建响应式和移动优先的网站。这个免费的开源工具包包含一个响应式网格结构、全局 CSS 设置、大量预先构建的组件（如按钮、导航栏和表单），以及可选的 JavaScript 插件，可加快开发速度。

尽管 Bootstrap 是一个用于 HTML、CSS 和 JavaScript 开发的开源工具包，但它通常被称为 CSS 框架。

要理解这一点，我们必须首先认识到 CSS 通常对所有技术水平的人来说都更容易掌握，并且它在浏览器中的运行速度比 JavaScript 快。由于这些因素，Bootstrap 开发人员在可能的情况下更倾向于使用 CSS（和 HTML）而不是 JavaScript。因此，JavaScript 库的大小远小于 Bootstrap 中的 CSS 库。

许多前端开发人员，特别是新手，使用 Bootstrap，因为它简化了创建响应式网站。然而，并非所有人都推荐它。我们将探讨 Bootstrap 如此受欢迎的原因、何时最适合使用它以及何时不适合。

为什么使用 Bootstrap？

• 根据 W3Techs 的数据，Bootstrap 是许多前端开发人员的首选工具包。互联网上所有网站的 22.1% 使用它。
• 导致 Bootstrap 受欢迎的因素有几个。首先，它是开源的，可以免费下载和使用。此外，它完全可定制，并与所有当前浏览器兼容。然而，许多 CSS 框架也具有此特性。
• Bootstrap 是为移动设备而设计的，这与其他开发人员工具包不同。换句话说，最初的代码是按比例放大以显示在更大的显示器上，然后再针对移动设备或最小屏幕尺寸进行优化。因此，在开发我们的网站时使用 Bootstrap CSS 可确保它支持所有设备的准确渲染和触摸缩放。
• Bootstrap 的易用性是其受欢迎度的另一个因素。它提供了用于排版、按钮、下拉菜单、表单、导航和其他界面元素的示例设计。通过使用这些预样式化的模板，我们可以添加无需从头开始构建即可改善我们网站用户体验的功能。

Bootstrap 的使用场景

使用 Bootstrap 有很多好处。其中一些因素已经提到，因此让我们在下面更详细地探讨它们。

1. 您需要一个响应式网站

使用 Bootstrap 创建响应式网站比从头开始简单得多。Bootstrap 包含响应式样式，如媒体查询和容器，以确保您的网站能够适应视口。因此，您的访客使用 PC、平板电脑或移动设备并不重要。

2. 您希望节省时间。

使用 Bootstrap，您可以轻松地构建您的网站。下载框架后，从简单的模板开始，然后添加必要的组件。这些元素是 HTML 的构建块，如表格、表单、按钮、图像和图标，它们使用基本类进行样式设置，并使用修饰类进行扩展。使用这些预制组件可以大大减少您需要创建的自定义 CSS。

3. 您希望归属感。

Bootstrap 是一个开源框架，拥有庞大的全球设计师和开发人员社区，致力于支持它。这些程序员和艺术家改进和修改 Bootstrap 的 GitHub 代码库。此外，他们还在特殊的 Slack 群组、Twitter 和 Stack Overflow 上回答问题。在使用 Bootstrap 的同时，利用这个充满活力的社区来提高您的 Bootstrap 技能。

在哪里可以找到 Bootstrap？

您可以通过两种方式开始在您的网站上使用 Bootstrap。

一种方式

1. 访问 getbootstrap.com 获取 Bootstrap。
2. 使用 CDN 的 Bootstrap 框架。

如何使用 Bootstrap 4 CDN 框架？

两种基本方法可用于创建 Bootstrap 4 CDN 网站

1. 手动方法

TemplateToaster 的 Bootstrap 网站生成器

手动过程

1. 从官方网站下载 CDN Bootstrap 4 后解压缩文件。
2. 创建一个文件夹，并根据您的喜好命名 HTML 目录。
3. 在 HTML 目录中创建一个 index.html 文件，然后复制 CSS 和 JS 文件。
4. 请复制以下代码，然后粘贴到 index.html 页面的 `` 标签中，以链接到 Bootstrap CSS 文件。

为了加快网站加载速度，请在 index.html 的页脚之后包含核心 Bootstrap JavaScript。网站的以下部分；

1. 响应式导航
2. 头文件
3. 内容
4. 页脚

2. 使用 TemplateToaster 的 Bootstrap CDN 框架生成器

• 选择一个 CMS 平台，然后下载并安装 TemplateToaster。
• 选择一个模型模板。
• 选择“常规”选项卡，然后通过单击对其进行修改。
• 根据您的需求，更改其他选项并将布局设置为流式或固定。
• 要设置网站的参数，请单击“菜单”选项卡。
• 根据需要在您的网站上创建幻灯片。
• 在此处更改内容。
• 创建一个带有可能的社交网络图标和一些重要信息的页脚。

使用 Bootstrap 的 CSS

在您可以使用 Bootstrap CSS 之前，将其集成到您的开发环境中会有所帮助。您需要为此在计算机上创建一个文件夹。将编译后的 CSS 和 JS 文件以及一个您将导入 Bootstrap 的新 HTML 文件保存在该文件夹中。然后，您可以使用 Bootstrap 模板将 UI 组件添加到页面。让我们一步一步地分解这个过程。

Bootstrap CSS 和 JS 加载

在您的 PC 上，首先创建一个名为“bootstrap”的文件夹。将下载的 Bootstrap CSS 文件保存在该文件夹中。如果您还要使用 Bootstrap 的 JS 组件，请将构建好的 JS 文件移至该文件夹。

创建一个名为 index.html 的新文件，并将其保存在同一文件夹中。使用您喜欢的文本编辑器（如 Notepad++）打开此文件。

下面是一个完全编码的 HTML 页面的示例。

现在 Bootstrap CSS 已加载，您的项目已准备就绪。将以下代码行插入到 index.html 文件的 `` 的 `` 标签之前。

如果您只打算使用 Bootstrap 的 CSS 组件，那么您已经准备就绪。

如果您还打算使用 JS 组件，则必须添加另外两行代码。如果您希望将上面列出的任何组件添加到您的网站，包括警报、切换按钮、轮播和下拉菜单，请继续执行这些步骤。

您必须先加载 jQuery 库。为此，请在您的 PC 上下载 jQuery。解压缩文件后，将 index.html 文件、index.css 以及生成的 CSS 和 JS 文件全部保存在“bootstrap”文件夹中。

然后，需要在 index.html 文件中添加以下代码行。这次，应将其添加到页脚中的 `` 标签正下方，而不是页眉。

在调用 jQuery 之后，添加以下代码行以加载 Bootstrap JavaScript。

完成这些步骤后，您的 index.html 文件应如下所示

保存文件夹后，您将拥有一个简单的 Bootstrap 布局，其外观如下

Bootstrap CSS 示例

Bootstrap 提供“示例”，即 HTML 和 CSS 模板，以帮助您快速启动和运行您的网站。我们将专注于使用 Bootstrap 的预编译和源代码版本中内置组件的示例，尽管 Bootstrap 源代码包含更复杂的示例，具有新组件和布局，可增强框架。

Bootstrap 中的网格

使用行和列来容纳信息，可以使用 CSS 网格系统创建页面布局。为了在 Bootstrap 网格系统中进行正确的放置和填充，行必须包含在 `.container`（固定宽度）或 `.container-fluid`（全宽度）中。这些列在此类行中水平排列。

由于 Bootstrap 有 12 列布局，您必须指明您想要使用这十二个可能列中的多少个。您想在所有设备上以相同宽度创建三列，并在页面上居中。`.col-4` 类表示必需的三列“十二分之一”列。整个网格示例如下所示。

输出

上述格式将在桌面和移动设备上显示我们网站的前端。

还有更多选项可供您尝试。使用 Bootstrap 的网格框架，您可以设计跨越多行的等宽列。可以指定一列的宽度，后续列将适应以围绕它。除了其他选项，您还可以根据内容的自然宽度来调整列的大小。

Bootstrap 警告

您可以向您的 Bootstrap 网站添加警报，以向用户传达重要信息。Bootstrap 为警报消息提供了八种标准颜色。例如，假设您希望添加一个警报，表明访客已成功注册一个帐户。然后，您可以应用以下示例。

这就是它将在您网站的前端上显示的方式。

输出

如果您已在网站上加载了编译后的 JS，我们还可以包含一个关闭按钮，以便用户在阅读完警报后可以关闭它。

Bootstrap 按钮

使用 Bootstrap，您可以通过选择各种预设的按钮样式来快速将按钮添加到登陆页面或表单。想象一下，您希望为您的网站提供一个“信息”按钮。下面显示了示例及其在前端上的显示方式。

输出

虽然 `.btn` 类旨在与 `` 元素一起使用，但它们也可以应用于其他元素。例如，我们可以使用以下代码将链接转换为按钮

<a href="#" class="btn btn-info" role="button">Link Button</a>

例如，我想要在我的 Bootstrap 网站上添加一个按钮，邀请用户了解更多关于 CSS 动画的信息。然后，该按钮可以链接到有关该主题的博客文章。关键将是以下内容

<div class="container"> <div class="row"> <a href="https://en.wikipedia.org/wiki/Sachin_Tendulkar" class="btn btn-info" role="button">Learn More</a> <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Info</button> <div class="alert alert-success" role="alert"> A simple success alert-check it out! </div> </div> </div>

输出

您可以通过包含必要的修饰类来修改按钮的颜色、大小和其他功能。

Bootstrap 对 Web 开发的好处

1. 简单的启动

对于不熟悉 Web 开发的人来说，编码可能是一项艰巨的任务。然而，在 Web 开发中使用 Bootstrap 的最大好处是它使编码变得容易。Bootstrap 负责一切。使用 Bootstrap，即使没有大量的编码技能，也可以创建一个引人注目的登陆页面。唯一的要求是熟悉 CSS 和 HTML。此外，旧的和新的网站都可以轻松集成 Bootstrap。您可以轻松地将许多平台、框架和 Bootstrap 组件包含到您现有的 CSS 中。

2. 极强的适应性

在 Bootstrap 中，有多种模板可用。如果您不喜欢它们，可以使用 CSS 文件创建自己的自定义。此外，如果您需要更多时间从头开始，您可以将自定义与现有代码相结合以增加功能。所有这些都可以通过自定义页面实现。

3. 广泛的吸引力

Bootstrap 被广泛使用的这个事实是其最重要的好处。苹果是一家大型跨国公司，它在其 Apple Maps 和 Apple Music 在线应用程序中使用了 Bootstrap。此外，Dropbox、Coursera 和 Airbnb 也正在使用 Bootstrap 来保持健壮性。

---

下一主题Bootstrap 工具类

 

← 上一篇 下一篇 →