使用 Bootstrap 加速应用程序开发

Bootstrap 是最好和最常用的 HTML/CSS/JS 前端框架之一。 几乎所有制作过一两个网站的 Web 开发人员都听说过这个流行的框架。 它提供了许多现成的组件和资源，Bootstrap 可以显着加快您的应用程序开发。

每个优秀的开发人员都关心在他们的开发过程中节省每一秒。 高效意味着更快的部署——我们部署得越早、越频繁，我们的最终用户就会越快获得更好的产品。 因此，花几个小时或几天来计划流程和策略不仅可以为我们节省几分钟，而且可以节省很多小时。

在过去的 4 年里，我个人在 90% 的项目中一直在使用这个框架。 在本文中，我想与您分享一些技巧，这些技巧可以帮助您加快应用程序开发速度，而不会错过 Bootstrap 的一些出色功能。

了解引导程序

尽管它是一个非常容易上手的框架，但不要被它乍一看的简单性所迷惑。 在匆忙进入一个项目之前，花时间玩这个框架，了解它的基础设施和令人兴奋的组件的关键部分。 这将有助于避免 10 个最常见的引导错误。

花一个小时阅读 Bootstrap 网站上的文档或从 ​​Toptal 博客上的一篇精彩文章中了解更多信息，什么是 Bootstrap？ 关于什么、为什么和如何做的简短教程。 而且，scotch.io 上的精彩文章 Bootstrap 3 Tips and Tricks You Might Not Know。

如果您发现阅读文档是一项无聊的任务，而您宁愿阅读一些代码，那么最好的起点是 Bootstrap 的网站。 打开您的网络检查器，扫描网站的源代码，并检查每个代码块及其元素。 这可能是掌握基础知识的最好和最快的方法之一。

深入研究页面结构并了解布局是如何构建的。

 <div class="container"> <div class="row"> ... </div> </div>

… 调整浏览器窗口大小或使用 Chrome 的 Viewport Resizer 了解有关媒体查询实用程序的更多信息。

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

…以及如何以及何时使用它们，熟悉列类以获得最佳响应式设计结果。

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

看看 W3Schools，您会在其中找到所有 CSS 类、组件和 JavaScript 插件的完整 Bootstrap 参考——所有这些都带有“自己尝试”示例：

• Bootstrap 的网格系统解释：Bootstrap 中的网格
• 基本 CSS 类：排版、按钮、表单和表单元素、助手类、图像、表格
• 单个组件：字形图标、下拉菜单、导航。

检查源代码并尝试熟悉尽可能多的类名。 了解他们的用例——方法、时间和原因。 这将帮助您在编写 HTML 和样式化 UI 元素时更快地前进。 了解有关这些组件的更多信息将帮助您避免使用大量不必要的重复代码使样式表变得臃肿。 通过使用和重用现有组件来保持精简和干净，而不是创建太多与框架中已经存在的组件相同的新组件。

在由多个开发人员组成的团队中工作时，这一点尤其重要。 确保在将新设计转换为代码时，每次都一遍又一遍地编写大量重复的代码，为同一个案例创建太多样式。 使用 UI 样式指南保持 UI 开发的一致性和有据可查的文档还可以为高效的团队合作增加一些纽带。 此外，您会发现在向您的应用程序添加新功能或页面时，您会减少挫折感。 我参与了十几个大项目，相比之下，我见过许多框架被黑掉的案例，每次添加新的 CSS 代码都会破坏其他页面上的 UI。 浏览所有站点并修复这些类型的错误会变得非常累人。 不仅如此，还要考虑花费在额外的开发人员时间和 QA 帮助上的成本和所有资金。

7个最常见的浪费时间的造型错误

1. 居中文本或 div 时

如果您需要将 div 和/或内容居中，您可以使用以下类之一：

使用文本中心

<p class="text-center">I am centered text</p>

… 或中心块

<div class="center-block">I am centered text</div>

不是.center或<center>

2.更改字体大小时

如果您需要更小或更大的字体，可以使用以下类之一：

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

如果您需要更大或更小的标题，请不要忘记.h1 、 .h2 、 .h3 、 .h4 、 .h5 、 .h6 、 .small 。 像这样使用它：

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. 清除浮动或强制元素自清除其子项时

无需创建 .clear 之类的类，您始终可以使用 Bootstrap 的.clearfix来代替。

 <div class="clearfix">...</div>

4.杀.row类边距时

只需使用 .clearfix 而不是定义自己的样式（或更糟糕的是，使用内联样式）：

 <div class="clearfix">...</div>

5.取消样式或内联无序列表和其他元素时

删除列表项的默认列表样式和左边距。 这仅适用于直接子列表项。 如果您需要对嵌套列表应用相同的内容，您还需要在这些列表上添加类名。

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

同样，对于复选框或单选按钮，我们有.checkbox-inline和.radio-inline 。

并且您始终可以将.form-inline添加到您的表单（不一定是<form> ）以用于左对齐和内联块控件。

6. 调整按钮大小时

喜欢更大或更小的按钮？ 添加.btn-lg 、 .btn-sm或.btn-xs以获得其他尺寸。

