网页开发中应避免的6个最常见的Bootstrap错误

.bg-primary
.bg-danger
breadcrumb
alert-success
dropdown
data-toggle=”collapse”
col-md-4

以上这些词你都不熟悉吗？

如果是的话….，那么你肯定在你的应用程序中使用了bootstrap（或者你可能已经使用了），这篇文章值得一读（让我们继续…）

如果我们问….如何开始在应用程序的前端部分工作，你会怎么回答？

先学习HTML和CSS。(每个网络或前端开发者对新手开发者建议的最常见答案…)

网页开发中应避免的6个最常见的Bootstrap错误

你学习了它，你理解了所有的概念，你很兴奋地创建了你的第一个网站，你开始在一些网页上工作，你在你的页面上添加了图片、按钮、教科书、表格和其他很多东西。你在你的页面上设置了高度、宽度、边距、填充、对齐，以及其他各种东西。总之……你付出了努力，花费了大量的时间，最后，你在浏览器中运行了你的第一个网页。

你看到了什么？

它有吸引力吗？….它的反应能力强吗？

你不是面临着图像、布局、按钮、排列或你的网页中的任何其他元素的问题吗？

当然……你正面临着很多问题，你的网页在所有的屏幕尺寸上看起来都不怎么样。

很多新手开发者都面临这个问题，他们变得很失望，但如果你是一个充满激情的开发者，那么你很快就会发现解决方案，你会转向Bootstrap。( 你知道bootstrap的最新版本吗？….，在谷歌上搜索它。它发布于2020年12月7日)。

Bootstrap是最受欢迎的前端框架之一，它可以解决这类问题。

作为一个网页开发者，你可能已经在你的网页上使用了很多bootstrap元素。排版、表单、按钮、表格、导航、模版、图片旋转木马、折叠、工具提示、网格等很多元素你都可能在你的网页上使用过。Bootstrap不仅使你的工作更容易，而且还有助于在更短的时间内做更多的事情。

对于大多数开发者来说，Bootstrap很容易使用，在构建应用程序时利用这个框架并不难。Bootstrap的文档相当令人印象深刻。你可以在那里借助HTML、CSS和JavaScript的大量代码片段来轻松学习这个框架。

在文档中，你可以找到很多与前端有关的各种问题的解决方案。Bootstrap的特点使你能够更快地构建你的应用程序。由于简单和容易适应的特点，开发者在使用这个框架的时候，急于求成，犯了非常浅显和含糊的错误。

让我们来看看开发人员在使用这个框架时应该避免的一些常见错误。

1.忽视了这个框架的基本基础

这是开发人员在使用这个框架时犯的最大错误之一。他们没有仔细阅读文件，而是自行假设一些概念。这导致在他们的应用程序中产生了错误。开发人员发现应用程序没有得到预期的结果，于是他们开始指责该框架。

请记住，bootstrap既不是巨大的也不是巨大的。它有很多现成的HTML和CSS的模板。这些模板提供了基本的UI部分，可以很容易地构建应用程序。分页、标签、徽章、警报、手风琴、进度条和许多内置组件都是可用的。根据不同的要求，你可以选择它们，并根据它们的默认配置来使用它们。

Bootstrap帮助你为你的应用程序建立一个有吸引力的用户界面。它能以一种漂亮的形式处理多种浏览器、设备和分辨率。你可以专注于开发和改进部分，而不是担心你的应用程序的结构。

Bootstrap现在有足够的扩展性（最初它不是，而且有限制）。你可以根据你的需要来定制它。我们建议你在用这个框架实现任何东西之前，先了解这个框架的基本原理并仔细阅读文档。

2.利用Bootstrap提供的一切优势

Bootstrap提供了许多功能。它提供了大量的UI组件，用HTML和CSS创建的设计模板。很多JavaScript插件也可以在Bootstrap中使用。作为一个开发者，你会惊讶地看到所有的功能，你可能也想利用所有的功能，但朋友们要阻止自己，在这里要有选择性。

