混合使用UI框架：Zurb Foundation和Twitter Bootstrap

Question

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

比如说，我可以在同一个项目中同时使用bootstrap和zurb foundation吗？

如果可以，有没有任何已经这样做的网站的例子呢？

- Deepankar Bajpeyi

Answer 1

答案是，这取决于具体情况。Foundation 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默认外观更加精美，但覆盖所有默认样式可能更加困难。优点在于您最初不必花费太多时间在设计上，看起来非常出色。

这两个框架都非常出色，提供了现代网站或应用所需的许多功能。两者都完全响应，并且都允许移动优先的方法。如果您学会了其中一个，使用另一个就非常容易，只是语法的问题。

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

- JAMESSTONEco

---

只是为了跟进，这里有一篇很棒的文章比较了Foundation 4和Bootstrap 3。 - JAMESSTONEco

Answer 2

我有点同意manofstone的看法。但是目前我的项目中同时使用了Foundation和Bootstrap。当然，我们都知道Foundation基于SCSS，而Bootstrap则基于LESS。为了解决一些问题，你只需要使用基于SCSS的Bootstrap。以下是下载链接：

Thomas McDonald的Sass/Bootstrap

Alademann的Sass/Bootstrap

你可以选择使用哪个工作。阅读它们的文档。至于我，我使用McDonald的工作。我使用Foundation作为我的主要响应式框架，只使用Bootstrap的效果（JS）。我还使用了Kube的某些特性。这是我在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">...

这些是我的项目的实际代码，我不会发布全部内容。希望能在一定程度上帮助您理解。

- Melodic Crypter