开发人员犯的 10 个最常见的引导错误

已发表: 2022-03-11

乍一看，Bootstrap 似乎很简单。 事实上，开始使用 Bootstrap 并不难。 有一个写得很好的 Bootstrap 文档，其中包含许多 HTML、CSS 和 JavaScript 代码示例。 那里提到了大多数重要的陷阱，但仍有一些错误非常微妙，或者原因不明确。 因为 Bootstrap 看起来非常简单好用，所以很多开发者都争先恐后地进入这个框架，所以错误就发生了。

引导错误

我们将看看开发人员开始使用 Bootstrap 时最常见的 10 个错误、问题和误解。

常见的引导错误 #1：对框架的基本误解

人们对 Bootstrap 框架存在一些基本的误解。 这可能是因为它没有在 Bootstrap 网站上明确宣传，或者因为人们没有花足够的时间阅读文档。 事实是，有时开发人员最终会在角落里做错事，然后责怪框架。 因此，让我们弄清楚一些基本事实。

Bootstrap 是全面的，但它既不庞大也不庞大。 Bootstrap 与包含许多常见 UI 组件的基本 HTML 和 CSS 设计模板捆绑在一起。 这些包括排版、表格、表单、按钮、字形图标、下拉菜单、按钮和输入组、导航、分页、标签和徽章、警报、进度条、模式、选项卡、手风琴、轮播等等。 您可以选择其中的一些，并使用其默认配置快速生成一个 UI，该 UI 可以处理多种浏览器、设备和分辨率，格式很好。

Bootstrap 不会为您做所有事情，但它提供了一组合理的默认值可供选择，它将帮助开发人员更多地专注于开发工作而不是担心设计，并帮助他们快速启动和运行一个漂亮的网站。 它允许快速进行原型设计，但它并不限制开发人员。

它具有足够的可扩展性，任何人都可以对其进行调整以适应他或她的需要。 一开始，Bootstrap 有一些限制，当时扩展默认样式很复杂。 但随着框架的成熟，可扩展性也有所提高。

常见的 Bootstrap 错误 #2：认为您不需要了解 CSS 即可使用 Bootstrap，并且您不需要设计师

如果你认为如果你使用 Bootstrap 就不需要了解 CSS，那你就大错特错了。 任何前端开发者都需要学习 CSS 和 HTML5。 Bootstrap 正在从开发人员的肩上移除许多棘手的 CSS 部分（如供应商特定的前缀），并提供基本的默认样式，但您仍然需要了解 CSS。 你不需要知道媒体查询是如何工作的，但你需要了解响应式设计是如何工作的。 Bootstrap 并不是要教你 CSS，但如果你愿意，它可以提供帮助。 在 LESS 或 SASS 中检查源代码是一个很好的起点。

在类似的主题上，您不需要成为设计师，并且您可以争辩说您不需要使用 Bootstrap 的设计师。 但是，如果可能，请使用设计师的帮助。 针对 Bootstrap 的一个常见抱怨是所有 Bootstrap 站点看起来都相似，并且很容易最终得到一个看起来与任何其他 Bootstrap 站点一样的网站。 但这不一定是真的。 网络上数以百万计的网站正在使用 Bootstrap 构建。 可以在 Bootstrap Expo 上找到如何实现不同设计的精彩展示，它收集了使用 Bootstrap 构建的网站。 看一看，获得一些灵感，然后开始构建自己的设计变体。

常见的引导错误 #3：更改引导 CSS 文件

为了简单明了：不要修改bootstrap.css文件。

如果您对bootstrap.css文件进行更改，事情会变得非常复杂。 当您想要升级 Bootstrap 文件时，整个设计将会中断。 您可以在自己的样式表中覆盖默认引导颜色、样式、边距、填充等所有内容。 根本不需要接触bootstrap.css样式表。

不知道 LESS 或 SASS？ 没问题，您可以创建自己的 CSS 文件并从原始bootstrap.css样式表中覆盖您想要的任何内容。 正如我们在前面的错误中提到的，了解 CSS 是强制性的。 创建你的新 CSS 选择器，在 HTML 中使用它，只要你在 Bootstrap 样式之后声明你的 CSS 类，你的定义就会覆盖 Bootstrap 默认值。

还想了解更多并深入了解吗？ 我强烈建议并鼓励您这样做。 使用 Bootstrap LESS 源代码。 您将更好地了解正在发生的事情，以及如果您使用 LESS 源而不是静态 CSS 会发生什么。

常见的 Bootstrap 错误 #4：使用 Bootstrap 提供的一切

如前所述，Bootstrap 是全面的。 它提供了许多 UI 组件、HTML 和 CSS 设计模板以及 JavaScript 插件。 但是，请有选择性。 您不必使用 Bootstrap 的所有功能。

对于插件来说尤其如此。 只选择有意义的插件，不要使用所有插件，因为它看起来既漂亮又酷。 您的网站很容易被过度使用。 考虑一开始您根本不包含bootstrap.js文件，并仅使用纯 HTML 和 CSS 创建站点。 然后，只根据特定角色的需要，一一添加组件。

常见的引导错误 #5：滥用模式提示

Bootstrap modals 提供灵活的对话框提示，具有最低要求的功能，并且带有智能默认值。 尽管 modal 易于使用并提供丰富的自定义功能，但我们需要牢记一些事项以避免常见的误用。

同时显示多个模式提示

Bootstrap 不支持重叠模式。 当时只能看到一个模态。 可以实现一次显示多个模式，但需要编写自定义代码才能正确处理。

Bootstrap 模态出现在背景下

如果模态容器或其父元素具有固定或相对位置，则模态将无法正确显示。 始终确保模态容器及其父元素没有应用任何特殊定位。 最佳实践是将模态的 HTML 放置在结束</body>标记之前，或者甚至更好地放置在开始<body>标记之后的文档中的顶级位置。 这是避免其他组件影响模态框外观和功能的最佳方式。

移动设备上的模态

在使用虚拟键盘在移动设备上处理模式时，开发人员需要注意一些注意事项。 对于 iOS 设备尤其如此，其中存在渲染错误，在触发虚拟键盘时不会更新固定元素的位置。 这不是由 Bootstrap 处理的，因此由开发人员以针对相关应用程序的最佳方式处理代码中的这些情况。

常见 Bootstrap 错误 #6：文件输入按钮组件问题

Bootstrap 没有文件上传按钮的指定组件。 使用以下示例代码可以实现仅使用 HTML 和 CSS 的简单而优雅的解决方案：

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>
 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

如何获得类似效果的例子很多。 此代码示例是从 Cory LaViska 借来的，在他的网站上，您可以阅读有关此问题的更详细说明。 还有一个扩展示例，其中包含更多功能，它使用了额外的 JavaScript 代码。

常见的引导错误 #7：过度使用 JavaScript 并忽略“数据”属性

设计师，或者只是 JavaScript 开发新手，可以非常轻松地投入到 Web 开发中，并仅使用 HTML、CSS 和 Bootstrap 创建网页。 如果他们不擅长编码，他们可能会陷入滥用 JavaScript 或过于复杂的陷阱。 重要的是要声明所有 Bootstrap 插件都可以纯粹通过标记 API 使用，而无需编写一行JavaScript。 这是 Bootstrap 的一流 API，在使用插件时应该是您的首要考虑因素。

例如，我们可以在不编写任何 JavaScript 的情况下激活模态对话框，只需在按钮或锚点等控制器元素上设置data-toggle="modal" ，并使用data-属性传递其他参数。 在下面的代码中，我们的目标是 ID #myModal的 HTML 代码。 我们已经指定当用户使用data-backdrop选项在模态之外单击时，模态不会关闭，并且我们禁用了使用data-keyboard选项关闭模态的转义键事件。 全部在一行 HTML 代码中：

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

常见的 Bootstrap 错误 #8：忽略简化 Bootstrap 开发的工具

错误会发生，每个开发人员都会偶尔犯。 这是不可避免的，但重要的是你如何处理错误。 Bootstrap 团队通过观察问题跟踪器注意到人们经常犯一些错误。 这就是他们试图自动化开发过程的原因。 结果是 Bootlint，一个用于 Bootstrap 项目的 HTML linting 工具。 Bootlint 既可以在浏览器中使用，也可以通过 Node.js 从命令行使用，它会自动检查 Bootstrap 网页中的许多常见 Bootstrap 使用错误。 将 Bootlint 添加到您的 Web 开发工具链中可以消除许多通常会减慢项目开发速度的常见错误。

如果您想为 Bootstrap 项目做出贡献，值得一试 Rorschach。 Rorschach 是一个 Bootstrap 拉取请求健全性检查机器人，它对每个新的拉取请求运行一些检查。 如果完整性检查失败，它会在拉取请求上留下一条信息性评论，解释错误以及如何修复它，然后关闭拉取请求。

常见引导错误 #9：IE8 和旧版浏览器不兼容问题

Bootstrap 旨在在最新的桌面和移动浏览器中发挥最佳性能。 较旧的浏览器可能会以不同的样式显示组件和元素，但一切都应该功能齐全。 支持包括 Internet Explorer 8 和 9，需要注意的是，这些浏览器不完全支持某些 CSS3 属性和 HTML5 元素。

要获得对 Internet Explorer 8 和其他旧版浏览器的完全支持，您需要为 CSS3 Media Queries Respond.js 使用 polyfill、支持使用 HTML5 元素的 HTML 5 shim 以及 HTML 头部中的正确 IE <meta>标签确保 IE 未在兼容模式下运行。 最后你的 HTML 头应该是这样的：

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

对于Respond.js ，请注意开发和生产环境中的以下警告。

常见的引导错误 #10：忽略最佳实践

Stack Overflow 上的一个常见问题是如何让 Bootstraps 菜单下拉菜单在悬停时打开，而不是在点击时打开。 虽然这个问题的解决方案并不复杂，只使用 CSS 就可以完成，但不建议这样做。 这个特性是故意被排除在框架之外的，这是开发团队做出的设计决定。 同样，这是可以做到的，但需要了解影响并了解存在最佳实践，尤其是对于移动优先框架。 这个特定问题背后的原因是，让事情在悬停时工作并不能帮助拥有触摸设备的用户。 在此类设备上没有悬停，只有触摸事件。 因此，这在任何支持触摸的设备上都无法正常工作。

引导错误结论

我希望这个简短的 Bootstrap 指南可以帮助您避免一些常见的错误，清除常见的误解，并帮助您掌握大部分框架。 请记住，Bootstrap 并不适合所有人，也不适合每个项目。 在选择框架时，您需要花一些时间阅读文档，并且您需要花一些时间来使用该框架以更好地了解和了解它的工作原理。 这对 Bootstrap 也有效。

阅读文档，使用示例进行游戏和试验，掌握基础知识，并享受创造新的漂亮设计的乐趣。