如何集成 bootstrap-3.0.1 和 AngularJS？

Posted 2023-03-06

【中文标题】如何集成 bootstrap-3.0.1 和 AngularJS？

【英文标题】：How to integrate bootstrap-3.0.1 and AngularJS?

【发布时间】：2013-11-11 15:30:57

【问题描述】：

我有一个项目应该同时使用 AngularJS 和 Bootstrap(http://getbootstrap.com/) 来获取警报和进程指示器。

但是当我包含 Bootstrap 的 css 文件时，它会混合 Application，其他 css 文件的定义似乎被覆盖了。

这两个框架应该如何在同一个应用程序中使用？

我已经尝试了我所知道的几乎所有东西，但没有成功地将这两者结合到同一个应用程序中。

最好的问候，

【问题讨论】：

也看看这个问题：***.com/q/16327846/79485

这个问题的答案将帮助你理解潜在的问题：***.com/q/19350661/79485

鉴于上面的 cmets，我不得不说我将两者混合没有问题，并且没有使用任何引导程序特定的指令：您可以在这里查看我的项目：quir.li

【参考方案1】：

不要。 Bootstrap 基于 jQuery 驱动的思想，它从根本上组件化为 DOM 操作的隔离状态机。 Angular 基于一个完全不同的思维过程，基于 Angular $digestion 和 html 编译。

如果您必须将它们组合起来，请仅使用 CSS。拥有两组状态机和一个适配器会引入开销和不需要存在的人为错误的空间。我建议编写自己的 Angular 指令，利用 Bootstraps CSS，但不要尝试在 JS 级别将两者集成到一个应用程序中。

已经有一些项目试图通过指令来做到这一点，这是一个好主意。我建议使用不依赖 jQuery 并且是原生 Angular 实现的 bootstrap 指令项目，而不是将 Bootstrap 的 jQuery 代码改编成 Angular。

不是这个：https://github.com/mgcrea/angular-strap/blob/master/src/directives/button.js 但是这个：http://angular-ui.github.io/bootstrap/ 或写下你的 拥有！

---

更新 现在有一个纯角度版本的引导程序。在这里找到它 -> http://mgcrea.github.io/angular-strap/

【讨论】：

您好，感谢您的回答！我将尝试使用 Angular 引导程序。兄弟，

嘿@user2707924，这对你有用吗？如果您发现我的建议有帮助，请通过绿色复选标记接受此答案。

这个答案现在已经过时了。 AngularStrap 现在是使用 AngularJS 1.2+ 重新实现的 Bootstrap javascript，利用了ngAnimate。唯一的依赖是 Bootstrap 3.0+ CSS 和 AngularJS 1.2.9+。 UI Bootstrap（由 AngularUI 团队提供）目前基于 AngularJS 1.0.8+。

【参考方案2】：

bootstrap 3.0 有一个单独的分支，其中包含更新的模板。它似乎正在使用 Bootstrap 3.0 CSS：http://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2。

引用https://***.com/users/1232563/calm关于这个问题Bootstrap 3 compatible with current AngularJS bootstrap directives?

【讨论】：

感谢分享信息！我会检查那个项目和文章，Br