Python2—0827笔记

bootstrap定位元素

bootstrap导入静态资源

bootstrap套用左侧菜单


bootstrap定位元素

main.html

代码

{% load staticfiles %}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AdminLTE 3 | Data Tables</title>

  <!\-\- Tell the browser to be responsive to screen width -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!\-\- Font Awesome -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <!\-\- Ionicons -->

  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!\-\- DataTables -->

  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap4.min.css' %}">

  <!\-\- Theme style -->

  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">

  <!\-\- Google Font: Source Sans Pro -->

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

     {% block css %}  {% endblock %}

</head>

<body class="hold-transition sidebar-mini">

<div class="wrapper">

  <!\-\- Navbar -->

  <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">

    <!\-\- Left navbar links -->

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" data-widget="pushmenu" href="/logout"><i class="fa fa-bars"></i></a>

      </li>

      <li class="nav-item d-none d-sm-inline-block">

        <a href="{% static 'index3.html" class="nav-link' %}">Home</a>

      </li>

      <li class="nav-item d-none d-sm-inline-block">

        <a href="#" class="nav-link">Contact</a>

      </li>

    </ul>

    <!\-\- SEARCH FORM -->

    <form class="form-inline ml-3">

      <div class="input-group input-group-sm">

        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">

        <div class="input-group-append">

          <button class="btn btn-navbar" type="submit">

            <i class="fa fa-search"></i>

          </button>

        </div>

      </div>

    </form>

    <!\-\- Right navbar links -->

    <ul class="navbar-nav ml-auto">

        <a href="/logout">退出登录</a>

      <!\-\- Notifications Dropdown Menu -->

      <li class="nav-item">

        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="/logout">

          <i class="fa fa-th-large"></i>

        </a>

      </li>

    </ul>

  </nav>

  <!\-\- /.navbar -->

  <!\-\- Main Sidebar Container -->

  <aside class="main-sidebar sidebar-dark-primary elevation-4">

    <!\-\- Brand Logo -->

    <a href="{% static 'index3.html" class="brand-link' %}">

      <img src="{% static 'dist/img/AdminLTELogo.png' %}"

           alt="AdminLTE Logo"

           class="brand-image img-circle elevation-3"

           style="opacity: .8">

      <span class="brand-text font-weight-light">AdminLTE 3</span>

    </a>

    <!\-\- Sidebar -->

    <div class="sidebar">

      <!\-\- Sidebar user (optional) -->

      <div class="user-panel mt-3 pb-3 mb-3 d-flex">

        <div class="image">

          <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">

        </div>

        <div class="info">

          <a href="#" class="d-block">Alexander Pierce</a>

        </div>

      </div>

      <!\-\- Sidebar Menu -->

      <nav class="mt-2">

        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

          <!\-\- Add icons to the links using the .nav-icon class

               with font-awesome or any other icon font library -->

          <li class="nav-item has-treeview">

            <a href="#" class="nav-link">

              <i class="nav-icon fa fa-dashboard"></i>

              <p>

                Dashboard

                <i class="right fa fa-angle-left"></i>

              </p>

            </a>

            <ul class="nav nav-treeview">

              <li class="nav-item">

                <a href="/home" class="nav-link">

                  <i class="fa fa-circle-o nav-icon"></i>

                  <p>仪表盘</p>

                </a>

              </li>

            </ul>

          </li>

