django学习入门系列之第七点《案例添加页面》

最新推荐文章于 2024-10-15 09:50:33 发布

铁匠匠匠

最新推荐文章于 2024-10-15 09:50:33 发布

阅读量1.4k

点赞数 15

分类专栏： django 文章标签： django 学习 python 开发语言开源笔记前端框架

本文链接：https://blog.csdn.net/qq_62548908/article/details/141177052

版权

django 专栏收录该内容

91 篇文章 0 订阅

订阅专栏

文章目录

7.6 前端整合
- 标准引入格式
- 案例添加页面
往期回顾

7.6 前端整合

HTML
CSS
javaScript、jQuery
BootStrap（动态效果依赖于jQuery）

标准引入格式

css在上面
js动态效果放下面
bootstrap依赖于jQuery，所以先要有jQuery，再有bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>



<script src="/static/js/js.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script type="text/javascript">

</script>

</body>
</html>

案例添加页面

人员录入系统，需要用户提供信息
用户名 年龄 薪资 战况等


对于时间--要选择，不能自己手填     
(插件) datetimepicker     下载插件   应用插件（25课中间部分）
或者直接input标签的type=date就可以用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>

<form class="form-horizontal">

    <div class="row clearfix">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" placeholder="姓名">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" placeholder="年龄">
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-2 control-label">薪资</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" placeholder="薪资">
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-2 control-label">部门</label>
                <div class="col-sm-10">
                    <select class="form-control">
                        <option>IT</option>
                        <option>医疗</option>
                        <option>教育</option>
                        <option>监管</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-2 control-label">入职日期</label>
                <div class="col-sm-10">
                    <input type="date" class="form-control" placeholder="入职日期">
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default btn btn-primary">提交</button>
        </div>
    </div>
</form>


<script src="/static/js/js.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script type="text/javascript">

</script>

</body>
</html>