CMDB - Bootstarp 套用模板

Bootstarp 套用模板

bootstrap导入静态资源
STATICFILES = (...) # setings.py 文件里
在template里面开头使用
{% load staticfiles %}
{% static \'路径\' %} # 导入拼接
bootstarp/mian,html
{% load staticfiles %}
<!DOCTYPE HTML>
<html>

<head>
<title>CMDB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="{% static \'css/bootstrap.min.css\'%}" rel=\'stylesheet\' type=\'text/css\' />
<!-- Custom CSS -->
<link href="{% static \'css/style.css\'%}" rel=\'stylesheet\' type=\'text/css\' />
<link rel="stylesheet" href="{% static \'css/morris.css\'%}" type="text/css"/>
<!-- Graph CSS -->
<link href="{% static \'css/font-awesome.css\'%}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static \'js/jquery-2.1.4.min.js\'%}"></script>
<!-- //jQuery -->
<!-- tables -->
<link rel="stylesheet" type="text/css" href="{% static \'css/table-style.css\'%}" />
<link rel="stylesheet" type="text/css" href="{% static \'css/basictable.css\'%}" />
<script type="text/javascript" src="{% static \'js/jquery.basictable.min.js\'%}"></script>
<script type="text/javascript">
    $(document).ready(function() {
      $(\'#table\').basictable();

      $(\'#table-breakpoint\').basictable({
        breakpoint: 768
      });

      $(\'#table-swap-axis\').basictable({
        swapAxis: true
      });

      $(\'#table-force-off\').basictable({
        forceResponsive: false
      });

      $(\'#table-no-resize\').basictable({
        noResize: true
      });

      $(\'#table-two-axis\').basictable();

      $(\'#table-max-height\').basictable({
        tableWrapper: true
      });
    });
</script>
<!-- //tables -->
<link href=\'http://fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400\' rel=\'stylesheet\' type=\'text/css\'/>
<link href=\'http://fonts.googleapis.com/css?family=Montserrat:400,700\' rel=\'stylesheet\' type=\'text/css\'>
<!-- lined-icons -->
<link rel="stylesheet" href="{% static \'css/icon-font.min.css\'%}" type=\'text/css\' />
<!-- //lined-icons -->
# 弹窗    
{#<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">#}
{#<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>#}
{#<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
</head>
<body>
   <div class="page-container sidebar-collapsed">
   <!--/content-inner-->
<div class="left-content">
       <div class="mother-grid-inner">
            <!--header start here-->
                <div class="header-main">
                    <div class="logo-w3-agile">
                                <h1><a href="/index/">主页</a></h1>
                            </div>
                    <div class="w3layouts-left">

                            <!--search-box-->
                                <div class="w3-search-box">
                                    <form action="#" method="post">
                                        <input type="text" placeholder=