Angular UI Bootstrap 教程

2026-01-18 09:47:25作者：田桥桑Industrious

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

项目地址：https://gitcode.com/gh_mirrors/boot/bootstrap

项目介绍

Angular UI Bootstrap 是一个基于 AngularJS 的开源前端框架，它提供了 Bootstrap 3 和 4 的 Angular 指令。这个项目的目标是让开发者能够使用 AngularJS 来构建响应式的、移动优先的 Web 界面，同时利用 Bootstrap 的样式和组件。

Angular UI Bootstrap 提供了许多常用的 UI 组件，如模态框、下拉菜单、标签页、工具提示等，这些组件都是通过 Angular 指令来实现的，因此可以更好地与 AngularJS 应用集成。

项目快速启动

要开始使用 Angular UI Bootstrap，首先需要确保你的项目中已经包含了 AngularJS 和 Bootstrap 的库。以下是一个简单的快速启动示例：

安装依赖

你可以通过 Bower 或 npm 来安装 Angular UI Bootstrap：

bower install angular-ui-bootstrap

或者

npm install angular-ui-bootstrap

引入文件

在你的 HTML 文件中引入必要的文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="MyController">
        <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
        <div uib-modal-window="modal-instance" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body…</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-click="close()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script>
        var myApp = angular.module('myApp', ['ui.bootstrap']);
        myApp.controller('MyController', function ($scope, $uibModal) {
            $scope.open = function () {
                $uibModal.open({
                    templateUrl: 'modalContent.html',
                    controller: 'ModalInstanceCtrl'
                });
            };
        });

        myApp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
            $scope.close = function () {
                $uibModalInstance.dismiss('cancel');
            };
        });
    </script>
</body>
</html>