CSS Bootstrap 3 与当前的 AngularJS 引导程序指令兼容吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16327846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 compatible with current AngularJS bootstrap directives?
提问by Dan Kanze
Will bootstrap 3 release be compatible with current AngularJS bootstrap directives?
bootstrap 3 版本是否与当前的 AngularJS bootstrap 指令兼容？
I want to use Bootstrap 2.3.1 directive with AngularJS:
我想在 AngularJS 中使用 Bootstrap 2.3.1 指令：
http://angular-ui.github.io/bootstrap/
http://angular-ui.github.io/bootstrap/
With the Bootstrap 3.0.0 CSS:
使用 Bootstrap 3.0.0 CSS：
https://github.com/twitter/bootstrap/tree/3.0.0-wip/
https://github.com/twitter/bootstrap/tree/3.0.0-wip/
Why?
为什么？
AngularJS team is still working on JS directives for v2.3.1 and will need time to catch up to v3.0.0. I want to start using v3 CSS grid syntax now.
AngularJS 团队仍在为 v2.3.1 开发 JS 指令，需要时间赶上 v3.0.0。我现在想开始使用 v3 CSS 网格语法。
回答by pkozlowski.opensource
So, the http://angular-ui.github.io/bootstrap/project does notdepend on Bootstrap's JavaScript (it is not wrapping it, not requiring etc.). Those are native AngularJS directives written from the ground-up to be lightweight and well integrated into the AngularJS ecosystem.
因此，http://angular-ui.github.io/bootstrap/项目不依赖于 Bootstrap 的 JavaScript（它没有包装它，不需要等等）。这些是从头开始编写的原生 AngularJS 指令，它们是轻量级的，并且可以很好地集成到 AngularJS 生态系统中。
The only adherence to the Bootstrap project is Bootstrap's markup (HTML) and CSS.
Bootstrap 项目唯一遵循的是 Bootstrap 的标记 (HTML) 和 CSS。
If you ask a question "can I grab all the directives and use them with Bootstrap 3.0" the answer is "it depends". It really depends if and how much Bootstrap 3.0 decide do change its markup and corresponding CSS classes. I would presume that markup of some controls have changed and not for some others.
如果您问“我可以获取所有指令并将它们与 Bootstrap 3.0 一起使用吗”的问题，答案是“这取决于”。这真的取决于 Bootstrap 3.0 是否决定改变它的标记和相应的 CSS 类以及改变多少。我认为某些控件的标记已更改，而其他控件的标记没有更改。
Now, the very good news with http://angular-ui.github.io/bootstrap/is that most of the HTML markup and CSS classes are encapsulated in separate AngularJS templates. In practice it means that you can grab the JavaScript code of the directives and only change markup (templates) to fit into Bootstrap 3.0.
现在，http://angular-ui.github.io/bootstrap/ 的好消息是大多数 HTML 标记和 CSS 类都封装在单独的 AngularJS 模板中。实际上，这意味着您可以获取指令的 JavaScript 代码，并且只更改标记（模板）以适应 Bootstrap 3.0。
All the templates are located here: https://github.com/angular-ui/bootstrap/tree/master/templateand by browsing them you should get an idea that it is pretty simple to update markup without messing with JavaScript. This is one of the design goals of this project.
所有模板都位于：https: //github.com/angular-ui/bootstrap/tree/master/template，通过浏览它们，您应该知道更新标记非常简单，而不会与 JavaScript 混淆。这是本项目的设计目标之一。
I would encourage you to simply give it a try and see how CSS of Bootstrap 3.0 works with the existing directives and templates. If you spot any issues you can always update templates to Bootstrap 3.0 (and contribute them back to the project!)
我鼓励你简单地尝试一下，看看 Bootstrap 3.0 的 CSS 如何与现有的指令和模板一起工作。如果您发现任何问题，您可以随时将模板更新到 Bootstrap 3.0（并将它们贡献回项目！）
回答by Jonathan Moffatt
There's a pull request pending that contains fixes for most of the issues with Bootstrap 3.0 and the AngularUi directives:
有一个拉取请求挂起，其中包含对 Bootstrap 3.0 和 AngularUi 指令的大多数问题的修复：
回答by mcasimir
Just to give you an alternative: willing to integrate Angular JS and Boostrap 3 for mobile development I've tried to overcome the bootstrap.js integration in a different way.
只是给你一个替代方案：愿意为移动开发集成 Angular JS 和 Boostrap 3 我试图以不同的方式克服 bootstrap.js 集成。
Instead to attempt to reproduce bootstrap.js behaviour exactly component by component, I basically made two general purpose directives communicating each other through events to sync the active/inactive state of two or more DOM nodes. Reflecting state trough classes makes them capable to reproduce almost all of the basic bootstrap.js components interaction.
为了尝试逐个组件地重现 bootstrap.js 的行为，我基本上制作了两个通用指令，通过事件相互通信，以同步两个或多个 DOM 节点的活动/非活动状态。反射状态槽类使它们能够重现几乎所有基本的 bootstrap.js 组件交互。
So for the most common applications you'll need only the bootstap 3 css and these few lines of js to get almost all of boostrap 3 functionalities.
因此，对于最常见的应用程序，您只需要 bootstap 3 css 和这几行 js 即可获得几乎所有 boostrap 3 功能。
You can grab the code here, it will work outside the project and you can adapt it to fit your needs: https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee.
您可以在此处获取代码，它将在项目之外工作，您可以对其进行调整以满足您的需求：https: //github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.咖啡。
It's Coffeescript but you can easily translate it to js through js2coffee.org.
它是 Coffeescript，但您可以通过 js2coffee.org 轻松将其转换为 js。
You may also want to read the docs here: http://mobileangularui.com/#toc6.
您可能还想在这里阅读文档：http: //mobileangularui.com/#toc6。
This is a simple example to show the basics of how it works:
这是一个简单的例子，展示了它是如何工作的基础知识：
<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>
And this is how you can use them to create Tabs component:
这就是您可以如何使用它们来创建 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>
As a plus you can also control the same tabs from different nodes:
另外，您还可以控制来自不同节点的相同选项卡：
<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>
Don't know if this can fit your needs but this way you can create at least: tabs, accordions, collapsibles, modals and dropdowns without the need of a dedicated library. Also note that it will work either with bootstrap 2 and 3 since it not depends on bootstrap markup at all.
不知道这是否能满足您的需求，但通过这种方式您至少可以创建：标签、手风琴、可折叠、模态和下拉菜单，而无需专用库。另请注意，它可以与 bootstrap 2 和 3 一起使用，因为它根本不依赖于 bootstrap 标记。