{#          <li class="nav-item has-treeview">#}

{#            <a href="#" class="nav-link">#}

{#              <i class="nav-icon fa fa-tree"></i>#}

{#              <p>#}

{#                UI Elements#}

{#                <i class="fa fa-angle-left right"></i>#}

{#              </p>#}

{#            </a>#}

{#            <ul class="nav nav-treeview">#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/general.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>General</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/icons.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Icons</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/buttons.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Buttons</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/sliders.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Sliders</p>#}

{#                </a>#}

{#              </li>#}

{#            </ul>#}

{#          </li>#}

{#          <li class="nav-item has-treeview">#}

{#            <a href="#" class="nav-link">#}

{#              <i class="nav-icon fa fa-edit"></i>#}

{#              <p>#}

{#                Forms#}

{#                <i class="fa fa-angle-left right"></i>#}

{#              </p>#}

{#            </a>#}

{#            <ul class="nav nav-treeview">#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/general.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>General Elements</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/advanced.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Advanced Elements</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/editors.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Editors</p>#}

{#                </a>#}

{#              </li>#}

{#            </ul>#}

{#          </li>#}

{#        左侧菜单#}

        {% for item in menu_dic.values %}

          <li class="nav-item has-treeview menu-open">

            <a href="#" class="nav-link active">

              <i class="nav-icon fa fa-table"></i>

              <p>

                {{ item.title }}

                <i class="fa fa-angle-left right"></i>

              </p>

            </a>

            <ul class="nav nav-treeview">

                {% for i in item.lower %}

                  <li class="nav-item">

                    <a href="{{ i.url }}" class="nav-link">

                      <i class="fa fa-circle-o nav-icon"></i>

                      <p>{{ i.name }}</p>

                    </a>

                  </li>

                {% endfor %}

            </ul>

          </li>

        {% endfor %}

        </ul>

      </nav>

      <!\-\- /.sidebar-menu -->

    </div>

    <!\-\- /.sidebar -->

  </aside>

       {% block content %}

        {% endblock %}

<!\-\- Content Wrapper. Contains page content -->

</div>

<!\-\- ./wrapper -->

<!\-\- jQuery -->

<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>

<!\-\- Bootstrap 4 -->

<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!\-\- DataTables -->

<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>

<script src="{% static 'plugins/datatables/dataTables.bootstrap4.min.js' %}"></script>

<!\-\- SlimScroll -->

<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>

<!\-\- FastClick -->

<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>

<!\-\- AdminLTE App -->

<script src="{% static 'dist/js/adminlte.min.js' %}"></script>

<!\-\- AdminLTE for demo purposes -->

<script src="{% static 'dist/js/demo.js' %}"></script>

<!\-\- page script -->

<script>

  $(function () {

    $("#example1").DataTable();

    $('#example2').DataTable({

      "paging": true,

      "lengthChange": false,

      "searching": false,

      "ordering": true,

      "info": true,

      "autoWidth": false

    });

  });

</script>

</body>

</html>


用的是相对路径,所以没有css样式

![](file:///C:/Users/shenj/AppData/Local/Temp/enhtmlclip/Image.png)


bootstrap导入静态资源

bootstrap 包放在static中

data.html

代码

% load staticfiles %}       #导入static

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AdminLTE 3 | Data Tables</title>

  <!\-\- Tell the browser to be responsive to screen width -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!\-\- Font Awesome -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <!\-\- Ionicons -->

  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!\-\- DataTables -->

  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap4.min.css' %}">

  <!\-\- Theme style -->

  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">

  <!\-\- Google Font: Source Sans Pro -->

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>

<!\-\- Bootstrap 4 -->

<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!\-\- DataTables -->

<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>

<script src="{% static 'plugins/datatables/dataTables.bootstrap4.min.js' %}"></script>

<!\-\- SlimScroll -->

<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>

<!\-\- FastClick -->

<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>

<!\-\- AdminLTE App -->

<script src="{% static 'dist/js/adminlte.min.js' %}"></script>

<!\-\- AdminLTE for demo purposes -->

<script src="{% static 'dist/js/demo.js' %}"></script>

<!\-\- page script -->


bootstrap套用左侧菜单

main.py

代码

% load staticfiles %}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AdminLTE 3 | Data Tables</title>

  <!\-\- Tell the browser to be responsive to screen width -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!\-\- Font Awesome -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <!\-\- Ionicons -->

  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!\-\- DataTables -->

  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap4.min.css' %}">

  <!\-\- Theme style -->

  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">

  <!\-\- Google Font: Source Sans Pro -->

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

     {% block css %}  {% endblock %}

</head>

<body class="hold-transition sidebar-mini">

<div class="wrapper">

  <!\-\- Navbar -->

  <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">

    <!\-\- Left navbar links -->

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" data-widget="pushmenu" href="/logout"><i class="fa fa-bars"></i></a>

      </li>

      <li class="nav-item d-none d-sm-inline-block">

        <a href="{% static 'index3.html" class="nav-link' %}">Home</a>

      </li>

      <li class="nav-item d-none d-sm-inline-block">

        <a href="#" class="nav-link">Contact</a>

      </li>

    </ul>

    <!\-\- SEARCH FORM -->

    <form class="form-inline ml-3">

      <div class="input-group input-group-sm">

        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">

        <div class="input-group-append">

          <button class="btn btn-navbar" type="submit">

            <i class="fa fa-search"></i>

          </button>

        </div>

      </div>

    </form>

    <!\-\- Right navbar links -->

    <ul class="navbar-nav ml-auto">

        <a href="/logout">退出登录</a>

      <!\-\- Notifications Dropdown Menu -->

      <li class="nav-item">

        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="/logout">

          <i class="fa fa-th-large"></i>

        </a>

      </li>

    </ul>

  </nav>

  <!\-\- /.navbar -->

  <!\-\- Main Sidebar Container -->

  <aside class="main-sidebar sidebar-dark-primary elevation-4">

    <!\-\- Brand Logo -->

    <a href="{% static 'index3.html" class="brand-link' %}">

      <img src="{% static 'dist/img/AdminLTELogo.png' %}"

           alt="AdminLTE Logo"

           class="brand-image img-circle elevation-3"

           style="opacity: .8">

      <span class="brand-text font-weight-light">AdminLTE 3</span>

    </a>

    <!\-\- Sidebar -->

    <div class="sidebar">

      <!\-\- Sidebar user (optional) -->

      <div class="user-panel mt-3 pb-3 mb-3 d-flex">

        <div class="image">

          <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">

        </div>

        <div class="info">

          <a href="#" class="d-block">Alexander Pierce</a>

        </div>

      </div>

      <!\-\- Sidebar Menu -->

      <nav class="mt-2">

        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

          <!\-\- Add icons to the links using the .nav-icon class

               with font-awesome or any other icon font library -->

          <li class="nav-item has-treeview">

            <a href="#" class="nav-link">

              <i class="nav-icon fa fa-dashboard"></i>

              <p>

                Dashboard

                <i class="right fa fa-angle-left"></i>

              </p>

            </a>

            <ul class="nav nav-treeview">

              <li class="nav-item">

                <a href="/home" class="nav-link">

                  <i class="fa fa-circle-o nav-icon"></i>

                  <p>仪表盘</p>

                </a>

              </li>

            </ul>

          </li>

{#          <li class="nav-item has-treeview">#}

{#            <a href="#" class="nav-link">#}

{#              <i class="nav-icon fa fa-tree"></i>#}

{#              <p>#}

{#                UI Elements#}

{#                <i class="fa fa-angle-left right"></i>#}

{#              </p>#}

{#            </a>#}

{#            <ul class="nav nav-treeview">#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/general.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>General</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/icons.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Icons</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/buttons.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Buttons</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/sliders.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Sliders</p>#}

{#                </a>#}

{#              </li>#}

{#            </ul>#}

{#          </li>#}

{#          <li class="nav-item has-treeview">#}

{#            <a href="#" class="nav-link">#}

{#              <i class="nav-icon fa fa-edit"></i>#}

{#              <p>#}

{#                Forms#}

{#                <i class="fa fa-angle-left right"></i>#}

{#              </p>#}

{#            </a>#}

{#            <ul class="nav nav-treeview">#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/general.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>General Elements</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/advanced.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Advanced Elements</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/editors.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Editors</p>#}

{#                </a>#}

{#              </li>#}

{#            </ul>#}

{#          </li>#}

{#        左侧菜单#}

        {% for item in menu_dic.values %}

          <li class="nav-item has-treeview menu-open">

            <a href="#" class="nav-link active">

              <i class="nav-icon fa fa-table"></i>

              <p>

                {{ item.title }}

                <i class="fa fa-angle-left right"></i>

              </p>

            </a>

            <ul class="nav nav-treeview">

                {% for i in item.lower %}

                  <li class="nav-item">

                    <a href="{{ i.url }}" class="nav-link">

                      <i class="fa fa-circle-o nav-icon"></i>

                      <p>{{ i.name }}</p>

                    </a>

                  </li>

                {% endfor %}

            </ul>

          </li>

        {% endfor %}

        </ul>

      </nav>

      <!\-\- /.sidebar-menu -->

    </div>

    <!\-\- /.sidebar -->

  </aside>

       {% block content %}

        {% endblock %}

<!\-\- Content Wrapper. Contains page content -->

</div>

<!\-\- ./wrapper -->

<!\-\- jQuery -->

<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>

<!\-\- Bootstrap 4 -->

<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!\-\- DataTables -->

<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>

<script src="{% static 'plugins/datatables/dataTables.bootstrap4.min.js' %}"></script>

<!\-\- SlimScroll -->

<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>

<!\-\- FastClick -->

<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>

<!\-\- AdminLTE App -->

<script src="{% static 'dist/js/adminlte.min.js' %}"></script>

<!\-\- AdminLTE for demo purposes -->

<script src="{% static 'dist/js/demo.js' %}"></script>

<!\-\- page script -->

<script>

  $(function () {

    $("#example1").DataTable();

    $('#example2').DataTable({

      "paging": true,

      "lengthChange": false,

      "searching": false,

      "ordering": true,

      "info": true,

      "autoWidth": false

    });

  });

</script>

</body>

</html>% load staticfiles %}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AdminLTE 3 | Data Tables</title>

  <!\-\- Tell the browser to be responsive to screen width -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!\-\- Font Awesome -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  <!\-\- Ionicons -->

  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!\-\- DataTables -->

  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap4.min.css' %}">

  <!\-\- Theme style -->

  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">

  <!\-\- Google Font: Source Sans Pro -->

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

     {% block css %}  {% endblock %}

</head>

<body class="hold-transition sidebar-mini">

<div class="wrapper">

  <!\-\- Navbar -->

  <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">

    <!\-\- Left navbar links -->

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" data-widget="pushmenu" href="/logout"><i class="fa fa-bars"></i></a>

      </li>

      <li class="nav-item d-none d-sm-inline-block">

        <a href="{% static 'index3.html" class="nav-link' %}">Home</a>

      </li>

      <li class="nav-item d-none d-sm-inline-block">

        <a href="#" class="nav-link">Contact</a>

      </li>

    </ul>

    <!\-\- SEARCH FORM -->

    <form class="form-inline ml-3">

      <div class="input-group input-group-sm">

        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">

        <div class="input-group-append">

          <button class="btn btn-navbar" type="submit">

            <i class="fa fa-search"></i>

          </button>

        </div>

      </div>

    </form>

    <!\-\- Right navbar links -->

    <ul class="navbar-nav ml-auto">

        <a href="/logout">退出登录</a>

      <!\-\- Notifications Dropdown Menu -->

      <li class="nav-item">

        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="/logout">

          <i class="fa fa-th-large"></i>

        </a>

      </li>

    </ul>

  </nav>

  <!\-\- /.navbar -->

  <!\-\- Main Sidebar Container -->

  <aside class="main-sidebar sidebar-dark-primary elevation-4">

    <!\-\- Brand Logo -->

    <a href="{% static 'index3.html" class="brand-link' %}">

      <img src="{% static 'dist/img/AdminLTELogo.png' %}"

           alt="AdminLTE Logo"

           class="brand-image img-circle elevation-3"

           style="opacity: .8">

      <span class="brand-text font-weight-light">AdminLTE 3</span>

    </a>

    <!\-\- Sidebar -->

    <div class="sidebar">

      <!\-\- Sidebar user (optional) -->

      <div class="user-panel mt-3 pb-3 mb-3 d-flex">

        <div class="image">

          <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">

        </div>

        <div class="info">

          <a href="#" class="d-block">Alexander Pierce</a>

        </div>

      </div>

      <!\-\- Sidebar Menu -->

      <nav class="mt-2">

        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

          <!\-\- Add icons to the links using the .nav-icon class

               with font-awesome or any other icon font library -->

          <li class="nav-item has-treeview">

            <a href="#" class="nav-link">

              <i class="nav-icon fa fa-dashboard"></i>

              <p>

                Dashboard

                <i class="right fa fa-angle-left"></i>

              </p>

            </a>

            <ul class="nav nav-treeview">

              <li class="nav-item">

                <a href="/home" class="nav-link">

                  <i class="fa fa-circle-o nav-icon"></i>

                  <p>仪表盘</p>

                </a>

              </li>

            </ul>

          </li>

{#          <li class="nav-item has-treeview">#}

{#            <a href="#" class="nav-link">#}

{#              <i class="nav-icon fa fa-tree"></i>#}

{#              <p>#}

{#                UI Elements#}

{#                <i class="fa fa-angle-left right"></i>#}

{#              </p>#}

{#            </a>#}

{#            <ul class="nav nav-treeview">#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/general.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>General</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/icons.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Icons</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/buttons.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Buttons</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'UI/sliders.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Sliders</p>#}

{#                </a>#}

{#              </li>#}

{#            </ul>#}

{#          </li>#}

{#          <li class="nav-item has-treeview">#}

{#            <a href="#" class="nav-link">#}

{#              <i class="nav-icon fa fa-edit"></i>#}

{#              <p>#}

{#                Forms#}

{#                <i class="fa fa-angle-left right"></i>#}

{#              </p>#}

{#            </a>#}

{#            <ul class="nav nav-treeview">#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/general.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>General Elements</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/advanced.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Advanced Elements</p>#}

{#                </a>#}

{#              </li>#}

{#              <li class="nav-item">#}

{#                <a href="{% static 'forms/editors.html' %}" class="nav-link">#}

{#                  <i class="fa fa-circle-o nav-icon"></i>#}

{#                  <p>Editors</p>#}

{#                </a>#}

{#              </li>#}

{#            </ul>#}

{#          </li>#}

{#        左侧菜单#}

        {% for item in menu_dic.values %}

          <li class="nav-item has-treeview menu-open">

            <a href="#" class="nav-link active">

              <i class="nav-icon fa fa-table"></i>

              <p>

                {{ item.title }}

                <i class="fa fa-angle-left right"></i>

              </p>

            </a>

            <ul class="nav nav-treeview">

                {% for i in item.lower %}

                  <li class="nav-item">

                    <a href="{{ i.url }}" class="nav-link">

                      <i class="fa fa-circle-o nav-icon"></i>

                      <p>{{ i.name }}</p>

                    </a>

                  </li>

                {% endfor %}

            </ul>

          </li>

        {% endfor %}

        </ul>

      </nav>

      <!\-\- /.sidebar-menu -->

    </div>

    <!\-\- /.sidebar -->

  </aside>

       {% block content %}

        {% endblock %}

<!\-\- Content Wrapper. Contains page content -->

</div>

<!\-\- ./wrapper -->

<!\-\- jQuery -->

<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>

<!\-\- Bootstrap 4 -->

<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!\-\- DataTables -->

<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>

<script src="{% static 'plugins/datatables/dataTables.bootstrap4.min.js' %}"></script>

<!\-\- SlimScroll -->

<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>

<!\-\- FastClick -->

<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>

<!\-\- AdminLTE App -->

<script src="{% static 'dist/js/adminlte.min.js' %}"></script>

<!\-\- AdminLTE for demo purposes -->

<script src="{% static 'dist/js/demo.js' %}"></script>

<!\-\- page script -->

<script>

  $(function () {

    $("#example1").DataTable();

    $('#example2').DataTable({

      "paging": true,

      "lengthChange": false,

      "searching": false,

      "ordering": true,

      "info": true,

      "autoWidth": false

    });

  });

</script>

</body>

</html>

转载于:https://my.oschina.net/u/3959701/blog/3098225

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值