美洲杯在哪买球关于---构建 Twitter BootStrap---文章

 

前言

美洲杯在哪买球 1

  Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。可以说是快速开发Web应用程序的前端工具包,正如Bootstrap中文网上所说它是简洁、直观、强悍的前端开发框架,目的是为了让web开发更迅速、简单。

一年半前,我所在的Twitter内部小组开始着手改良团队内部使用的分析管理工具。项目早期,大家围绕这一产品开了一些会议。之后,我们有了更大的野心: 为什么不把这个工具箱的用户群可以扩展到整个Twitter公司,甚至更广呢?我们说干就干,先着手规划一个基础系统,让我们这类人可以在它之上建立新项目,Bootstrap就从构思中跳了出来。

优点

我和Jacob ThorntonBootstrap创建这个前端工具箱,是想帮助设计和开发人员能够快速有效地创建神奇的在线应用。我们的目标是提供精致,文档良好,可扩展的库,它由使用HTML,CSS和JavaScript搭建的灵活的组件构成,其他人可以基于这个库进行构建,改革创新自己的项目。今天,它已发展到包括几十个组件,并在GitHub上有超过13,000关注者(watcher)和2,000开发分支(fork), 成为那里最流行的项目。

  1.  Bootstrap使开发效率极大提高

在这里,我们将阐明Bootstrap的诞生的原因,制作流程,以及它是如何成长设计系统的。

  Bootstrap的组件库中包含很多现成的代码片段,可以即取即用,是开发更为灵活,Web开发者不必再花费时间去编写和调试这些通用的代码片段。

这是个好机会

  2.  与平台无关

以前Twitter的一些内部工具,设计上不够精致和易用,而且发现难以用它们进行开发或快速迭代。不同团队的人都认识到这个问题,对于目前和将来的项目来说这是个极好的解决时机。有了此共识,我们在开始时就制定了在设计和开发间相互协作的粗略流程。

  Bootstrap实际上是html、css和javascript的封装集合,因此你无需在学习其他新的东西,只需将用到的代码片段其插入到文档中,即可使用。使用Less(Less是一个动态CSS语言框架,基于自己的JS引擎或者服务器端对传统的CSS进行了动态的扩展,使得Less具有更强大的功能和灵活性。Bootstrap 中有一套编辑好的Less框架,开发者可以将其应用到自己的项目。)

从更高的视角来看,我们的流程开始时是这个样子:

    3.  响应式布局

1 几个内部工具开发者与产品经理及工具的潜在用户一起工作,来确定关键的功能(functionality)和特性(feature)。

  通过使用流媒体网格布局,响应式设计更是运用自如。所有的一切都在运行,享受网格的强大功能,在每个重要的视图宽度端口查看流畅度。Bootstrap使得移动开发更加容易,因为你无需为每个新的屏幕宽度更改标记。

2 我与开发者合作,来确定我们的需求,接着设计这些,让它们在浏览器中能够有一致的视觉表达方式,探究其互动行为。得到首个实现后,在继续前进之前,我们讨论了每个组件,仔细权衡其它意见和实现。

   4.  可定制化

3 之后,我们为原来规划的新内部工具项目,设计和编写分离的组件。这段时间内,我们快速实现,测试,并迭代每个新特性。

  定制化功能允许你完全控制你想要使用的那个功能,根据所需来简化框架。如果没有足够的控制权,你可以通过获取源代码来优化它。

4 最后,作为后续工作,我把这些相同的组件,从内部工具项目中提取出来并加入到共享代码库(Bootstrap),提炼它们并增加文档,供其他项目使用。

   5.  界面一致性

最终总结出一个核心理念: 设计师与开发者结对。与开发者的持续互动启发了Bootstrap,并推动了一年多的开发。从白板想法到编写粗略的原型,跨职业的合作让Bootstrap成功地在Twitter内部应用起来。这个过程几乎影响每个Bootstrap特性的开发,随着时间的推移,效果越来越好。

  Twitter当初开发该工具的最主要原因是,开发者所开发项目在不同浏览器间的不一致性。这就导致了很多前端开发与最终用户界面之间的问题。Bootstrap保证了界面在不同平台上的统一性。在IE、Chrome及Firefox中,你可以看到统一的界面。

建立Bootstrap,沟通是关键,大多数设计工作体现在代码中。Bootstrap最终交付的毕竟是代码,尽可能地频繁沟通我们的想法就是最值得做的事情。好的开发者要把这句话放在心里: 简洁组件是好的,但可见的完美和统一要达到专业设计师的水准。

    6.  其它特性

