3

我正在使用最新的 Foundation (3.x)。什么是同时使用 KendoUI 并利用 Zurb 的响应功能同时获得 Kendo 的 JS 位（例如图表）的最佳方式。

有没有人有这方面的经验，尤其是移动版网站？我应该注意什么？

谢谢

4

4 回答 4

6
  1. 使用 Zurb 4 和最新的剑道 UI。
  2. 进入 Zurb 的 app.scss 文件
  3. 关闭（注释掉）这些组件：表单、自定义表单和表格

如果你发现任何奇怪的地方，你可以使用这个帮助 CSS 作为 CSS Fix，然后将这个类添加到一个包裹在你的 kendo 小部件周围的 DIV 中：

.foundation-kendo *, .foundation-kendo *:before, .foundation-kendo *:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

例如

<div class="foundation-kendo">
    <div id="grid"></div>
</div>

如果您按照第 3 步操作，上述 CSS hack 应该仍然是相当不必要的。

于 2013-05-14T23:18:36.260 回答
5

我也非常有兴趣与 KendoUI 和 Foundation 一起工作，因为我更喜欢最后一个用于响应式网站，而不是 Bootstrap。

所以我最近几天开始检查是否有可能，并且 KendoUI 和 Foundation 之间没有任何设计风格问题。好吧，出现了一些问题，这是我修复它们的方法：

使用 Foundation 4.3.1 和 KendoUI Web 2013 Q2：

  1. KendoGrid 小部件：标题太高
    • 只需删除 Foundation 中的 Table 类样式支持

  2. KendoDropDownList 小部件和类似的（即 ComboBox、DatePicker 等）和在 KendoGrid 中拖动 n'Drop：弹出窗口离文字太远，拖动 n'drop 离指针太远

    body {
    position: static;
}


*[class*="k-"] {
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
table {
    margin-bottom: 0px!important;
}

这是您必须添加的代码，以使 KendoUI 几乎一切正常（我希望，到目前为止，我还没有发现任何故障）。小心最后的代码，因为它会将样式应用于所有类以“k-”开头的标签（这是 KendoUI 团队的惯例，将“k-”放在所有名称中）。

希望这可以帮助！:)

于 2013-07-31T13:20:09.290 回答
3

您可以尝试使用刚刚发布的 Foundation 4。他们从使用 jQuery 转移到了 Zepto，这可能会消除冲突。不过，Bootstrap 没有任何问题。

于 2013-03-06T20:08:05.560 回答
2

不确定这是您想听到的答案……我也不确定这是正确的答案……但这是我的经验。

我有一个使用 Zurb Foundation 3 的现有项目。它是一个 MVC4 Web 应用程序，我们使用的是 VS2012。我们真的很喜欢 Foundation 的响应式设计……但我们想使用几个 Kendo Widget。

在没有 Foundation 的情况下使用标准 MVC 项目中的小部件进行学习/实验后，我决定尝试将 Kendo 放入带有 Foundation 的项目中。我花了半天的时间试图让它工作，但从来没有让两者一起工作。如果我把基础的东西拿出来，剑道的东西就很好用。与其花更多时间试图让这项工作正常工作，我们正在考虑可能只是转向 twitter 引导程序。

根据这个博客http: //www.kendoui.c​​om/blogs/teamblog/posts/13-01-18/easy_application_layout_with_twitter_bootstrap.aspx 剑道的东西应该可以很好地与引导程序一起工作，并且为了我们的目的，引导程序在我们的应用程序中也能正常工作正如基金会所做的那样。

祝你好运！

于 2013-01-28T22:17:37.793 回答