7. 左右浮动对齐项目时

使用类将元素向左或向右浮动。 !important包括在内以避免特异性问题。 类也可以用作任何 CSS 预处理器的 mixin。

使用.pull-right 、 .pull-left 、 .text-right 、 .text-left代替.right 、 .left 、 .left-float 、 .right-float 。

 <div class="pull-left">...</div> <div class="pull-right">...</div>

使用文本对齐类轻松将文本重新对齐到组件。

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

不要直接自定义框架核心文件

在处理大型项目时，我发现有效使用框架的最佳方式是构建它，而不是直接自定义其核心文件。 这个概念类似于您可能用于项目的其他平台和库。

虽然，如果您正在构建一个小型站点并且有一个可能不需要太多更改或更新的设计模型，您可能会发现根据您的需要自定义框架是一个更好的选择。 例如，您可能想直接在框架文件中删除所有不需要的东西，或者您可以转到 Bootstrap 的站点自定义部分，在那里您可以轻松配置所有组件、变量和 jQuery 插件以获得您的非常自己的版本。 在这种情况下，您可能会加快站点开发并缩短样式或处理覆盖的时间。

但是，如果您开始或在一个有多个开发人员或更多开发人员的大型站点上工作 - 最好将事情分开并井井有条。 将框架文件移出主自定义 CSS 文件夹并将其保存在非编辑非版本文件夹中，并使用 Grunt 或 Gulp 插件 grunt-uncss 或 gulp-uncss 删除未使用的 CSS。 保持它独立的另一种方法是通过 CDN 提供服务。 将框架的代码分开且保持不变，可以在将其升级到最新版本时为您提供更好、更快的选择。 它还有助于最大程度地减少一些可伸缩性和样式问题，或者在通过快速持续的 UI 更改进行添加时减慢速度。

利用像 Yeoman 或 Slush 这样的脚手架工具，以及像 Bower、Python 的 pip、Node 的 NPM 或 Ruby Gems 这样的包管理器，因为它们所做的远不止将文件添加到应用程序的路径。 我真的很欣赏 Bower 的强大功能——它绝对可以做的不仅仅是下载一两个文件。 使用包管理器是一个好主意，因为您的项目的复杂性很可能会增加，并且第三方插件的数量以及您如何维护它们将变得疯狂且耗时。 Bower 将帮助您跟踪每个插件及其依赖项，包括与 Bootstrap 相关的任何内容。

利用可用的引导资源进行应用程序开发

Bootstrap 的流行带来了大量有用的资源：文章、教程、第三方插件和扩展、模板、主题构建器等等。 因此，无论您是在寻找灵感还是代码片段，您都将拥有加快进度所需的一切。

你会认为有这么多可用资源，每个人都会利用它并通过他们的项目使用它，但不管你信不信——事实并非如此。 一些开发人员通过跳过一些很棒的代码片段或资源来浪费他们的时间并减缓项目进度。 虽然您不应该只是盲目地复制和粘贴，但您必须了解好的部分并将它们用于您的编码风格和技术需求。 寻找和整理好的资源并能够有效利用它的能力也是一种技能，需要多年的经验和知识。

您将在下面找到开始使用的有用资源列表：

模板、主题和插件

Bootstrap 创建者的官方主题：themes.getbootstrap.com。

具有高级 Bootstrap 主题和模板的市场：wrapbootstrap.com、themeforest.net、creativemarket.com/themes/bootstrap。

免费引导主题和模板：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/

AngularJS

由 AngularUI 团队用纯 AngularJS 编写的 BootstrapUI。

反应JS

React-Bootstrap 是一个可重用的前端组件库。 您将通过 Facebook 的 React.js 框架获得 Twitter Bootstrap 的外观和感觉，但代码更简洁。

姜戈

Bootstrap 3 与 Django 的集成：https://github.com/dyve/django-bootstrap3

杰基尔

Jekyll-Bootstrap 是基于 Jekyll 的博客的完整博客支架。

WordPress

具有现代前端开发工作流程的 WordPress 入门主题 Sage。 基于 HTML5 Boilerplate、gulp、Bower 和 Bootstrap。

材料设计

Bootstrap 的 Material Design 是 Bootstrap 3 的一个主题，它可以让你在你最喜欢的前端框架中使用新的 Google Material Design。

结论

Bootstrap 是最好的可用框架之一，它为您提供许多出色的工具和资源，以加速和加快您的应用程序开发过程。

在设计和编写出色的 UI 时，它可以为您节省数小时/数天的工作。 每个组件和插件都通过实时示例和代码块进行了详尽的记录，以便于使用和定制。 许多开发人员强烈推荐它，并且在原型设计和生产中都非常受欢迎。 它是制作适合移动设备的响应式网站的非常好的工具。 Bootstrap 为许多类型的项目提供了一个很好的起点，可以选择将其交给设计师并说“让这个看起来很漂亮！” 他们不需要破解代码。 最重要的是，它允许您先开发结构，然后再处理字体、颜色和花哨的样式。 花时间研究它可以做什么，并聪明地了解如何以最佳方式使用它，以便您可以更快地到达您想要的地方。