### 1.相關鏈接 模態框:[https://v3.bootcss.com/javascript/\#modals](https://v3.bootcss.com/javascript/#modals) 柵格:[https://v3.bootcss.com/css/\#grid-options](https://v3.bootcss.com/css/#grid-options) ### 2.按鈕 ``` <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog"> 添加輪播圖 </button> ``` 通過data-target="\#banner-dialog"跳轉到相應的id，并執行有相應id的部分 ``` <!-- Modal --> <div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">輪播圖</h4> </div> <div class="modal-body"> <form action="" class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">名稱:</label> <div class="col-sm-10"> <input type="text" class="form-control" name="name" placeholder="輪播圖名稱"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">圖片:</label> <div class="col-sm-7"> <input type="text" class="form-control" name="image_url" placeholder="輪播圖圖片"> </div> <button class="btn btn-info col-sm-2"> 添加圖片 </button> </div> <div class="form-group"> <label class="col-sm-2 control-label">跳轉:</label> <div class="col-sm-10"> <input type="text" class="form-control" name="link_url" placeholder="跳轉鏈接"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">權重:</label> <div class="col-sm-10"> <input type="text" class="form-control" name="priority" placeholder="優先級"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ```