【原】python測(cè)試開發(fā)django-113.使用Bootstrap框架

上海悠悠 2021-09-04

展開全文

前言

前端頁(yè)面開發(fā)用到bootstrap框架,，有2種實(shí)現(xiàn)方式：
1.直接在html頭部導(dǎo)入css和js文件
2.下載bootstarp課件源碼到項(xiàng)目本地放到static目錄

head導(dǎo)入bootstrap

在head頭部導(dǎo)入bootstarp用到的css和js文件

    <link rel="stylesheet" href="https://cdn./twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn./jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn./twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

完整的模板內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 實(shí)例 - 基本表單</title>
    <link rel="stylesheet" href="https://cdn./twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn./jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn./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="請(qǐng)輸入名稱">
    </div>
    <div class="form-group">
        <label for="inputfile">文件輸入</label>
        <input type="file" id="inputfile">
        <p class="help-block">這里是塊級(jí)幫助文本的實(shí)例,。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">請(qǐng)打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>

顯示效果

下載bootstrap到本地

下載地址https://v3./getting-started/#download

下載后解壓

復(fù)制到static目錄

setting 設(shè)置

在 settings.py 文件添加以下配置：

STATIC_URL = '/static/' # 別名 
STATICFILES_DIRS = [ 
    os.path.join(BASE_DIR, "static"), 
]

模板導(dǎo)入

在模板中使用之前需要加入 {% load static %} ，修改后模板內(nèi)容

# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="utf-8">
    <title>Bootstrap 實(shí)例 - 基本表單</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="請(qǐng)輸入名稱">
    </div>
    <div class="form-group">
        <label for="inputfile">文件輸入</label>
        <input type="file" id="inputfile">
        <p class="help-block">這里是塊級(jí)幫助文本的實(shí)例,。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 請(qǐng)打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>