Flask实战第50天：cms添加轮播图的模态对话框制作

Posted 2021-01-01 sellsa

编辑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 main_content %}

然后我们需要在表格上面添加一个"添加轮播图"按钮

{% 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 %}

..