您好,登錄后才能下訂單哦!
前言
使用之前要先引入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> <h5 class="modal-title" id="myModalLabel">Modal title</h5> </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
本人仍在不斷學習中,歡迎交流指正。。。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。