将UI框架Zurb Foundation与Twitter Bootstrap混合使用

Question

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

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

如果是,是否有任何已经完成的网站示例？

Answer 1

答案是,这取决于.基础4允许您使用表达类.large-12 .columns或sass mixins.您还可以定义_settings.scss应生成哪些特定的表示类.如果您直接使用mixins,则根本不需要生成任何表示类.

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

然后是JavaScript.Zurb Foundation默认使用Zepto(或尝试).Bootstrap 3是否兼容是值得怀疑的,但此时要做到这一点还有一些工作要做.您需要强制页面使用jQuery.

一旦完成,也许Foundation和Bootstrap可能会很好用,或者它们可能根本不起作用.您可能希望单独选择每个javascript文件.Zurb Foundation自动提供此功能,非常精细.默认情况下,Bootstrap 3不会执行此操作,您必须直接包含/js目录中的javavascript文件并删除对该bootstrap.js文件的引用.

一旦说完就完成了,你可能会考虑为什么要混合这两个框架.它是一个元素而不是另一个吗？是设计还是造型？我会考虑选择一个框架来完成您想要开箱即用的大部分工作.然后在Sass或Less中设置样式,或使用提供类似功能的jQuery插件.

根据我的经验,Zurb Foundation更多的设计不可知.这意味着如果您有设计,或者您是一名设计师,它可以让您实现您想要做的事情,那么它可以提供更好的体验.Bootstrap看起来设计得更好,但是覆盖所有默认样式可能更加困难.这里的优点是你不必花费很多时间在设计上,它看起来很棒.

这两个框架都很棒,并提供了现代网站或应用程序所需的许多功能.两者都完全响应,并且都允许Mobile First方法.如果你学习了一个很容易使用另一个,那只是语法问题.

我不知道任何实现两个框架混合的网站.我认为这是因为我上面描述的一些问题.