線上書籍

Home

網站程式設計-PHP

  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.