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