混合UI框架Zurb Foundation和Twitter Bootstrap

Deepankar Bajpeyi

可以混合使用不同的UI框架吗?

再说了,这样我可以同时使用bootstrap,并zurb foundation在同一个项目?

如果是,是否有做过网站的示例?

詹姆斯·斯托尼科

答案是,这取决于。Foundation 4允许您使用表示性类.large-12 .columns或Sass Mixins。您还可以在_settings.scss其中定义应生成哪些特定的表示形式类。如果直接使用mixins,则根本不需要生成任何表示类。

另一方面,Bootstrap使用Less。这是一项类似的技术,但与Sass / Scss不兼容。我知道Bootstrap 3也具有Less Mixins的类似功能。这意味着您将需要创建某种构建脚本/文件,以将两个css文件放在一起或在页面上包含两个生成的文件。

然后是JavaScript。Zurb Foundation默认使用Zepto(或尝试使用)。这是有问题的引导3是否兼容与否,但在这一点上,工作一段时日才能下去。您需要强制页面使用jQuery。

一旦完成,Foundation和Bootstrap可能会表现不错,或者它们根本无法工作。您需要单独选择每个javascript文件。Zurb Foundation自动提供此功能,并且非常精细。Bootstrap 3默认情况下不执行此操作,您将必须/js直接目录中包含javavascript文件,并删除对该bootstrap.js文件的引用

说完这些之后,您可能会考虑为什么要混合这两个框架。它是一个元素而不是另一个元素吗?是设计还是样式?我会考虑选择开箱即用的框架,该框架可以完成大多数您想做的事情。然后使用Sass或Less设置其样式,或使用为您提供类似功能的jQuery插件。

以我的经验,Zurb Foundation与设计无关。这意味着如果您有设计,或者您是设计师,它可以为您提供更好的体验,从而使您能够准确地实现想要做的事情。Bootstrap看起来更加开箱即用,但是覆盖所有默认样式会更加困难。这样做的好处是,您一开始不必花很多时间在设计上,它看起来很棒。

这两个框架都很棒,并提供了现代网站或应用程序所需的许多功能。两者都是完全响应的,并且都允许使用“移动优先”方法。如果您学习一种语言,则很容易使用另一种语言,这只是语法问题。

我不知道有哪个网站实现了两个框架的融合。我认为这是由于我上面描述的一些问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Zurb Foundation是否比Twitter Bootstrap更好?

来自分类Dev

命名Bootstrap和Foundation CSS框架

来自分类Dev

Bootstrap和Foundation与MVC框架的集成

来自分类Dev

PWT框架:Twitter Bootstrap版本

来自分类Dev

Zurb Foundation的jQuery UI主题?

来自分类Dev

如何使用Twitter Bootstrap制作2(框架?)?

来自分类Dev

在Zurb Foundation中是否有与Bootstrap的img响应等效的功能?

来自分类Dev

在代码Igniter PHP项目中使用Zurb Foundation / Bootstrap

来自分类Dev

使用Zurb Foundation CSS框架居中CSS

来自分类Dev

Zurb Foundation框架无法正常工作

来自分类常见问题

Bootstrap,Twitter Bootstrap和Bootstrap 3有什么区别?

来自分类Dev

Bootstrap-混合容器和容器流体

来自分类Dev

Bootstrap-混合容器和容器流体

来自分类Dev

如何启用和禁用Twitter Bootstrap按钮?

来自分类Dev

角度样板和Twitter Bootstrap 3

来自分类Dev

Twitter Bootstrap 3内联和水平形式

来自分类Dev

Twitter Bootstrap减小阱和场的宽度

来自分类Dev

Twitter Bootstrap 3行和重新排序

来自分类Dev

Twitter Bootstrap和Ruby on Rails的警报/错误

来自分类Dev

Twitter Bootstrap减小阱和场的宽度

来自分类Dev

Spring MVC和Twitter Bootstrap模板

来自分类Dev

Zurb Foundation 6使用网格-列-行混合

来自分类Dev

ui-bootstrap-tpls和ui-bootstrap

来自分类Dev

ui-bootstrap-tpls和ui-bootstrap

来自分类Dev

使用棘轮框架(twitter-bootstrap)的模式菜单问题

来自分类Dev

404使用UI-Bootstrap和Plunker

来自分类Dev

jQuery UI .resizable()和Bootstrap冲突

来自分类Dev

Angular UI,Bootstrap Navbar折叠和Javascript

来自分类Dev

Bootstrap崩溃和UI路由器