前言
前端頁面開發用到bootstrap框架，有2種實現方式：
1.直接在html頭部導入css和js文件
2.下載bootstarp課件源碼到項目本地放到static目錄
head導入bootstrap
在head頭部導入bootstarp用到的css和js文件
<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>
完整的模板內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 基本表單</title>
<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="container">
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name"
placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
<p class="help-block">這里是塊級幫助文本的實例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>
顯示效果
下載bootstrap到本地
下載地址https://v3.bootcss.com/getting-started/#download
下載后解壓
復制到static目錄
setting 設置
在 settings.py 文件添加以下配置：
STATIC_URL = '/static/' # 別名
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
模板導入
在模板中使用之前需要加入 {% load static %} ，修改后模板內容
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
<!DOCTYPE html>
<html>
<head>
{% load static %}
<meta charset="utf-8">
<title>Bootstrap 實例 - 基本表單</title>
<link rel="stylesheet" href="/static/bootstarp/css/bootstrap.min.css">
<script src="/static/bootstarp/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name"
placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
<p class="help-block">這里是塊級幫助文本的實例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>
重新訪問可以看到靜態資源加載的是項目本地的