一个例子

  Bootstrap大量使用了时下比较流行的html5和css3技术,且这两种技术会是以后web前端的主流技术且Bootstrap具有比较详细的中文文档,在包含的   javascript组件方面使用也及其方便。

 

  

美洲杯在哪买球 2

缺点

图1:第一版Bootstrap的悬停触发下拉菜单。

    1.  不遵循最佳实践规则

先来看看Boostrap的一个特性:下拉菜单。为了收纳当前会话的信息,让出工具的其它区域,得要用下拉菜单。不计其数的人在他们的应用程序中使用下拉菜单,每个都用了不同的实现,不一样的交互和视觉设计,那我们要如何着手呢?按照上面的纲要,特性就像下面这样来到Boostrap中:

  使用Twitter Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一,HTML不再有语义,而且内容和表示不再分离。

5 我们认识到正在使用的固定顶栏有太多的导航链接和动作;可以伸展开并有多层结构的下拉菜单似乎可以解决这个问题。

  2.  结构太过臃肿

6 我们一起来确定这么多的链接和动作要占据一开始的位置和需要支持多层的理由。

  Bootstrap包含比较多的css和javascript。如果你想要使用Twitter Bootstap的所有功能,你应该好好考虑资源的加载时间。

7 讨论过后,我们决定重新安排顶栏,删除一些链接,实现没有多层支持的下拉菜单。当时这样做的意思是避免额外的代码搅乱我们的实现。

    3.  不支持sass

8 下一步,我们写了下拉菜单中基本的HTML和CSS部分,悬停 :hover。我们在工具的代码库内推敲视觉细节,然后将它们提炼到Bootstrap并添加文档。

  通过BootStrap使用Less构建,原生不支持Compass和SASS。Less有很多优点。但是SASS相对较好的是,带有一个类似于Compass的框架,使用它好像完全不需要过多的考虑。

美洲杯在哪买球,9 进行到Bootstrap提炼的最后一步,我们选择点击,而不是靠悬停来触发行为。我们发现,这样可以让用户避免迷惑和意外点击,提供更好的体验。

   4.  可定制

大多数组件和许多周边细节的精细设计和构建都是设计师与开发人员组对儿参与的。我们添加新特性或设计组件最终形成这样的流程,想法,讨论和功能的审查,实施,最后提炼和文档化。靠着这个流程,我们才能比较顺利开发内部工具,避免特性蔓生和代码膨胀,帮我们搞明白并记录下来不仅有如何使用一个组件,还有为什么要使用这特定的Bootstrap组件的理由。

  定制化功能允许你完全控制你想要使用的那个功能,根据所需来简化框架。如果没有足够的控制权,你可以通过获取源代码来优化它。

这样新特性从自然已有的延伸出来。如果有特性需要进行修改或删除,我们按照同样的流程:想法,审查,实现和文档化。继续这个例子,围绕下拉菜单,我们已收到大量反馈,并考虑重新支持多层。由于Web应用程序的行为越来越象桌面,使用多级下拉菜单就很有意义,支持多层是合理的要求。当然,我们可以简单地推倒我们先前的决定,但这个流程让我们对用户和他们的需求保持诚实,中肯和负责的态度。

   5.  创新性比较困难

并行开发

  Bootstrap 追求的是效率开发web,创意往往在短时间内定的或者直接那它的用的。在受限的时间里,在Bootstrap结构化的环境中,实现打破常规的创新设计是很难的。

几乎所有的特性都是在这个流程下开发的,这表明我们决定要超越只是构建一个工具的重要决定。并行开发意味着我们要和没有接触到我们的流程或不了解我们工作的人进行有效的沟通。

总结

虽然我们都忙于创建产品路线图,确定单个项目的目标,我们也会积极考虑别人如何使用相同的组件。组件的提炼和文档化, 成为我们构建这个工具和Bootstrap串联起来流程的一部分。总的来说,我们节省了时间和精力,更清楚地讨论增加(有时删除)特性的意义,并调整自己应对未来更大的项目。

  ......Bootstrap我还是推荐用,因为它的UI和组件规范还是不错的...... 

开发几个星期后,我们就开始把这个活的文档作为“风格指南形式的工具包。”我们已达成的目标是通过Bootstrap传达我们的工作,这使Bootstrap迅速成长,任何人都可用。


本文由美洲杯在哪买球发布于计算机教程,转载请注明出处:美洲杯在哪买球关于---构建 Twitter BootStrap---文章

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。