使用 Bootstrap 构建响应式网站的初学者指南 - 第 1 部分

已发表: 2016-08-08

最后更新于 2019 年 6 月 5 日

本文旨在教育 Web 开发人员使用 Bootstrap 框架的基本原理来快速有效地创建响应式网站。 这降低了生产成本，并允许公司授权其开发人员轻松管理和构建网站和页面。 我将介绍下载 Bootstrap 框架的过程以及使用该框架进行 Web 开发工作的优势。

什么是引导程序？

super bowl buzz dashboard

根据 Bootstrap 官方网站 (getbootstrap.com) 的说法，“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于在 web 上开发响应式和移动优先项目”。 简单来说，Bootstrap 是一个非常简单的框架，可以帮助加快前端 Web 开发并吸引不同技能水平的开发人员。

为什么使用引导程序？

为各种媒体（包括大型显示器、常规显示器、手机和平板电脑）设计网站的潜力使 Bootstrap 极具吸引力，并且是制作 Web 内容的明智选择。 诸如 Bootstrap 之类的框架提供了可以轻松更改的通用功能，以优化网站的各种功能和响应能力，而无需硬编码。 简而言之，与 WordPress 网站不同，它是构建网站并且仍然具有自定义能力的最简单方法之一。

那！ 公司为世界各地的代理机构提供迷人而有效的网页设计服务。 详细了解我们的白标网页设计服务以及我们如何帮助您和您的客户创建或改善他们的网络形象。 今天就开始吧！

如何开始

要开始使用 Bootstrap，您必须访问 Bootstrap 官方网站 (http://getbootstrap.com/)。 Bootstrap 是一个开源项目，在 GitHub 上托管、开发和维护； 这使用户可以访问源代码并了解框架作为构建网站的工具的全部范围。

当前版本的 Bootstrap (v3.3.6) 有三种下载方式：可以下载 Bootstrap 的编译版本，可以下载 Bootstrap 源代码，可以将 Bootstrap 框架从 Less 移植到 Sass。 在这种情况下，如果您是初学者，我建议您只下载已编译的 Bootstrap 版本。 如果你想在 Rails、Compass 或 Sass-only 项目中集成 Bootstrap 框架，那么你应该将下载从 Less 移植到 Sass。

下载 Boostrap 文件后，您应该解压缩压缩文件夹以查看编译后的 Bootstrap 框架的结构。 查看下面的文件结构：

现在，您可以将这些文件放入您正在处理的任何 Web 项目的文件系统中，并开始使用 Bootstrap 来设计和构建您想要的项目。 有关 Bootstrap 功能的更多信息，我们将在本文的第 2 部分中详细介绍，请随时访问 getboostrap.com 网站以查看可通过框架访问的组件、CSS 功能和 JavaScript 函数。

响应式设计

响应式设计是 Bootstrap 框架的标志性特征之一； 使用 Bootstrap 进行响应式开发的能力使开发人员能够开发一个可以在所有查看平台上正确格式化的网站。 很多时候，一个网站可以设计得很好，并且用户体验只在一个特定的平台或屏幕尺寸上是最佳的。 Bootstrap 在解决这些问题方面做得非常出色，它允许开发人员在较小的屏幕上阅读时将网页的某些列分配为特定大小。 在制作响应式网站时，Bootstrap 考虑了四种类型的设备：

That! Company White Label Services

  • 超小型设备（智能手机 <768px）
  • 小型设备（平板电脑 >= 768px）
  • 中型设备（台式机 >= 992px）
  • 大型设备（桌面 >= 1200 像素）

开发者可以为上述这些类添加标签，以将某些网页内容设置为缩小、展开、隐藏或在某些平台上可见。 这对于简化构建网站外观的过程非常有帮助。

网格系统

Bootstrap 有一个网格系统，它是允许框架用于设计响应式网站的主要功能。 Bootstrap 中的所有行都必须放在一个容器类中，然后可以将后续行定义为一定的大小。

以下是网格系统的符号示例：

  • 预定义的行类产生一行
  • 在该行中，第二个类指定“col-md-6”
  • 这意味着该类正在生成一个跨越网页的 6 列的列
  • “md”指定这只发生在小于或等于 768 像素的中型设备或桌​​面上。
  • “偏移”类意味着这些列将留空。 在这种情况下，偏移量为 3，因此三列将留有空格以填充一些内容。
    该网格系统允许开发人员快速定义内容部分，并在内容之间设置适当的间距，以实现干净、响应式的设计。

Bootstrap 的挑战

直接下载所有 Bootstrap 文件时，JavaScript 和 CSS 文件的大小都很大。 在创建快速页面时，这可能会带来一些挑战。 这是因为 Bootstrap 文件中的所有文件都没有完全使用，这可能意味着下载不必要的数据可能会成为问题。 这可能会影响用户体验，因此请随时访问文章如何使用 Bootstrap 基础来增强用户体验 (https://moz.com/ugc/how-to-use-bootstrap-) 更深入地检查这一点增强用户体验的基础知识）。

我希望你们都尝试一下 Bootstrap，因为它是构建响应式和干净的网站设计的绝佳框架。 请继续关注本系列的下一篇文章，了解更多关于 Bootstrap 的初级概念。

作者：Esme Vazquez，初级 Web 开发人员

Esme
制作人、艺术家、游戏玩家、编码员、网络开发人员和博主； Esme 是内容管理博客网站 Medium 上最近的博客出版物 Indiellect 的创建者。 她目前的经验在于网页开发和游戏开发； 她目前正在那里工作并接受 SEO 培训！ 位于佛罗里达州利斯堡的公司，担任他们的初级 Web 开发人员。 她渴望在未来制作描绘人类之美的电子游戏。 如果有任何问题，请随时在@EsmeVazquez18 上向她发送推文和/或在 LinkedIn 上添加她。