使用Bootstrap加速应用程序开发

本文概述

• 了解Bootstrap程序
• 不要直接自定义框架核心文件
• 利用可用的Bootstrap资源进行应用程序开发
• 总结

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

使用Bootstrap加速应用程序开发的最佳实践

鸣叫

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

在过去的四年中, 我个人一直在90％的项目中使用此框架。在本文中, 我想与你分享一些技巧, 这些技巧可以帮助你加快应用程序开发速度, 而不会丢失某些Bootstrap的出色功能。

了解Bootstrap程序

即使它是一个非常容易上手的框架, 也不要被它的简单性所迷惑。在着手进行项目之前, 请花时间研究框架, 并深入了解其基础架构的关键部分和令人兴奋的组件。这将有助于避免10个最常见的Bootstrap错误。

花费一个小时来阅读Bootstrap网站上的文档, 或者从srcmini博客上的精彩文章” Bootstrap？”中了解更多信息。关于什么, 为什么和如何的简短教程。而且, 在scotch.io上, 你可能不知道的很棒的文章Bootstrap 3技巧和窍门。

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

深入研究页面结构, 了解布局的构造方式。

<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参考-所有这些均带有” Try it Yourself”示例：

• Bootstrap的网格系统说明：Bootstrap中的网格
• 基本的CSS类：印刷术, 按钮, 表单和表单元素, 助手类, 图像, 表格
• 单个组件：字形图标, 下拉列表, 导航。

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

了解有关Bootstrap组件的更多信息将有助于避免样式表膨胀

鸣叫

在由多个开发人员组成的团队中工作时, 这一点尤其重要。确保在将新设计转换为代码时, 不会一次又一次地写大量重复的代码, 从而在相同情况下创建太多样式。保持UI开发的一致性并使用UI样式指南对其进行很好的文档化, 还可以为生产团队带来更多的麻烦。此外, 你会发现在向应用程序中添加新功能或页面时, 你将以更少的挫败感前进。我参与了十几个大型项目, 相比之下, 我看到了很多情况下该框架确实遭到黑客入侵的情况, 并且每次添加新的CSS代码都会破坏其他页面上的UI。遍历所有站点并修复这些类型的错误将非常耗费精力。不仅如此, 还要考虑成本和所有花费在额外开发人员时间和质量检查帮助上的金钱。

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的流行, 大量有用的资源包括：文章, 教程, 第三方插件和扩展, 模板, 主题构建器等。因此, 无论你是寻找灵感还是代码片段, 都将拥有加速进度所需的一切。

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

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

模板, 主题和插件

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

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

免费的Bootstrap主题和模板：startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net / free-templates。

” Big Badass列表”-319个有用的Bootstrap资源列表：bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

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

ReactJS

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

Django的

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为你提供了许多类型项目的良好起点, 你可以选择将其交给设计人员并说”看起来很漂亮！”。无需他们破解代码。最重要的是, 它允许你先开发结构, 然后再解决字体, 颜色和花式样式。花时间研究它可以做什么, 并明智地以最佳方式使用它, 以便你可以更快地到达所需的位置。