Lijana Saniukaite
Lijana在全栈web/移动开发方面有11年以上的经验, QA, 项目管理, entreprenueurship, and design, too.
Lijana在全栈web/移动开发方面有11年以上的经验, QA, 项目管理, entreprenueurship, and design, too.
Bootstrap是最好的和最常用的HTML/CSS/JS前端框架之一. 几乎所有做过一两个网站的web开发人员都听说过这个流行的框架. 它提供了许多现成的组件和资源, Bootstrap可以显著加快应用程序的开发速度.
每个优秀的开发人员都关心节省开发过程中的每一秒. 高效意味着更快的部署——我们部署得越快、越频繁, 我们的终端用户越快得到更好的产品. 因此，花几个小时或几天来计划过程和策略可以节省我们不仅仅是几分钟, but many hours.
在过去的4年里，我个人在90%的项目中都使用了这个框架. In this article, 我想和你分享一些技巧，这些技巧可以帮助你加速应用程序的开发，同时又不会错过Bootstrap的一些强大功能.
尽管它是一个很容易上手的框架, 不要被它的简单所迷惑. 在匆忙投入一个项目之前, 花点时间玩一下这个框架，了解它的基础设施和令人兴奋的组件的关键部分. 这将有助于避免 10个最常见的引导错误.
花一个小时阅读Bootstrap网站上的文档，或者从Toptal博客上的一篇很棒的文章中了解更多, What is Bootstrap? 关于什么，为什么和如何做的简短教程. 很棒的文章 你可能不知道的3个提示和技巧 on scotch.io.
如果您发现阅读文档是一项无聊的任务，而您宁愿阅读一些代码, 那么最好的起点是 引导程序的网站. 打开网页检查器, 浏览网站的源代码, 检查每个代码块及其元素. 这可能是掌握基础知识的最好和最快的方法之一.
深入研究页面结构，了解布局是如何构建的.
...
调整浏览器窗口大小或使用Chrome的Viewport Resizer来了解更多有关媒体查询实用程序的信息.
/*特别小的设备(手机，小于768px) */
/*没有媒体查询，因为这是Bootstrap的默认设置*/
/*小型设备(平板电脑，768px及以上)*/
@media (min-width:
@screen-sm-min) { ... }
/*中型设备(桌面，992px及以上)*/
@media (min-width:
@screen-md-min) { ... }
/*大型设备(大型桌面，1200px及以上)*/
@media (min-width:
@screen-lg-min) { ... }
@media (max-width: @screen-xs-max) { ... }
@media (min-width:
@screen-sm-min)和(max-width: @screen-sm-max) { ...
}
@media (min-width:
@screen-md-min)和(max-width: @screen-md-max) { ...
}
@media (min-width:
@screen-lg-min) { ... }
以及如何以及何时使用它们, 熟悉列类，以获得最佳的响应式设计结果.
Left column
Right column
看看W3Schools，你会在那里找到一个 完整的Bootstrap参考 所有CSS类，组件和JavaScript插件-都有“自己试试”的例子:
检查源代码，并尝试熟悉尽可能多的类名. 了解它们的用例——如何、何时以及为什么. 这将帮助您在编写HTML和样式化UI元素时更快地前进. 更多地了解这些组件将帮助您避免样式表中出现大量不必要的重复代码. 通过使用和重用现有组件来保持简洁, 而不是创建太多与框架中已经存在的相同的新组件.
当在由几个开发人员组成的团队中工作时，这一点尤其重要. 在将新设计转换为代码时，请确保您不会一次又一次地为相同的情况编写大量重复的代码，创建太多的样式. 保持UI开发的一致性和良好的UI风格指南文档化也可以为高效的团队合作增加一些障碍. In addition, 您将发现，在向应用程序添加新功能或页面时，您将更少地受挫. 我参与了十几个大项目, 相比之下，我见过很多框架被黑的案例，每次添加新的CSS代码都会破坏其他页面的UI. 浏览所有的网站并修复这些类型的错误会让人筋疲力尽. 不仅如此，还要考虑额外的开发时间和QA帮助所花费的成本.
如果你需要将div和/或内容居中，你可以使用以下类之一:
Use text-center
I am centered text
… or center-block
I am centered text
not .center or
如果你需要更小或更大的字体，你可以使用这些类之一:
I'm bigger paragraph text.
I'm smaller paragraph text.
如果您需要更大或更小的标题，不要忘记 .h1, .h2, .h3, .h4, .h5, .h6, .small. Use it like this:
Smaller Title with .h2
Bigger Title with .h1
Smaller Title with .small
不需要创建类 .清楚，你可以使用Bootstrap的 .clearfix instead.
...
Just use .Clearfix而不是定义自己的样式(或者更糟，使用内联样式):
...
Remove the default list-style 并在列表项上留下空白. 这只适用于直接子列表项. 以防您需要对嵌套列表应用相同的方法, 您还需要为它们添加类名.
- ...
- ...
类似地，对于复选框或单选按钮，我们有 .checkbox-inline and .radio-inline.
你总是可以加上 .form-inline 到你的表单(它不一定是 )用于左对齐和内联块控件.
想象一下更大或更小的按钮? Add .btn-lg, .btn-sm, or .btn-xs 额外尺寸.
用类将元素向左或向右浮动. !important 是为了避免特异性问题. 类也可以与任何CSS预处理器混合使用.
Use .pull-right, .pull-left, .text-right, .text-left instead of .right, .left, .left-float, .right-float.
...
...
使用文本对齐类轻松地将文本重新对齐到组件.
Left aligned text.
Right aligned text.
在做大项目的时候, 我发现有效使用框架的最佳方法是在它的基础上构建，而不是直接自定义其核心文件. 这个概念类似于您可能在项目中使用的其他平台和库.
Although, 如果您正在构建一个小型网站，并且有一个可能不需要太多更改或更新的设计模型, 您可能会发现，根据您的需要定制框架是更好的选择. 例如，您可能希望删除框架文件中不直接需要的所有内容, 或者你可以去Bootstrap的网站定制部分，在那里你可以很容易地配置所有的组件, variables, 和jQuery插件，以获得自己的版本. In this case, 您可能会加快您的网站开发，并减少时间样式或处理覆盖.
However, 如果你是和几个或更多的开发人员一起创建一个大型网站，最好把事情分开并组织好. 将框架文件移出主自定义CSS文件夹，并将其保存在非编辑的非版本文件夹中，并使用Grunt或Gulp插件Grunt -uncss或Gulp -uncss删除未使用的CSS. 另一种保持独立的方法是通过CDN提供服务. 将框架的代码分开并且不受影响，可以在升级到最新版本时提供更好更快的选择. 它还有助于最小化许多可伸缩性和样式问题, 或者在快速持续的UI更改中进行添加时减慢速度.
利用像Yeoman或Slush这样的脚手架工具, 以及像鲍尔这样的包管理器, Python’s pip, Node’s NPM, 或者Ruby Gems，因为它们做的不仅仅是将文件添加到应用程序的路径中. 我真的很欣赏Bower的强大功能——它绝对可以做的不仅仅是下载一两个文件. 使用包管理器是一个好主意，因为项目的复杂性很可能会增加，第三方插件的数量以及维护它们的方式将变得疯狂和耗时. Bower将帮助您跟踪每个插件及其依赖关系，包括与Bootstrap相关的任何内容.
Bootstrap的流行带来了大量有用的资源:文章, tutorials, 第三方插件和扩展, templates, theme builders, and so on. 因此，无论您是在寻找灵感还是代码片段, 你将拥有加速进步所需的一切.
你会认为有这么多可用的资源, 每个人都会利用它，并在他们的项目中使用它, 但不管你信不信，事实并非如此. 一些开发人员通过跳过一些优秀的代码片段或资源来浪费时间并减慢项目进度. 虽然你不应该只是盲目地复制粘贴, 您必须了解好的部分，并根据自己的编码风格和技术需求采用它们. 寻找和整理好的资源并有效利用它的能力也是一种技能，需要多年的经验和知识.
下面列出了一些有用的入门资源:
来自Bootstrap创建者的官方主题: themes.getbootstrap.com.
市场与高级Bootstrap主题和模板: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.
免费引导主题 & Templates: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.
“The Big Badass List”——319个有用的Bootstrap资源列表: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/
BootstrapUI 由AngularUI团队用纯AngularJS编写.
React-Bootstrap 是可重用的前端组件库吗. 通过Facebook的React，你将获得Twitter Bootstrap的外观和感觉，但代码更干净.js framework.
Bootstrap 3与Django的集成: http://github.com/dyve/django-bootstrap3
Jekyll-Bootstrap 是一个完整的博客支架基于Jekyll的博客.
WordPress入门主题Sage 具有现代前端开发工作流. 基于HTML5 Boilerplate, gulp, Bower和Bootstrap.
Bootstrap的材料设计 是Bootstrap 3的一个主题，它可以让你在你最喜欢的前端框架中使用新的Google Material Design.
Bootstrap是最好的框架之一，它为您提供了许多很棒的工具和资源，以加速您的应用程序开发过程.
在设计和编码一个出色的UI时，它可以节省你许多小时/天的工作. 每个组件和插件都有详细的文档记录，包括实例和代码块，以便于使用和定制. 很多人都强烈推荐它 developers 在原型制作和生产中都很受欢迎. 这是一个非常好的工具，使移动友好的响应式网站. Bootstrap为许多类型的项目提供了一个很好的起点, 选择把它交给a designer 然后说，让这个看起来更漂亮!而不需要他们破解代码. Most importantly, 它允许你先发展结构, and address fonts, 颜色和花哨的风格之后. 花点时间研究它能做什么，并聪明地知道如何以最好的方式使用它，这样你就能更快地到达你想要的地方.
世界级的文章，每周发一次.
世界级的文章，每周发一次.
Join the Toptal® community.