python測試開發django-113.使用Bootstrap框架

阿新 • • 發佈：2021-09-03

前言

前端頁面開發用到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.js"></script>
    <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>

重新訪問可以看到靜態資源載入的是專案本地的