django基础-bootstarp

1 导入相关JS和样式 

css样式

bootstrap.min.css

bootstrap-table.css

AdminLTE.min.css

js

bootstrap-table.min.js

bootstrap-table-zh-CN.js

bootstrap.min.js

jquery.min.js

2 Table 基本样式

<div class="navbar navbar-fixed-top">

<table id='table' class='table table-bordered'>

<thead>

<tr>><th>中文列名</th></tr>

<tr>{%for %}<th>{{}}</th>{%endfor%}</tr>

</thead>

</thead>

</div>

3 弹出框

  1 button属性

      data-toggle指以什么事件触发 这里指的是modal

      data-target指事件的目标 这里指的是modal子弹窗的ID

      type=button

     eg:data-toggle="modal" data-target="#testmodal"

     补充 1 这三个是必要的属性

      2 选择这两个属性后就不必进行JS触发进行编写,推荐使用此方法

      data-dismiss=”modal“ 这里是关闭弹出框专用属性 可以通过点击该元素达到让目标消失的效果

     这里必须设置成modal

  2 div modal  -> modal-dialog->modal-content

  3 div modal-content=》(1 modail-header(标题) 2 modail-body(主体) 3 modail-footer(按钮))

  4 如果不能显示 尝试去掉fade样式

4 form与jquery 需要注意的几个地方

   1 button的type类型一定要为button

   2 所有的form内部元素一定要填写name,否则是无法识别的

   3 取form中的所有数据为  $("#form_add3").serializeArray() 然后交给后端进行处理

5 前端分页

第零部分

<script src="{% static 'bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>

<link rel="stylesheet" href="{% static 'bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}">

   第一部分

 

<div class="navbar navbar-fixed-top">

<table id='table' class='table table-bordered'>

<thead>

<tr>><th>中文列名</th></tr>

</thead>

第二部分

 $("#testtable").DataTable({
        // 表下方页脚的类型，具体类别比较到，见[官网](https://datatables.net/examples/basic_init/alt_pagination.html)
        "pagingType": "simple_numbers",
        //启动搜索框
        searching: true,
        destroy : true,
        // 保存刷新时原表的状态
        stateSave: true,
        // 将显示的语言初始化为中文
        "language": {
            "lengthMenu": "选择每页 _MENU_ 展示 ",
            "zeroRecords": "未找到匹配结果--抱歉",
            "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页",
            "infoEmpty": "没有数据",
            "infoFiltered": "(获取 _MAX_ 项结果)",
            "paginate": {
                "first": "首页",
                "previous": "上一页",
                "next": "下一页",
                "last": "末页"
            }
        },
        // 此处重要，该data_dts就是dataTables要展示的数据.users即为后台传递过来的数据
        data: {{ data_dts | safe }},
        columns: [
            {data: 'column'},
        ]

});