不要使用bootstrap提供的每一个功能，把事情弄得很复杂。不要利用bootstrap提供的每个组件。这对插件来说尤其有效。只挑选那些你在应用中真正需要的东西。挑选大量的组件只是因为它很好，很酷，这只会让你的网站变得夸张。

你可以遵循一个简单的方法，即开始时完全排除bootstrap.js文件。只用HTML和CSS来创建用户界面。之后，为特定的工作或任务逐一添加分段。

3.不需要学习CSS，也不需要设计师的头脑

这是开发者对这个框架的另一个误解。Bootstrap提供现成的类和组件，帮助开发者在他们的用户界面中使用它。这就是大多数开发者认为他们不需要学习CSS的原因。

你处理bootstrap中复杂的CSS，可以节省大量的时间。你不做CSS，你利用内置的组件，而不用担心组件或类里面到底发生了什么。另外，你不需要知道媒体查询，但要记住，你需要了解响应式设计在应用程序中是如何工作的。

要想表现得最好，你还需要设计师的头脑……为什么？

很多人抱怨说，所有基于Bootstrap建立的网站看起来都差不多，而且很容易就会出现一个与其他Bootstrap网站没有什么区别的网站。

对于你的网站的变化，你需要采取一个设计师的帮助，他可以帮助你，或者你可以自己建立它，了解HTML和CSS以及这个框架。

4.改变Bootstrap的CSS文件

你正在开发一个应用程序，你想改变网页上一个元素的样式。你在Chrome开发工具中检查，发现该样式是继承自bootstrap CSS文件的。你打开bootstrap CSS文件，在该文件的一个类中做了一些修改。你做了修改，但你是否观察到，这些修改反映在所有使用该特定样式的页面中。

犯了这个错误会给你的代码带来很多混乱。覆盖你的Bootstrap CSS文件会破坏你应用程序的整个设计。你非但不能使事情变得更漂亮，反而会使事情变得更复杂。后来，要么你不得不手动修复这些东西，要么你不得不从头开始构建应用程序。在这两种情况下，你都会浪费你的宝贵时间。

如果你想覆盖默认的bootstrap风格，那么在你自己的CSS文件中进行。不要对原始bootstrap的CSS文件做任何改动。在上一点中，我们提到了解CSS是必须的，在这种情况下也适用。你应该具备CSS知识，以便在你自己的CSS文件中覆盖默认的bootstrap样式。

创建你自己的CSS选择器或类，在你的HTML标签中使用，只要你在bootstrap样式之后提到你的CSS类，你自己的样式定义将覆盖bootstrap的默认样式。

5.使用JavaScript的过度复杂化

当一个新手开发者跳入网页开发时，他们使用HTML、CSS和Bootstrap来创建应用程序的网页。在最初的编码旅程中，开发人员没有经验。他们很容易落入误用JavaScript的陷阱。滥用JavaScript会在你的应用程序中造成混乱，你会使你的应用程序更加复杂。

Bootstrap模块可以通过markup API来使用。你不需要在JavaScript中写任何一行代码。这应该是你在应用中使用模块时首先考虑的问题。

让我们以你的应用程序中的模态对话框为例。为了触发模态对话框，在一个控制器组件上设置data-toggle=”modal”，如按钮或锚，然后使用data-属性传递额外的参数。

<button type=”button” data-toggle=”modal” data-target=”#myModal” data-backdrop=”static” data-keyboard=”false”>Open My Modal</button>

ID #myModal是用来定位HTML代码的。
data-backdrop=”static” 指定当用户在模态外点击时，模态不会关闭。
data-keyboard=”false” 禁用转义键事件，关闭一个模态。

6.与IE8和旧的浏览器不兼容的问题

Bootstrap在最新的浏览器和桌面上功能正常。旧的程序和浏览器的用处可以很好地工作，但它们并不’产生合法的风格。在这些浏览器中，你会发现组件和元素的样式不同。Internet Explorer 8和9不支持HTML5和CSS3的一些属性。

在HTML头部的元标签中，你必须正确描述IE没有在兼容模式下运行。这将看起来像下面这样。

<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>