At first glance, Bootstrap看起来很简单. 事实上，开始使用Bootstrap并不困难. 有一本写得很好的书 引导文件 有许多HTML、CSS和JavaScript代码示例. 这里提到了大多数重要的陷阱, 但仍然有一些错误是非常微妙的, 或者有模棱两可的原因. 因为Bootstrap看起来非常简单，易于使用, 许多开发人员都在争先恐后地使用这个框架, 所以错误就发生了.

我们来看看10个最常见的Bootstrap错误, problems, 以及当开发人员开始使用它时产生的误解.

常见错误#1:对框架的基本误解

有一些基本的误解 引导框架 that people have. 这可能是因为在Bootstrap网站上没有明确的广告, 或者是因为人们没有花足够的时间阅读文档. The fact is that sometimes developers end up in the corner doing stuff wrongly, 然后责怪框架. 让我们把一些基本事实弄清楚.

Bootstrap是全面的，但它既不庞大也不庞大. Bootstrap comes bundled with basic HTML and CSS design templates that include many common UI components. 其中包括排版, Tables, Forms, Buttons, Glyphicons, Dropdowns, 按钮和输入组, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many more. 你可以从中挑选一些, and with its default configuration quickly generate a UI that handles multiple browsers, devices, 分辨率和格式都很好.

Bootstrap不会为你做所有的事情, but it provides a set of reasonable defaults to choose from and it will help developers to concentrate more on the development work than worrying about design, 并帮助他们建立一个好看的网站，并迅速运行. 它允许快速原型，但它不会限制开发人员.

它具有足够的可扩展性，任何人都可以根据自己的需要进行调整. In the beginning, Bootstrap有一些限制, 在那个时候，扩展默认样式是很复杂的. 但是随着框架的成熟，可扩展性也得到了改进.

Common Bootstrap Mistake #2: Thinking that you don’t need to know CSS to use Bootstrap, 你不需要设计师

If you are thinking that if you are using Bootstrap you will not need to know CSS, you are very wrong. 任何前端开发人员都需要学习CSS和HTML5. Bootstrap is removing a lot of tricky CSS parts from developers shoulders (like vendor specific prefixes) and it is offering basic default styling, 但是你仍然需要理解CSS. 你不需要知道媒体查询是如何工作的，但你需要理解它是如何工作的 responsive design works. Bootstrap并不是用来教你CSS的，但是如果你想的话，它可以提供帮助. 在LESS或SASS中检查源代码是一个很好的起点.

On a similar topic, 你不需要成为一个设计师, 你可以说你不需要一个使用Bootstrap的设计师. 但是，如果可能的话，请使用设计师的帮助. 对Bootstrap的一个常见抱怨是所有的Bootstrap站点看起来都很相似, and it is easy to end up with a website that looks just like any other Bootstrap site. 但这并不一定是真的. 数以百万计的网站正在通过Bootstrap构建. 伟大的展示如何不同的设计可以实现可以找到在 Bootstrap Expo该网站收集用Bootstrap构建的网站. Take a look, get some inspiration, and start building your own design variation.

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

简单来说就是:去做 not modify the bootstrap.css file.

如果对 bootstrap.css 文件，事情很快就会变得复杂. 当你想要升级Bootstrap文件时，整个设计将会中断. 您可以在自己的样式表中覆盖默认的引导颜色, styles, margins, paddings, everything. 没有必要去碰 bootstrap.css stylesheet at all.

不知道LESS或SASS? No problem, you can create your own CSS file and overwrite whatever you want from the original bootstrap.css stylesheet. 正如我们在前面的错误中提到的，了解CSS是必须的. 创建新的CSS选择器, use it in the HTML, 只要你在Bootstrap样式之后声明你的CSS类, 您的定义将覆盖Bootstrap默认值.

仍然想知道更多，更深入? 我强烈建议并鼓励你这样做. 使用Bootstrap LESS源代码. 你会更好地理解发生了什么, 如果你使用LESS源代码而不是静态CSS，哪里是什么.

常见错误4:使用Bootstrap提供的所有内容

如前所述，Bootstrap是全面的. It offers a lot of UI components, HTML and CSS design templates, and JavaScript plugins. 但是，请有所选择. 您不必使用Bootstrap的每个功能.

对于插件来说尤其如此. 只选择有意义的插件, 不要因为看起来很酷就把所有东西都用上. 你的网站很容易被过度渲染. 考虑一个你不包括的开始 bootstrap.js 并使用简单的HTML和CSS创建一个站点. 然后，仅根据特定角色的需要逐个添加组件.

常见引导错误#5:误用模态提示

Bootstrap modals offer flexible dialog prompts with the minimum required functionality, 而且它带有智能默认值. 虽然模态很容易使用，并提供丰富的定制, 有几件事我们需要记住，以避免常见的误用.

同时显示多个模态提示符

Bootstrap不支持重叠模态. 一次只能显示一个模态. 可以实现一次显示多个模态, 但它需要编写自定义代码来正确处理此问题.

引导模式出现在背景下

