13

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

说，这样我就可以在同一个项目中使用bootstrap两者zurb foundation？

如果是的话，有没有做过的网站的例子？

4

2 回答 2

8

答案是，这取决于。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 看起来更加开箱即用，但覆盖所有默认样式可能更加困难。这里的优点是您最初不必在设计上花费太多时间，它看起来很棒。

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

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

于 2013-09-28T06:29:28.790 回答
3

我有点同意曼诺夫斯通的观点。但现在我在我的项目中同时使用 Foundation 和 Bootstrap。当然我们都知道Foundation是基于SCSS的，Bootstrap是基于LESS的。要解决一些问题，您只需使用基于 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">...

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

于 2013-10-03T07:27:25.013 回答