Bootstrap 是一个流行的前端框架，而 AngularJS 是一个流行的前端 JavaScript 框架。在使用这两个框架的过程中，经常会遇到一些兼容性问题，特别是当我们尝试在现代的 AngularJS 应用程序中使用旧版的 Bootstrap 3 时。
兼容性问题
由于 AngularJS 2 和后续版本的发布，AngularJS 团队推出了自己的 Bootstrap 指令集合，与 Bootstrap 3 相比有很大不同。这意味着如果你正在使用 AngularJS 2 或更高版本，并且希望使用 Bootstrap 样式和组件，你需要使用 Angular 官方提供的指令集合，而不是 Bootstrap 3 的指令集。
解决问题的方法
使用 Angular 官方的 Bootstrap 指令集合
AngularJS 提供了一个名为 "ng-bootstrap" 的官方库，其中包含了一组基于 Bootstrap 的原生 AngularJS 指令。这些指令与 Bootstrap 3 的指令集不同，因此您需要学习如何使用它们。
以下是一个示例代码片段，展示了如何使用 ng-bootstrap 实现弹出层：
--------- -----
----- ---------------
------
----- ---------------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
-------
------
---- -----------------------
------- ------------- ---------- ------------ ------------------------------------
------------ -------- ----------
---- ---------------------
--- ---------------------------
------- ------------- ------------- ------------------ ----------------------------- ---------
----- ---------------------------------
---------
------
---- -------------------
--
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------- --------------------
------
--------------
------
--------
--- --- - ----------------------- -------------- -----------------
------------------------ -------- -------- ---------- -
----------- - -------- --------- -
----------------
---------- -----
--------------- --------------
---------------- -------------
--------- --------
----- ----
---
--
---
---------
-------
-------使用 Bootstrap 4
另一种解决兼容性问题的方法是使用 Bootstrap 4，因为 Angular 官方的指令集合与 Bootstrap 4 的指令集合兼容。如果使用 Bootstrap 4，您可以像以前一样在 HTML 中使用 Bootstrap 类和组件。
以下是一个简单的示例代码片段，展示了如何在 AngularJS 应用程序中使用 Bootstrap 4：
--------- -----
----- -------
------
----- ---------------- -----------------------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- -----------------
-----------
---------
------
---- -----------------
---- ---------- ---------- ---------------- ---------
------
------
------
------- ------------------------------------------------------------------------------
-------
-------总结
Bootstrap 3 和当前 AngularJS 的 Bootstrap 指令集合兼
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25332