編輯cms_banners.html, 在{% block main_content%}中加上表給內容如下

{% block main_content %} <table class="table table-bordered"> <thead> <tr> <th>名稱</th> <th>圖片鏈接</th> <th>跳轉鏈接</th> <th>優先級</th> <th>創建時間</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>11</td> <td><a href="#" target="_blank">測試數據</a></td> <td><a href="#" target="_blank">測試數據</a></td> <td>測試數據</td> <td>測試數據</td> <td> <button class="btn btn-default btn-xs edit-banner-btn">編輯</button> <button class="btn btn-danger btn-xs delete-banner-btn">刪除</button> </td> </tr> </tbody> </table> {% endblock %}
然后我們需要在表格上面添加一個"添加輪播圖"按鈕

{% block head %} <style> .top-box button{ float: right; } .top-box{ overflow: hidden; background: #ecedf0; padding: 10px; } </style> {% endblock %} {% block main_content %} <div class="top-box"> <button class="btn btn-warning" >添加輪播圖</button> </div> {% endblock %}
.去boostrap v3中文站找到模態框的示例代碼,拿來復制到{% block main_content%}中的下面,把自帶的按鈕去掉,文件換成中文如下:
然后在輪播圖按鈕那里加上data-toggle和data-target, data-targer配置的是模塊框中的id
<button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加輪播圖</button>
這樣,當我們點擊添加輪播圖,就會彈出模態框了
然后在模態框“model-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" id="upload-btn">添加圖片</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="number" class="form-control" name="priority" placeholder="優先級"> </div> </div> </form>