.bg-primary
.bg-danger
breadcrumb
alert-success
dropdown
data-toggle=”collapse”
col-md-4
上面这些词你是不是很熟悉？？
如果是……那么你肯定在你的应用程序中使用了引导程序（或者你可能已经使用过），这篇文章值得一读（让我们继续……）
如果我们问……如何开始处理应用程序的前端部分，你的答案是什么？？
首先学习 HTML 和 CSS。 （每个网络或前端开发人员向新手开发人员建议的最常见答案……）
你学习了它，你理解了所有的概念，你很高兴创建你的第一个网站，你开始在一些网页上工作，你在你的页面上添加了图像、按钮、教科书、表单和许多其他东西。您可以在页面上设置高度、宽度、边距、内边距、对齐方式和各种其他内容。简而言之……你付出了努力，花了很多时间，最后，你在浏览器中运行了你的第一个网页。
你看到了什么？？
有魅力吗？…它是响应式的吗？
您是否正面临图像、布局、按钮、对齐方式或网页中任何其他元素的问题？
当然……您遇到了很多问题，而且您的网页在所有屏幕尺寸上看起来都不是很好。
很多新手开发人员都面临这个问题，他们会感到失望，但如果您是一个充满热情的开发人员，那么您会尽快找到解决方案并转向 Bootstrap。 （你知道bootstrap的最新版本吗？……在谷歌上搜索它。它于2020年12月7日发布）。
Bootstrap 是最流行的前端框架之一，解决了这些问题。
作为一名 Web 开发人员，您可能在您的网页上使用了很多引导程序元素。排版、表单、按钮、表格、导航、模态、图像轮播、折叠、工具提示、网格以及您可能在网页中使用的许多元素。 Bootstrap 不仅使您的工作更轻松，而且还有助于在更短的时间内完成更多工作。
对于大多数开发人员来说，bootstrap 易于使用，并且在构建应用程序时利用这个框架并不难。 Bootstrap 文档令人印象深刻。借助 HTML、CSS 和 JavaScript 的大量代码片段，您可以从那里轻松学习此框架。
在文档中，您可以找到很多针对各种前端相关问题的解决方案。 Bootstrap 功能可让您更快地构建应用程序。由于简单且易于适应的特性，开发人员在使用该框架时会匆匆忙忙地使用该框架并犯下非常浅薄和模棱两可的错误。
让我们来看看开发人员在使用这个框架时应该避免的一些常见错误。
一、忽视本框架的基础
这是开发人员在使用此框架时犯的最大错误之一。他们没有仔细阅读文档并且自己假设很少的概念。这会导致在他们的应用程序中产生错误。开发人员发现应用程序没有给出预期的结果，他们开始指责框架。
请记住，引导程序既不是巨大的也不是巨大的。它附带了很多准备构建 HTML 和 CSS 的模板。这些模板提供了基本的 UI 部件来轻松构建应用程序。分页、标签、徽章、警报、手风琴、进度条和许多内置组件都可用。根据要求，您可以选择它们并相应地使用它们的默认配置。
Bootstrap 可帮助您为应用程序构建有吸引力的 UI。它可以以一种很好的格式处理多个浏览器、设备和分辨率。您可以专注于开发和改进部分，而不必担心应用程序的结构。
Bootstrap 现在具有足够的可扩展性（最初不是，并且有限制）。您可以根据需要自定义它。我们建议您在使用此框架实现任何内容之前，先了解此框架的基础知识并仔细阅读文档。
2. 利用 Bootstrap 提供的一切
Bootstrap 提供了许多功能。它提供了大量的 UI 组件、用 HTML 和 CSS 创建的设计模板。许多 JavaScript 插件也可用于引导程序。作为一名开发人员，您会惊讶地看到所有功能，并且您可能还想利用所有功能，但朋友们停下来，在这里有选择性。
不要使用 bootstrap 提供的每个功能使事情变得复杂。不要使用引导程序提供的每个组件。这对插件尤其有效。仅选择您在应用程序中真正需要的那些。仅仅因为它很好很酷就选择很多组件只会让你的网站被夸大。
您可以遵循一种简单的方法，其中一开始就完全排除 bootstrap.js 文件。仅使用 HTML 和 CSS 创建 UI。之后，为特定的工作或任务一一添加段。
3. 不需要学习 CSS 也不需要设计师的头脑
这是开发人员对这个框架的另一个误解。 Bootstrap 提供了随时可用的类和组件，帮助开发人员在他们的 UI 中使用它。这就是大多数开发人员认为他们不需要学习 CSS 的原因。
您可以在 bootstrap 中处理复杂的 CSS，从而节省大量时间。你不做 CSS，你使用内置组件而不用担心组件或类内部实际发生了什么。此外，您不需要了解媒体查询，但请记住，您需要了解响应式设计在应用程序中的工作原理。
为了表现最好，你还需要设计师的头脑……为什么？
很多人抱怨说，所有建立在 Bootstrap 上的网站看起来都很相似，而且很容易最终得到一个与任何其他 Bootstrap 网站没有太大区别的网站。
对于您网站的变化，您需要寻求可以帮助您的设计师的帮助，或者您可以根据自己对 HTML 和 CSS 以及此框架的理解来构建它。
4. 更改 Bootstrap CSS 文件
您正在开发一个应用程序，并且想要更改网页上某个元素的样式。您在 Chrome 开发人员工具中检查它，您会看到样式是从引导 CSS 文件继承的。您打开 bootstrap CSS 文件，并对该文件的类进行了一些更改。您进行了更改，但您是否观察到更改会反映在使用特定样式的所有页面中。
犯这个错误会在你的代码中造成很多混乱。覆盖 Bootstrap CSS 文件可能会破坏应用程序的整个设计。你最终会让事情变得复杂，而不是让事情变得更好。稍后您要么必须手动修复这些问题，要么必须从头开始构建应用程序。在这两种情况下，您只会浪费宝贵的时间。
如果您想覆盖默认引导程序样式，请在您自己的 CSS 文件中进行。不要对原始引导 CSS 文件进行任何更改。在上一点中，我们提到了解 CSS 是强制性的，在这种情况下这是适用的。您应该具备 CSS 知识，以覆盖您自己的 CSS 文档中的默认引导程序样式。
创建您自己的 CSS 选择器或类，在您的 HTML 标签中使用它，只要您在引导样式之后提及您的 CSS 类，您自己的样式定义就会覆盖引导默认样式。
5. 使用 JavaScript 过度复杂化
当新手开发人员进入 Web 开发时，他们使用 HTML、CSS 和 Bootstrap 为应用程序创建网页。在最初的编码之旅中，开发人员没有经验。他们很容易陷入滥用 JavaScript 的陷阱。滥用 JavaScript 会在您的应用程序中造成混乱，并使您的应用程序更加复杂。
引导模块可以通过标记 API 使用。您不需要在 JavaScript 中编写一行代码。在您的应用程序中使用模块时，这应该是您的首要考虑因素。
让我们以应用程序中的模态对话框为例。要触发模态对话框，请在控制器组件（例如按钮或锚点）上设置 data-toggle=”modal” ，然后使用 data-属性传递额外参数。
- ID #myModal 用于定位 HTML 代码。
- data-backdrop=”static” 指定当用户在模态之外点击时模态不会关闭
- data-keyboard=”false” 禁用关闭模态的转义键事件。
6. 与 IE8 和旧浏览器的不兼容问题
Bootstrap 在最新的浏览器和桌面中正常运行。较旧的程序和浏览器的实用性可以很好地工作，但它们不会生成合法的样式。在这些浏览器中，您会发现组件和元素具有不同的样式。 Internet Explorer 8 和 9 不支持 HTML5 和 CSS3 的某些属性。
在 HTML 头的元标记中，您必须正确描述 IE 未在兼容模式下运行。这将如下所示。
...
最后的想法
我们已经提到了 6 个基本错误，但开发人员在使用 Bootstrap 时还会犯一些错误。由于截止日期或其他一些原因，他们忽略了使用最佳实践，他们还忽略了使用一些使开发更容易的可用工具（其中之一是 Bootlint），并且他们还滥用了模态提示。
这些错误不限于此。作为一名开发人员，请确保您避免这些常见错误并清除您对该框架的误解。 Bootstrap 并不适合所有项目。根据问题或要求选择此框架。我们强烈建议您在开始使用任何框架之前仔细阅读文档。如果您的概念清晰并且花一些时间阅读文档，您的工作会做得更好。