Django 使用 bootstrap
一、下载
Bootstrap 中文网：http://www.bootcss.com/
Bootstrap Table 官网：https://bootstrap-table.com/
JQuery 官网：https://jquery.com/
在bootstrap中文网下载第一个就好 第二个是包含一些网页实例的 合集包
二、配置
1、新建static文件夹
首先在项目目录下（与models.py同级）新建文件夹 static 用来 放置 bootstrap 的 css/js/font文件
2、修改setting
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
三、使用
新建templates文件夹存放HTML，创建两个 HTML 文件 一个 base.html 一个 index.html
base.html作为基础模板，index.html继承 base.html模板作为展示。
1、base.html
将templates路径加入到 setting设置中
'DIRS': [os.path.join(BASE_DIR, 'templates'), ],
修改 base.html 文件，指定加载本地文件路径
<!DOCTYPE html>
{% load staticfiles %}
在base.html中加入bootstrap的 css/js
<head>
<meta charset="UTF-8">
<title>Base</title>
<script type="text/javascript" src="{% static 'bootstrap/js/jquery-3.3.1.min.js' %}"></script>
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
然后加入一个我们想要使用的 bootstrap 组件语法 。比如导航条https://v3.bootcss.com/components/#navbar-default 复制后 放到 base.html 中
2、index.html
在index.html 模板中继承 base.html
{% extends 'base/base.html' %}
然后设置路由，指定视图函数使用render返回即可
3、API
中文文档
四、bootstrapTable API
参考https://zhuanlan.zhihu.com/p/71200451
1、API
https://live.bootstrap-table.com/ 进入该网址后，点击Load Examples，显示官方所有的API，想看哪个就点哪个，进入在线编辑页面，左侧是源代码，也可以自己修改之后Run，右侧是效果图。
2、使用
引入css,js引用相关组件，并定义一个空的表格，在js里面初始化的方式来使用bootstrapTable组件。
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{# 核心组件 bootstrap JQuey#}
<link href="{% static 'bootstrapTable/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet"/>
<script src="{% static 'bootstrapTable/jquery/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'bootstrapTable/bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
{# bootstrap-table 插件#}
<link href="{% static 'bootstrapTable/bootstrap-table-master/dist/bootstrap-table.min.css' %}" rel="stylesheet"/>
<script src="{% static 'bootstrapTable/bootstrap-table-master/dist/bootstrap-table.min.js' %}"></script>
<script src="{% static 'bootstrapTable/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js' %}"></script>
<title>bootstrapTable实例</title>
</head>
<table id="table">
</table>