如果模态容器或它的父元素有固定位置或相对位置, 模态不能正确显示. Always make sure that the modal container and its parent elements don’t have any special positioning applied. 最佳实践是将模态的HTML放在结束之前 tag, or even better in a top-level position in the document just after the opening tag. This is the best way to avoid other components affecting the modal’s appearance and functionality.

移动设备上的模式

There are some caveats that developers need to be aware of when dealing with modals on 带有虚拟键盘的移动设备. 对于……尤其如此 iOS devices, where a rendering bug exists that doesn’t update the position of fixed elements when the virtual keyboard is triggered. 这不是由Bootstrap处理的, so it is up to the developer to handle these situations in the code in the best way for the application in question.

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

Bootstrap没有为文件上传按钮指定组件. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code:

  Browse 

.btn-file {
  位置:相对;
  overflow: hidden;
}
.Btn-file输入[type=file] {
    位置:绝对的;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align:正确;
    过滤器:α(不透明度= 0);
    opacity: 0;
    outline: none;
    背景:白色;
    cursor: inherit;
    display: block;
}

关于如何获得类似的效果，有很多例子. This code example is borrowed from Cory LaViska, and on his site you can read a more detailed 这个问题的解释. There is also an extended example with more functionality that is using additional JavaScript code.

Common Bootstrap Mistake #7: Overcomplicating with JavaScript and ignoring “data-” attributes

Designers, 或者只是JavaScript开发新手, 可以很容易地进入web开发和创建网页只使用HTML, CSS, and Bootstrap. 如果他们不擅长编码, 他们可能会陷入误用JavaScript或过于复杂的陷阱. It is important to state that all Bootstrap plugins can be used purely through the markup API, without writing a single line of JavaScript. This is Bootstrap’s first-class API and should be your first consideration when using plugins.

For example, we can activate a modal dialog without writing any JavaScript just by setting data-toggle =“模态” on a controller element like a button or anchor, and pass additional parameters using data- attributes. 在下面的代码中，我们的目标是带有ID的HTML代码 #myModal. We have specified that the modal won’t close when user clicks outside the modal by using the data-backdrop 选项，并且我们已经禁用了用于关闭模式的转义键事件 data-keyboard option. 全部在一行HTML代码中:

Launch my modal

常见错误#8:忽略简化引导开发的工具

错误是会发生的，每个开发人员都会偶尔犯错误. 这是不可避免的，但重要的是你如何处理这个错误. The Bootstrap team noticed by watching the issue tracker that people are doing some mistakes more often. 这就是他们尝试自动化开发过程的原因. The result is Bootlint一个用于Bootstrap项目的HTML检测工具. Bootlint既可以在浏览器中使用，也可以通过Node在命令行中使用.js, and it will automatically check Bootstrapped webpages for many common Bootstrap usage mistakes. Adding Bootlint to your web development toolchain can eliminate a lot of common mistakes that usually slow down a project’s development.

如果你想为Bootstrap项目做出贡献，这是值得检查的 Rorschach. Rorschach是一个Bootstrap pull请求完整性检查机器人, 它会对每个新的拉取请求进行一些检查. 如果完整性检查失败, it leaves an informative comment on the pull request explaining the mistake and how to fix it, 然后关闭pull请求.

常见错误#9:IE8和更早的浏览器不兼容问题

Bootstrap is built to work at its best in the latest desktop and mobile browsers. 旧的浏览器可能会以不同的样式显示组件和元素, 但是所有的东西都应该是功能齐全的. 支持包括Internet Explorer 8和9, with an important note that some CSS3 properties and HTML5 elements are not fully supported by these browsers.

以获得对Internet Explorer 8和其他旧浏览器的全面支持, 你需要为CSS3媒体查询使用一个多边形 Respond.js, HTML 5 shim 能够使用HTML5元素和合适的IE 标记，以确保IE不是在兼容模式下运行. 你的HTML头在最后应该看起来像这样:

  ...
  
  

In case of Respond.js，注意以下几点 caveats 在开发和生产环境中.

常见错误10:忽略最佳实践

One of the common questions on the Stack Overflow is how to make Bootstraps menu dropdown to open on hover, 而不是点击. While the solution to this question is not complicated and can be done by using only CSS, 不建议这样做. 这个特性被有意地排除在框架之外, 这是由开发团队做出的设计决策. Again, it can be done, but one needs to understand repercussions and understand that best practices exist, 特别是对于移动优先框架. The reasoning behind this specific issue is that making things to work on hover does not help users that have touch devices. 在这些设备上没有悬停，只有触摸事件. 因此，这将无法在任何触控设备上正常工作.

Bootstrap错误

I hope this short Bootstrap guide will help you to avoid some of the common mistakes, 清除常见的误解, 并帮助您获得框架的大部分内容. Keep in mind, Bootstrap is not for everyone, nor is it suited for every project. When choosing a framework you need to take some time to read the documentation, and you need to spend some time playing with the framework to get a better sense and picture of how it works. 这对Bootstrap也是有效的.

Read the documentation, 玩和实验的样本, 做好基础工作, 享受创造新的和美丽的设计.