---

AngularJS Bootstrap是AngularJS和Twitter Bootstrap的结合体，为AngularJS应用提供了一系列的UI组件和指令。本文将详细介绍AngularJS Bootstrap的用法和注意事项。

1. 安装

可以通过Bower或NPM安装AngularJS Bootstrap：

bower install angular-bootstrap

npm install angular-bootstrap

也可以通过CDN直接引入：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

2. 引入

在AngularJS应用中引入ui.bootstrap模块：

angular.module('myModule', ['ui.bootstrap']);

3. 组件

AngularJS Bootstrap提供了众多的UI组件和指令，接下来将分别介绍它们的用法和注意事项。

3.1 按钮

按钮组件用于创建可点击的按钮：

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

3.2 下拉框

下拉框组件用于创建可选择的下拉框：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li ng-repeat="item in items" ng-click="selectItem(item)"><a href="#">{{item}}</a></li>
  </ul>
</div>

注意事项：dropdown组件需要Bootstrap的JavaScript插件支持。如果使用ui.bootstrap模块直接引入即可；如果单独使用，需要手动引入bootstrap.js和jquery.js。

3.3 标签页

标签页组件用于创建可切换的标签页：

<uib-tabset>
  <uib-tab heading="Tab 1">
    Tab 1 content
  </uib-tab>
  <uib-tab heading="Tab 2">
    Tab 2 content
  </uib-tab>
</uib-tabset>

注意事项：tabset组件需要引入ui.bootstrap模块。

3.4 模态框

模态框组件用于创建可弹出的模态框：

<uib-modal ng-controller="ModalController as modal">
  <div class="modal-header">
    <h3 class="modal-title">Modal title</h3>
  </div>
  <div class="modal-body">
    Modal content
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="modal.close()">Close</button>
  </div>
</uib-modal>

注意事项：modal组件需要引入ui.bootstrap模块，并通过ng-controller来控制它的行为。

4. 总结

AngularJS Bootstrap为开发者提供了强大的UI组件和指令，使得AngularJS应用开发变得更加高效和易于维护。在使用过程中需要注意Bootstrap的JavaScript插件支持和组件的正确引用方式。