django+bootstrap静态页面_9、Django 引入adminlte框架

1. adminlie框架介绍

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，它提供了一系列响应的、

可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容PC和移动端。通

过AdminLTE，我们可以快速的创建一个响应式的Html5网站。AdminLTE框架在网页架构与设计

上，有很大的辅助作用，尤其是前端架构设计师，用好AdminLTE 不但美观，而且可以免去写很大

CSS与JS的工作量。

2. 下载框架

获取框架的方式有很多，我这里是直接在官方网站下载的 这里使用的是AdminLTE-2.4.18版本。

3. 把adminlte框架引入Django

①. 放入静态文件

在把目录bower_components、dist、plugins放置到项目static文件

②. 配置settings文件

STATIC_URL = '/static/'# HERE = os.path.dirname(os.path.abspath(__file__))# HERE = os.path.join(HERE, '../')STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static/'),)

③. 在teamplete文件夹建立base.html

{% load static %}{% block title %}Databases{% endblock %}{% block css %}{% endblock %}

DBADatabasesAdminToggle navigation MAIN NAVIGATION业务信息Management User Log

{% block content %}{% endblock %}

{% block script %}{% endblock %}

④. 优化index.html界面

{% extends 'base.html' %}{% load static %}{% block title %}业务信息{% endblock %}{% block css %}{% endblock %}{% block content %}

VLAN号汇总表Product Info

主页VLAN号整合

VLAN号整合表

序号VLAN号单位{% for vlan in vlan_info %}{{ forloop.counter }}{{ vlan.vlanId }}{{ vlan.department }}{% endfor %}

{% endblock %}{% block script %}{% endblock %}{#{% block content %}#}{##}{# #}{# #}{# #}{# #}{# #}{# 序号#}{# VLAN号#}{# 单位#}{##}{# #}{# #}{# #}{# #}{# {% for vlan in vlan_info %}#}{# #}{# {{ forloop.counter }}#}{# {{ vlan.vlanId }}#}{# {{ vlan.department }}#}{# #}{# {% endfor %}#}{# #}{# #}{##}{#{% endblock %}#}

这样这个项目的基本功能就算大功告成了。剩下的就是优化adminlte导航栏框架之类的了。