Bootstrap 3与当前的AngularJS引导指令兼容吗？

Question

Bootstrap 3发布后，是否与当前的AngularJS Bootstrap指令兼容？ 我想使用AngularJS的Bootstrap 2.3.1指令： http://angular-ui.github.io/bootstrap/ 同时与Bootstrap 3.0.0 CSS一起使用： https://github.com/twitter/bootstrap/tree/3.0.0-wip/ 为什么这么做？

因为AngularJS团队仍在为v2.3.1编写JS指令，并需要时间来适应v3.0.0。我想现在开始使用v3 CSS网格语法。 https://github.com/angular-ui/bootstrap/issues/331

- Dan Kanze

Answer 1

因此，http://angular-ui.github.io/bootstrap/ 项目不依赖于Bootstrap的JavaScript（不包装它，不需要等等）。这些是原生的AngularJS指令，从头开始编写，以轻巧和良好集成到AngularJS生态系统中。 唯一与Bootstrap项目保持一致的是Bootstrap的标记（HTML）和CSS。 如果你问一个问题“我能否获取所有的指令并将它们与Bootstrap 3.0一起使用”，答案是“取决于”。它确实取决于Bootstrap 3.0决定更改其标记和相应的CSS类的程度。我认为某些控件的标记已经更改了，而其他控件则没有更改。

现在，http://angular-ui.github.io/bootstrap/ 的好消息是大多数HTML标记和CSS类都封装在单独的AngularJS模板中。实际上，这意味着您可以获取指令的JavaScript代码，并仅更改标记（模板）以适应Bootstrap 3.0。

所有模板都在此处：https://github.com/angular-ui/bootstrap/tree/master/template 通过浏览它们，您应该得到一个想法，即在不搞乱JavaScript的情况下更新标记（模板）非常简单。这是这个项目的设计目标之一。

我建议您尝试一下，看看Bootstrap 3.0的CSS如何与现有的指令和模板配合使用。如果发现任何问题，您始终可以将模板更新到Bootstrap 3.0（并将其贡献给该项目！）

- pkozlowski.opensource

---

如果您需要重命名指令，可以查看ui-alias。它也是angular-ui项目的一部分：https://github.com/angular-ui/alias - jpmorin

有一个单独的分支用于 Bootstrap 3.0，其中包含更新的模板。它似乎与 Bootstrap 3.0 CSS 配合正常。https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2 - CalM

希望大家知道，从0.9.0版本开始，它支持Bootstrap3开箱即用！ - pkozlowski.opensource

Answer 2

有一份待处理的拉取请求，其中包含修复Bootstrap 3.0和AngularUi指令大多数问题的内容：

https://github.com/angular-ui/bootstrap/pull/742

- Jonathan Moffatt

Answer 3

只是想给您提供一种替代方案：愿意集成Angular JS和Boostrap 3进行移动开发，我尝试以不同的方式克服了bootstrap.js的集成问题。

与其试图逐个组件地复制bootstrap.js的行为，我基本上制作了两个通用指令，通过事件相互通信以同步两个或多个DOM节点的活动/非活动状态。通过类反映状态，使它们能够再现几乎所有基本的bootstrap.js组件交互。

因此，对于大多数常见应用程序，您只需要bootstap 3 css和这几行js就可以获得几乎所有boostrap 3功能。

您可以在这里获取代码，它将在项目外部工作，您可以根据需求进行调整：https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee。

它是Coffeescript编写的，但是您可以通过js2coffee.org轻松将其转换为js。

您还可以阅读这里的文档：http://mobileangularui.com/#toc6。

以下是一个简单的示例，用于展示其工作原理的基础知识：

<p toggleable id="lightbulb" active-class="text-primary" class="text-default">
  <i class="fa fa-lightbulb-o"></i>
</p>

<div class="btn-group justified nav-tabs">
  <a toggle="toggle" target="lightbulb" active-class="active" class="btn btn-default" href>
      Toggle
  </a>
  <a toggle="on" target="lightbulb" class="btn btn-default" href>
      Turn On
  </a>
  <a toggle="off" target="lightbulb" class="btn btn-default" href>
      Turn Off
  </a>        
</div>

这就是如何使用它们创建标签组件的方法：

<ul class="nav nav-tabs">
<li><a href="#Tab1" toggle="on" parent-active-class="active">Tab 1</a></li>
  <li><a href="#Tab2" toggle="on" parent-active-class="active">Tab 2</a></li>
  <li><a href="#Tab3" toggle="on" parent-active-class="active">Tab 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane" toggleable active-class="active" default="active" id="Tab1" exclusion-group="myTabs">

    <h3 class="page-header">Tab 1</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab2" exclusion-group="myTabs">
    <h3 class="page-header">Tab 2</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab3" exclusion-group="myTabs">
    <h3 class="page-header">Tab 3</h3>
    <p><!-- ... --></p>
  </div>
</div>

作为额外的好处，您还可以从不同的节点上控制相同的标签页：

<div class="btn-group justified nav-tabs">
  <a class="btn btn-default" href="#Tab1" toggle="on" active-class="active">Tab 1
  </a>

  <a class="btn btn-default" href="#Tab2" toggle="on" active-class="active">Tab 2
  </a>

  <a class="btn btn-default" href="#Tab3" toggle="on" active-class="active">Tab 3
  </a>

</div>

不知道这是否符合您的需求，但通过这种方式，您至少可以创建选项卡、手风琴、可折叠内容、模态框和下拉菜单，而无需使用专用库。请注意，它不依赖于Bootstrap标记，因此适用于Bootstrap 2和3。

- mcasimir