废话不说,直接上代码。可直接看效果,对着分析。。今天算是bootstrap 入门了,开心。。
突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了。
<html ng-app="app"> <head> <script src="../lib/js/angular.js"></script> <script src="../lib/js/ui-bootstrap-tpls-0.13.0 (1).js"></script> <link href="../lib/bootstrap-3.3.4/css/bootstrap.css" rel="stylesheet"> </head> <body> <div ng-controller="appController"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3>I'm a modal!</h3> </div> <div class="modal-body"> <span>Message:{{message}}</span> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item=item">{{ item }}</a> <!--<a ng-click="test(item);">{{ item }}</a>--> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> </script> <button class="btn btn-default" ng-click="showModal()">Open me!</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> <div class="col-xs-6"> <div class="well well-sm">I start to learn bootstrap css frow now on!!</div> <div class="well well-lg">I start to learn bootstrap css frow now on!!</div> <div class="well ">I start to learn bootstrap css frow now on!!</div> </div> <div class="col-xs-6"> <div class="panel panel-default panel-primary" > <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> </div> <div class="col-xs-6"> <div class="panel panel-default panel-success"> <div class="panel-heading"> <h1 class="panel-title">Panel title</h1> </div> <div class="panel-body"> Panel content </div> </div> </div> <div class="col-xs-6"> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">Panel title</h1> </div> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div> </div> <div class="col-xs-6"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> <div class="col-xs-6"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> <div class="col-xs-6"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> </ul> </div> </div> <div class="col-xs-6"> <div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> </div> <div class="col-xs-6"> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Star </button> </div> <div class="col-xs-6"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <table class="table"> <tr> <th>#</th> <th>Month</th> <th>Savings</th> <th>Savings</th> </tr> <tr> <th>1</th> <td>January</td> <td>$100</td> <td>$100</td> </tr> <tr> <th>2</th> <td>January</td> <td>$100</td> <td>$100</td> </tr> <tr> <th>3</th> <td>January</td> <td>$100</td> <td>$100</td> </tr> <tr> <th>4</th> <td>January</td> <td>$100</td> <td>$100</td> </tr> </table> </div> </div> </div> </body> <script> angular.module('app', ['ui.bootstrap']). service('DataService', ['$rootScope', function($rootScope) { this.data = {}; this.data.message = 'This is a message from a service'; this.data.items = ['item1', 'item2', 'item3']; } ]). controller('myModal', ['$scope', '$modalInstance', 'DataService', function($scope, $modalInstance, dataService) { $scope.data = dataService.data; $scope.message = dataService.data.message; $scope.items = dataService.data.items; $scope.selected = { item: $scope.items[0] }; $scope.test = function(item){ $scope.selected.item = item; } $scope.ok = function() { $modalInstance.close($scope.selected.item); }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; } ]). controller('appController', ['$scope', '$modal', '$log', function($scope, $modal, $log) { // $scope.data = dataService.data; $scope.showModal = function() { var modalInstances = $modal.open({ templateUrl: 'myModalContent.html', controller: 'myModal' }); modalInstances.result.then(function(selectedItem) { $scope.selected = selectedItem; },function(){ $log.info('Modal dismissed at :'+new Date()) }) }; } ]); </script> </html>