UI Bootstrap 是 AngularUI Team 提供可以與 Bootstrap 結合的 AngularJS module

注意:因為 UI Bootstrap 的版面部份還是依賴 Bootstrap 的 css,因此使用前還是需要下載 Bootstrap 的 css 和 fonts

bower 安裝

bower install angular-bootstrap

注意:因為有些 module 會用到 template ,所以記得引入 ui-bootstrap-tpls.min.js

補充:Bootstrap 中,特定的 class 有時並不會是 HTML 的 a 元素,因此在畫面上就不會有滑鼠連結的指標出現,UI Bootstrap 官網建議可以自行手動補上

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

引入 AngularJS 中 引入 UI Bootstrap

var ballApp = angular.module('BallApp', ['ui.bootstrap']);

Accordion 範例

<div ng-controller="AccordionDemoCtrl">
        <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
        <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
    <label class="checkbox">
        <input type="checkbox" ng-model="oneAtATime">
        Open only one at a time
    <accordion close-others="oneAtATime">
        <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            This content is straight in the template.
        <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
        <accordion-group heading="Dynamic Body Content">
            <p>The body of the accordion group grows to fit the contents</p>
            <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
            <div ng-repeat="item in items">{{item}}</div>
        <accordion-group is-open="status.open">
                I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
            This is just some content to illustrate fancy headings.


var ballApp = angular.module('BallApp', ['ui.bootstrap']);
ballApp.controller('AccordionDemoCtrl', function($scope) {
    $scope.oneAtATime = true;

    $scope.groups = [
            title: 'Dynamic Group Header - 1',
            content: 'Dynamic Group Body - 1'
            title: 'Dynamic Group Header - 2',
            content: 'Dynamic Group Body - 2'

    $scope.items = ['Item 1', 'Item 2', 'Item 3'];

    $scope.addItem = function() {
        var newItemNo = $scope.items.length + 1;
        $scope.items.push('Item ' + newItemNo);

    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false

Categories: AngularJS