带有 Bootstrap 外观的 Angular-kendo答案

【问题标题】：Angular-kendo with Bootstrap look and feel带有 Bootstrap 外观的 Angular-kendo
【发布时间】：2014-03-26 07:00:52
【问题描述】：

我正在尝试使用 Kendo UI 和 angular-kendo 构建一个 UI。但是不想使用 Kendo CSS。想要一个 Bootstrap 集成。

以下链接提供了有关如何执行此操作的信息： docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

还有一个示例演示页面： demos.telerik.com/kendo-ui/bootstrap/

现在我们从演示页面和说明中观察到，Bootstrap 可以使用 JQuery 编码。尽管我们可以将 jQuery 作为 Kendo UI 的依赖项，但我们不想在 JQuery 中编写代码。我们只想使用 Angular 指令。

我们注意到上面显示的演示页面画了一个这样的下拉框：

 <div id="configurator-wrap" class="col-sm-9 hidden-xs">
      <div id="configurator" class="row">
                  <label class="col-sm-4">
                      <div class="description">Dimensions</div>
                      <select id="dimensions">
                      </select>
                  </label>
     </div>
 </div>

Bootstrap 要求这样的 JQuery：

 <script>
      $("#dimensions").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          value: "common",
          dataSource: [
              { text: "Default", value: "common" },
              { text: "Bootstrap", value: "common-bootstrap" }
          ],
          change: function(e) {
              var commonLink = Application.getCurrentCommonLink();
              Application.updateLink(commonLink, Application.getCommonUrl(this.value()));
          }
      });
  </script>

相反，我们希望能够使用 angular-kendo 书写下拉菜单的方式。我们将包含 Bootstrap CSS 等，它应该给 Bootstrap 外观。像这样：

<select kendo-drop-down-list>
  <option value="1">Thing 1</option>
  <option value="2">Thing 2</option>
  <option value="3">Thing 3</option>
</select>

在这个演示中给出，（但这是使用剑道 CSS 文件）：http://kendo-labs.github.io/angular-kendo/#/

【问题讨论】：

标签： twitter-bootstrap kendo-ui angular-kendo

【解决方案1】：

谈到 Kendo UI 的外观和感觉，它都是由 CSS 主题驱动的。这意味着无论您使用 jQuery 方法、AngularJS 方法还是您想采用的任何方法，主题都会驱动组件的外观。

因此，在Kendo UI Bootstrap demo 中，您会看到引用了以下 CSS 文件：

<link href="[...]/kendo.common-bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.bootstrap.min.css" rel="stylesheet">

这些都可以在 Kendo UI 的本地安装目录中找到。在这种情况下，使用 AngularJS 并没有什么特别之处。

对于这个特定的演示，您需要做的只是用 angular-kendo 版本替换 Kendo UI 组件的 jQuery 实例化。

另外，附注：如果您使用任何 Bootstrap JS 插件，您还需要 jQuery，因为它们也依赖于 jQuery。

【讨论】：