Twitter bootstrap 棱角剑道搭配引导式外观和手感

我正在尝试用剑道和角度剑道构建一个用户界面。但我不想使用剑道CSS。想要一个引导集成

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

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

现在，我们从演示页面和说明中看到，引导与JQuery编码一起工作。虽然我们可以将jQuery作为KendoUI的依赖项，但我们不想在jQuery中编写代码。我们只想使用角度指令

我们注意到上面显示的演示页面绘制了如下下拉框：

 <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>

 <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>

尺寸

Bootstrap要求使用如下JQuery：

 <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>

 <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>

$（“#维度”）。kendoDropDownList({
dataTextField:“文本”，
dataValueField:“值”，
值：“普通”，
数据源：[
{text:“Default”，value:“common”}，
{文本：“引导”，值：“公共引导”}
],
更改：功能（e）{
var commonLink=Application.getCurrentCommonLink（）；
Application.updateLink（commonLink，Application.getCommonUrl（this.value（））；
}
});

相反，我们希望能够使用有角度的剑道书写方式下拉列表。我们将包括引导CSS等，它应该给引导看看。 像这样：

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

事情1
事情2
事情3

---

如本演示所示（但这是使用剑道CSS文件）：

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

因此，在中可以看到以下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合作没有什么特别的

对于这个特定的演示，您只需将剑道UI组件的jQuery实例化替换为角度剑道版本

另外，请注意：如果您使用任何引导JS插件，您也需要jQuery，因为它们也依赖于jQuery