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（或尝试）。它是questionable Bootstrap 3是否兼容，但此时要做到这一点还有一些工作要做。您需要强制页面使用jQuery。

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

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

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

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

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

Answer 2

我有点同意manofstone。但是现在我正在为我的项目使用Foundation和Bootstrap。当然，我们都知道Foundation是基于SCSS和LESS上的Bootstrap。要解决一些问题，您只需使用基于SCSS的Bootstrap。以下是可以下载的链接：

Thomas McDonald的Sass / Bootstrap

Alademann的Sass / Bootstrap

由您决定使用哪种工作。阅读他们的文件。至于我，我正在使用麦当劳的工作。我使用Foundation作为我的主要响应框架，我只使用Bootstrap的效果（JS）。我还使用了Kube的一些功能。 Kube是另一个CSS框架。以下是我在HEAD标签中设置内容的方法：

<link rel="stylesheet" type="text/css" href="css/foundation/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/kube/kube.css" />
<link rel="stylesheet" type="text/css" href="css/kube/master.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/foundation/foundation.css" />
<link rel="stylesheet" type="text/css" href="css/Index.css" />
<script src="js/vendor/custom.modernizr.js"></script>

以下是我使用Foundation和Bootstrap的示例：

<div class="row">
<div class="large-12 columns">
<div class="large-10 columns" id="slideshow">
    <div class="carousel slide auto" id="picz" >
    <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#picz" data-slide-to="0" class="active"></li>
            <li data-target="#picz" data-slide-to="1"></li>
            <li data-target="#picz" data-slide-to="2"></li>
        </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">...

这些是我项目的实际代码，所以我不会发布所有内容。希望它有所帮助。

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

2 个答案: