11-4-2 Bootstrap 元件架構

1. 面板：https://kkbruce.tw/bs3/Components#panels​

         <div class="container" style="margin-top:20px;">
           <div class="panel panel-primary">
             <div class="panel-heading">
               <h3 class="panel-title">Panel title</h3>
             </div>
             <div class="panel-body">
   
             </div>
           </div>
         </div>

2. 二等分架構

                 <div class="row">
                   <div class="col-md-6">                  
                   </div>
                   <div class="col-md-6">                  
                   </div>
                 </div>

    

3. 可關閉的警告視窗
    

   <div class="alert alert-warning alert-dismissible" role="alert">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <strong>Warning!</strong> Better check yourself, you're not looking too good.
   </div>

    

4. SweetAlert for Bootstrap
   官網：http://lipis.github.io/bootstrap-sweetalert/
   安裝：下載套件，解壓縮至 class目錄下
   引入CSS
    

     
     <link rel="stylesheet" href="../class/sweet-alert/sweet-alert.css" type="text/css" /> 

   
   引入JS

    
     <script src="../class/sweet-alert/sweet-alert.js" type="text/javascript"></script>

   
   設定插件

   
     <script type="text/javascript"> 
       function op_delete_js(sn){
         swal({
           title: '確定要刪除此資料？',
           text: '相關資料通通都將會被移除！',
           type: 'warning',
           showCancelButton: 1,
           confirmButtonColor: '#DD6B55',
           confirmButtonText: '確定刪除！',
           closeOnConfirm: false ,
           allowOutsideClick: true
         },
         function(){
           location.href='nav_m.php?op=op_delete&sn=' + sn;
         });
       }            
     </script>

   列表按鈕
    

   
                 <button onclick="javascript:op_delete_js({$row.sn});" type="button" class="btn btn-danger">刪除</button>

   
    

5.