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

登录 · 发表于 2026-2-9 05:02:53

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>

复制代码

往期回顾

1.【快速开辟网站】
2.【欣赏器能辨认的标签1】
3.【欣赏器能辨认的标签2】
4.【欣赏器能辨认的标签3】
5.【欣赏器能辨认的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速相识 CSS】
9.【常用选择器概念解说】
10.【CSS根本样式先容1】
11.【CSS根本样式先容2】
12.【CSS根本样式先容3】
13.【CSS根本样式先容3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品保举部分】
18.【伪类简单相识】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初相识】
23.【BootSrap的目次栏】
24.【BootSrap的栅格体系】
25.【案例博客案例】
26.【案例登录】
27.【案例配景管理样例】
28.【图标】
29.【BootStrap依靠】
30.【javascript初相识】
31.【jJavaScript的变量】
32.【JavaScript的字符串范例】
33.【JavaScript的数组先容】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初相识】
39.【DOM的事故相识】
40.【jQuery初相识】
41.【jQuery探求标签】
42.【jQuery探求标签2】
43.【jQuery探求标签(间接探求)】
44.【案例菜单的切换】
45.【案例只能打开一个菜单】
46.【jQuery 简单操纵】
47.【案例动态创建数据】
48.【案例点击获取文本】
49.【案例点击删除文本】
50.【案例表格操纵】

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

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