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

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

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

有一些基本的误解 引导框架 人们有. 这可能是因为在Bootstrap网站上没有明确的广告, 或者是因为人们没有花足够的时间阅读文档. 事实是，有时候开发者最终会在角落里做一些错误的事情, 然后责怪框架. 让我们把一些基本事实弄清楚.

Bootstrap是全面的，但它既不庞大也不庞大. Bootstrap捆绑了基本的HTML和CSS设计模板，其中包括许多常见的UI组件. 其中包括排版, 表, 形式, 按钮, Glyphicons, 下拉, 按钮和输入组, 导航, 分页, 标签和徽章, 警报, 进度条, 情态动词, 选项卡, 手风琴, 旋转木马, 还有更多. 你可以从中挑选一些, 并使用其默认配置快速生成可处理多个浏览器的UI, 设备, 分辨率和格式都很好.

Bootstrap不会为你做所有的事情, 但它提供了一组合理的默认值可供选择，它将帮助开发人员更多地专注于开发工作，而不是担心设计, 并帮助他们建立一个好看的网站，并迅速运行. 它允许快速原型，但它不会限制开发人员.

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

常见的Bootstrap错误#2:认为不需要了解CSS就可以使用Bootstrap, 你不需要设计师

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

关于类似的话题, 你不需要成为一个设计师, 你可以说你不需要一个使用Bootstrap的设计师. 但是，如果可能的话，请使用设计师的帮助. 对Bootstrap的一个常见抱怨是所有的Bootstrap站点看起来都很相似, 最后很容易得到一个看起来和其他Bootstrap网站一样的网站. 但这并不一定是真的. 数以百万计的网站正在通过Bootstrap构建. 伟大的展示如何不同的设计可以实现可以找到在 引导世博会该网站收集用Bootstrap构建的网站. 看一看，获得一些灵感，并开始构建自己的设计变体.

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

简单来说就是:去做 不 修改 引导.css 文件.

如果对 引导.css 文件，事情很快就会变得复杂. 当你想要升级Bootstrap文件时，整个设计将会中断. 您可以在自己的样式表中覆盖默认的引导颜色, 风格, 利润率, 填充, 一切. 没有必要去碰 引导.css 样式表.

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

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

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

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

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

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

引导模态提供了灵活的对话框提示和最小的功能要求, 而且它带有智能默认值. 虽然模态很容易使用，并提供丰富的定制, 有几件事我们需要记住，以避免常见的误用.

同时显示多个模态提示符

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

引导模式出现在背景下

如果模态容器或它的父元素有固定位置或相对位置, 模态不能正确显示. 始终确保模态容器和它的父元素没有应用任何特殊的定位. 最佳实践是将模态的HTML放在结束之前 黑龙江职业学院 买球app 华信智能 欧洲杯投注 欧洲杯投注平台 European-Cup-buying-contactus@zhanmi.net 买球网站 esball易世博 中国护士网 游戏狗安卓游戏频道 永成双海 佛山公交 暨南大学教务处 新东方教育科技集团 国浩律师事务所 52pk三国杀网页游戏 《完美世界》国际版官方网站 标记，或者最好放在文档的顶层位置，就在开头之后 标签. 这是避免其他组件影响模态外观和功能的最佳方法.

移动设备上的模式

在处理模式时，开发者需要注意一些注意事项 带有虚拟键盘的移动设备. 对于……尤其如此 iOS设备, 在哪里存在渲染错误，不更新固定元素的位置时，虚拟键盘被触发. 这不是由Bootstrap处理的, 因此，开发人员应该在代码中以最适合应用程序的方式处理这些情况.

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

Bootstrap没有为文件上传按钮指定组件. 一个简单而优雅的解决方案，只使用HTML和CSS可以实现以下示例代码:

  Browse 

.btn-文件 {
  位置:相对;
  溢出:隐藏;
}
.Btn-文件输入[type=文件] {
    位置:绝对的;
    上图:0;
    右:0;
    最小值-width: 100%;
    最小高度:100%;
    字体大小:100 px;
    text-align:正确;
    过滤器:α(不透明度= 0);
    透明度:0;
    大纲:没有;
    背景:白色;
    光标:继承;
    显示:块;
}

关于如何获得类似的效果，有很多例子. 这个代码示例借鉴自Cory LaViska，您可以在他的站点上阅读更详细的代码 这个问题的解释. 还有一个扩展的示例，它使用了额外的JavaScript代码，具有更多功能.

常见错误#7:JavaScript过于复杂，忽略“数据-”属性

设计师, 或者只是JavaScript开发新手, 可以很容易地进入web开发和创建网页只使用HTML, CSS, 和引导. 如果他们不擅长编码, 他们可能会陷入误用JavaScript或过于复杂的陷阱. 需要说明的是，所有Bootstrap插件都可以纯粹通过标记API使用。 没有 写一个 一行 JavaScript. 这是Bootstrap的一级API，在使用插件时应该首先考虑.

例如，我们可以激活一个模态对话框，而不需要编写任何JavaScript 数据-toggle =“模态” 在控制器元素(如按钮或锚)上，并使用 数据- 属性. 在下面的代码中，我们的目标是带有ID的HTML代码 # myModal. 我们已经指定，当用户在模态外单击时，模态不会关闭 数据-backdrop 选项，并且我们已经禁用了用于关闭模式的转义键事件 数据-keyboard option. 全部在一行HTML代码中:

Launch my modal

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

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

如果你想为Bootstrap项目做出贡献，这是值得检查的 罗夏测验的. 罗夏测验的是一个Bootstrap pull请求完整性检查机器人, 它会对每个新的拉取请求进行一些检查. 如果完整性检查失败, 它在pull请求上留下了一个翔实的评论，解释了错误以及如何修复它, 然后关闭pull请求.

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

Bootstrap是为了在最新的桌面和移动浏览器中发挥最佳作用而构建的. 旧的浏览器可能会以不同的样式显示组件和元素, 但是所有的东西都应该是功能齐全的. 支持包括Internet Explorer 8和9, 值得注意的是，这些浏览器并不完全支持一些CSS3属性和HTML5元素.

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

  ...
  
  

万一… 回应.js，注意以下几点 警告 在开发和生产环境中.

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

关于堆栈溢出的一个常见问题是如何使引导菜单下拉菜单在悬停时打开, 而不是点击. 而这个问题的解决方案并不复杂，只需要使用CSS就可以完成, 不建议这样做. 这个特性被有意地排除在框架之外, 这是由开发团队做出的设计决策. 再一次。, 这是可以做到的, 但人们需要了解后果，并了解最佳实践的存在, 特别是对于移动优先框架. 这个特定问题背后的原因是，让东西在悬停状态下工作并不能帮助拥有触摸设备的用户. 在这些设备上没有悬停，只有触摸事件. 因此，这将无法在任何触控设备上正常工作.

Bootstrap错误

我希望这个简短的引导指南能帮助你避免一些常见的错误, 清除常见的误解, 并帮助您获得框架的大部分内容. 请记住，Bootstrap并不适合每个人，也不适合每个项目. 在选择框架时，您需要花一些时间阅读文档, 您需要花一些时间来使用这个框架，以便更好地了解它是如何工作的. 这对Bootstrap也是有效的.

读了 文档, 玩和实验的样本, 做好基础工作, 享受创造新的和美丽的设计.