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

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（并将它们返回给项目！）

Answer 2

还有一个挂起请求，其中包含针对Bootstrap 3.0和AngularUi指令的大多数问题的修复：

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

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>

这就是你可以用它们创建Tabs组件的方法：

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

不知道这是否符合您的需求，但这样您至少可以创建：制表符，手风琴，可折叠，模态和下拉菜单，而无需专用库。另请注意，它可以与引导程序2和3一起使用，因为它根本不依赖于引导程序标记。

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

3 个答案: