1. 引入 Bootstrap 的 CSS 文件：
在你的 HTML 文件中引入 Bootstrap 的 CSS 文件。你可以通过 CDN 或下载 Bootstrap 文件然后本地引用。
<!-- 使用 CDN 引入 Bootstrap CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
2. 引入 AngularJS 文件：
同样，在 HTML 文件中引入 AngularJS 的文件，你可以通过 CDN 或下载 AngularJS 文件然后本地引用。
<!-- 使用 CDN 引入 AngularJS 文件 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
3. 在 AngularJS 应用中引入 Bootstrap 模块：
在你的 AngularJS 应用中，引入 Bootstrap 模块，以便可以使用 Bootstrap 的组件。
var app = angular.module('myApp', ['ui.bootstrap']);
这里我们使用了 'ui.bootstrap' 模块，它是 Angular UI 团队提供的 AngularJS 版 Bootstrap 模块。
4. 使用 Bootstrap 组件：
现在，你可以在 AngularJS 应用中使用 Bootstrap 的组件，比如模态框、警告框等。确保在使用之前按照它们的文档进行相应的配置。
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-primary" ng-click="openModal()">打开模态框</button>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function ($uibModal, $scope) {
$scope.openModal = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html', // 模态框的 HTML 文件
controller: 'ModalInstanceCtrl', // 模态框的控制器
});
};
});
// 模态框的控制器
app.controller('ModalInstanceCtrl', function ($uibModalInstance) {
// 控制器的逻辑
});
</script>
</div>
这是一个简单的例子，打开了一个使用 Bootstrap 模态框的按钮。确保在你的项目中包含了 Bootstrap 的 JavaScript 文件，以便支持一些需要 JavaScript 功能的 Bootstrap 组件。
请注意，AngularJS 和 Bootstrap 的版本可能会影响集成的细节，最好查阅它们的官方文档以获取最新的信息。同时，由于 AngularJS 已经进入维护模式，建议考虑迁移到现代的 Angular 版本或其他前端框架。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4871/Angular