前言
使用之前要先引入bootstrap.css,bootstrap.js或bootstrap.min.js,兩種js文件的區別是一個未壓縮一個壓縮,無需全部引入。
注意:所有插件都依賴jQuery(也就是說,jQuery必須在所有插件之前引入頁面)
bootstrap引入方法:
將文件bootstrap.js或bootstrap.min.js放到所在項目的www/lib/js下
並在index.html中添加
<html ng-app='myApp'> <head> <!-- - - --> <link href='css/bootstrap.css' rel='stylesheet' type='text/css' /> <body ng-controller='MainCtrl'> <!-- - - --> <script lang='javascript' src='lib/js/jquery/jquery-1.8.2.min.js'></script> <script lang='javascript' src='lib/js/bootstrap/bootstrap.min.js'></script> <!--注意以上兩者的順序 -->
modal示例:
<body> <button ng-tap="test()" class="btn btn-primary"> Click to show the modal </button> <div class="modal fade" id="myModal" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" >×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> One fine body… </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body>
在Controller裏調用
function TestController($scope ){ $scope.test=function() { $('#myModal').modal('show'); } }
框效果如圖:
更多詳解及bootstrap的應用請參考http://v3.bootcss.com/javascript/#modal
本人仍在不斷學習中,歡迎交流指正。。。