bootstrap 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 网格语法。
【问题讨论】：
标签： javascript css twitter-bootstrap angularjs twitter-bootstrap-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 2 和 3 一起使用，因为它根本不依赖于 bootstrap 标记。
【讨论】：
有一个待处理的拉取请求，其中包含针对 Bootstrap 3.0 和 AngularUi 指令的大多数问题的修复：
【讨论】：
所以，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（并将它们贡献回项目！）
【讨论】：