Bootstrap 3与当前的AngularJS引导指令兼容？
引导3版本是否与当前的AngularJS引导指令兼容？
我想在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
所以， 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。 这是这个项目的devise目标之一。
我鼓励你试一试，看Bootstrap 3.0的CSS如何与现有的指令和模板一起工作。 如果您发现任何问题，您可以随时将模板更新到Bootstrap 3.0（并将它们回馈给项目！）
有一个待处理的pull请求，包含对Bootstrap 3.0和AngularUi指令的大部分问题的修复：
只是为了给你一个替代scheme：愿意将Angular JS和Boostrap 3集成到移动开发中我试图用不同的方式来克服bootstrap.js集成。
相反，试图完全按照组件来复制bootstrap.js行为，我基本上做了两个通用指令通过事件相互通信，以同步两个或多个DOM节点的活动/非活动状态。 reflection状态槽类使它们能够重现几乎所有的基本的bootstrap.js组件交互。
所以对于最常见的应用程序，您只需要bootstap 3 css和几行js即可获得几乎所有的boostrap 3function。
你可以在这里获取代码，它可以在项目之外工作，并且可以根据你的需求进行调整： https ： //github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle咖啡 。
这是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> 这就是你如何使用它们来创buildTabs组件：
<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>
不知道这是否能满足你的需求，但这样你可以创build至less：标签，手风琴，折叠，模式和下拉菜单，而不需要专门的库。 另外请注意，它可以在引导程序2和3中工作，因为它不依赖于引导标记。
