srcmini本文概述
- 常见的Bootstrap错误＃1：对框架的基本误解
- 常见的Bootstrap错误2：认为你不需要了解CSS就可以使用Bootstrap, 并且不需要设计人员
- 常见的Bootstrap错误＃3：更改Bootstrap CSS文件
- 常见的Bootstrap错误4：使用Bootstrap提供的所有功能
- 常见的Bootstrap错误＃5：滥用模式提示
- 常见的Bootstrap错误＃6：文件输入按钮组件问题
- 常见的Bootstrap错误7：JavaScript过于复杂, 而忽略了” data-“属性
- 常见的Bootstrap错误＃8：忽略简化Bootstrap开发的工具
- 常见的Bootstrap错误9：IE8和旧版浏览器不兼容问题
- 常见的Bootstrap错误＃10：忽略最佳做法
- Bootstrap错误结论
乍一看, Bootstrap似乎很简单。确实, 开始使用Bootstrap并不困难。有一个写得很好的Bootstrap文档, 其中包含许多HTML, CSS和JavaScript代码示例。此处提到了大多数重要的陷阱, 但是仍然有些错误非常微妙, 或者是模棱两可的原因。因为Bootstrap看起来非常简单易用, 所以许多开发人员都急于进入该框架, 因此会发生错误。
当开发人员开始使用它时, 我们将研究10种最常见的Bootstrap错误, 问题和误解。
常见的Bootstrap错误＃1：对框架的基本误解
人们对Bootstrap框架有一些基本的误解。这可能是因为未在Bootstrap网站上明确宣传该广告, 或者是因为人们没有足够的时间阅读该文档。事实是, 有时开发人员最终会在角落做错事情, 然后指责框架。因此, 让我们澄清一些基本事实。
Bootstrap很全面, 但是它既不庞大也不庞大。 Bootstrap与基本的HTML和CSS设计模板捆绑在一起, 其中包括许多常见的UI组件。这些包括印刷术, 表格, 表单, 按钮, 字形图标, 下拉菜单, 按钮和输入组, 导航, 分页, 标签和徽章, 警报, 进度条, 模式, 选项卡, 手风琴, 转盘等等。你可以选择其中的几个, 并以其默认配置快速生成一个UI, 该UI以精美的格式处理多个浏览器, 设备和分辨率。
Bootstrap不会为你做任何事情, 但是它提供了一组合理的默认值供你选择, 它可以帮助开发人员将更多精力集中在开发工作上, 而不用担心设计问题, 并帮助他们快速启动并运行一个漂亮的网站。它可以进行快速原型制作, 但并不限制开发人员的发展。
它具有足够的可扩展性, 因此任何人都可以对其进行调整以适合其需求。在一开始, Bootstrap有一些限制, 而那时扩展默认样式很复杂。但是随着框架的成熟, 可扩展性也得到了改善。
常见的Bootstrap错误2：认为你不需要了解CSS就可以使用Bootstrap, 并且不需要设计人员
如果你认为如果使用的是Bootstrap, 则不需要了解CSS, 那是非常错误的。任何前端开发人员都需要学习CSS和HTML5。 Bootstrap从开发人员的肩上删除了许多棘手的CSS部件(例如供应商特定的前缀), 并且提供了基本的默认样式, 但是你仍然需要了解CSS。你无需了解媒体查询的工作原理, 但需要了解自适应设计的工作原理。 Bootstrap并不是要教你CSS的, 但是如果你愿意的话, 它可以提供帮助。检查LESS或SASS中的源代码是一个很好的起点。
在类似的主题上, 你不必是设计师, 并且可以说你不需要Bootstrap的设计师。但是, 如果可能, 请寻求设计师的帮助。对Bootstrap的一个普遍抱怨是, 所有Bootstrap站点看起来都是相似的, 并且很容易以与其他Bootstrap站点一样的站点结尾。但这不一定是真的。使用Bootstrap构建了数百万个网站。在Bootstrap Expo上可以找到有关如何实现不同设计的精彩展示, 该博览会收集了用Bootstrap构建的网站。看一下, 获取一些灵感, 然后开始构建自己的设计变体。
常见的Bootstrap错误＃3：更改Bootstrap CSS文件
使其简单明了：不要修改bootstrap.css文件。
如果你对bootstrap.css文件进行更改, 事情将会变得非常复杂。当你要升级Bootstrap文件时, 整个设计将会中断。你可以在自己的样式表中覆盖默认的Bootstrap程序颜色, 样式, 边距, 填充等所有内容。根本不需要触摸bootstrap.css样式表。
不知道LESS还是SASS？没问题, 你可以创建自己的CSS文件并覆盖原始bootstrap.css样式表中所需的内容。就像我们在前面的错误中提到的那样, 了解CSS是必须的。创建新的CSS选择器, 在HTML中使用它, 只要你在Bootstrap样式之后声明CSS类, 你的定义就会覆盖Bootstrap的默认设置。
仍想了解更多并进一步深入吗？我强烈建议并鼓励你这样做。使用Bootstrap LESS源代码。你将更好地了解发生了什么, 如果使用LESS源而不是静态CSS会在哪里。
常见的Bootstrap错误4：使用Bootstrap提供的所有功能
如前所述, Bootstrap是全面的。它提供了许多UI组件, HTML和CSS设计模板以及JavaScript插件。但是请选择。你不必使用Bootstrap的所有功能。
对于插件尤其如此。只选择有意义的插件, 不要使用所有插件, 因为它看起来很酷。你的网站很容易被覆盖。首先考虑你根本不包含bootstrap.js文件, 并仅使用纯HTML和CSS创建一个网站。然后, 仅根据特定角色的需要, 一个接一个地添加组件。
常见的Bootstrap错误＃5：滥用模式提示
Bootstrap模态提供具有最少必需功能的灵活对话框提示, 并带有智能默认值。尽管模态易于使用并且提供了丰富的自定义功能, 但是我们需要记住一些事情, 以避免常见的误用。
一次显示多个模式提示
Bootstrap不支持重叠模式。当时只有一个模态可见。一次可以显示多个模态, 但这需要编写自定义代码才能正确处理。
Bootstrap模态出现在背景下
如果模式容器或其父元素具有固定或相对位置, 则模式将无法正确显示。始终确保模式容器及其父元素没有应用任何特殊的位置。最佳做法是将模式的HTML放在结束</ body>标记之前, 或者甚至将其放在文档中位于顶级<body>标记之后的顶级位置。这是避免其他组件影响模式外观和功能的最佳方法。
移动设备上的模态
开发人员在使用虚拟键盘处理移动设备上的模式时, 需要注意一些注意事项。对于iOS设备而言尤其如此, 在iOS设备中, 存在渲染错误, 当触发虚拟键盘时, 该错误不会更新固定元素的位置。 Bootstrap不会处理此问题, 因此, 由开发人员决定以代码的方式针对相关应用程序以最佳方式处理这些情况。
常见的Bootstrap错误＃6：文件输入按钮组件问题
Bootstrap没有用于文件上传按钮的指定组件。可以使用以下示例代码来实现仅使用HTML和CSS的简单, 优雅的解决方案：
<span class="btn btn-default btn-file">
Browse <input type="file">
</span>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
关于如何获得类似效果的例子很多。此代码示例是从Cory LaViska借来的, 在他的网站上, 你可以阅读有关此问题的更详细的说明。还有一个扩展示例, 其中包含使用其他JavaScript代码的更多功能。
常见的Bootstrap错误7：JavaScript过于复杂, 而忽略了” data-“属性
设计人员, 或者只是JavaScript新手, 都可以很轻松地投入到Web开发中, 并仅使用HTML, CSS和Bootstrap创建网页。如果他们不太擅长编码, 则可能陷入滥用JavaScript或过于复杂的陷阱。重要的是要声明所有Bootstrap插件可以完全通过标记API使用, 而无需编写任何JavaScript代码。这是Bootstrap的一流API, 在使用插件时应首先考虑。
例如, 仅通过在按钮或锚点之类的控制器元素上设置data-toggle =” modal”并使用data-attribute传递其他参数, 就可以激活模式对话框而无需编写任何JavaScript。在下面的代码中, 我们以ID为#myModal的HTML代码为目标。我们已指定当用户使用data-backdrop选项在模态之外单击时, 模态将不会关闭, 并且我们已禁用了使用数据键盘选项关闭模态的转义键事件。全部在一行HTML代码中：
<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>
常见的Bootstrap错误＃8：忽略简化Bootstrap开发的工具
错误会发生, 每个开发人员都会偶尔出错。这是不可避免的, 但是重要的是你如何处理错误。 Bootstrap团队通过查看问题跟踪器发现人们更经常犯一些错误。这就是为什么他们试图自动化开发过程。结果就是Bootlint, 这是用于Bootstrap项目的HTML整理工具。 Bootlint可以在浏览器中使用, 也可以通过Node.js在命令行中使用, 它将自动检查Bootstrapped网页上是否存在许多常见的Bootstrap使用错误。将Bootlint添加到你的Web开发工具链中可以消除许多通常会减慢项目开发速度的常见错误。
如果你想为Bootstrap项目做贡献, 值得检查Rorschach。 Rorschach是一个Bootstrap拉取请求完整性检查程序bot, 它对每个新的拉取请求运行一些检查。如果健全性检查失败, 它将在拉取请求中留下说明性的信息, 说明错误以及如何纠正错误, 然后关闭拉取请求。
常见的Bootstrap错误9：IE8和旧版浏览器不兼容问题
Bootstrap旨在在最新的台式机和移动浏览器中发挥最佳性能。较旧的浏览器可能会显示样式不同的组件和元素, 但所有功能都应完全起作用。支持包括Internet Explorer 8和9, 需要特别注意的是, 这些浏览器未完全支持某些CSS3属性和HTML5元素。
要获得对Internet Explorer 8和其他旧版浏览器的完全支持, 你需要对CSS3 Media Queries Respond.js, 支持HTML5元素使用的HTML 5 shim和HTML头中的适当IE <meta>标签使用polyfill。确保IE不在兼容模式下运行。最后, 你的HTML头应如下所示：
<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>
如果使用Respond.js, 请注意开发和生产环境中的以下警告。
常见的Bootstrap错误＃10：忽略最佳做法
Stack Overflow的常见问题之一是如何使Bootstraps菜单下拉菜单在悬停而不是单击时打开。虽然此问题的解决方案并不复杂, 可以仅使用CSS来完成, 但不建议这样做。该功能被故意排除在框架之外, 这是开发团队做出的设计决策。同样, 它可以做到, 但是需要理解其影响并了解存在最佳实践, 尤其是对于移动优先框架。此特定问题背后的原因是, 使事情在悬停上无法正常工作不会帮助具有触摸设备的用户。在此类设备上, 没有悬停, 只有触摸事件。因此, 这将无法在任何支持触摸的设备上正常工作。
Bootstrap错误结论
我希望这个简短的Bootstrap指南将帮助你避免一些常见错误, 清除通常的误解并帮助你获得大部分框架。请记住, Bootstrap并不适合每个人, 也不适合每个项目。选择框架时, 你需要花一些时间阅读文档, 还需要花一些时间来使用框架, 以更好地了解和了解其工作原理。这对Bootstrap也有效。
阅读文档, 试用并试用示例, 掌握正确的基础知识, 并享受创建新颖美观的设计。
评论前必须登录！
注册