二十、基于Bootstrap和FontAwesome制作页面
1.一、计算机初识2.二、数据概述3.六、ip地址与子网划分4.五、网络通信实现5.四、字符编码6.三、网络基础7.十四、MySQL与Django之Model基础8.十三、Django Admin9.十二、Django视图函数和模版相关10.十一、Django url控制系统11.十、Django静态文件12.九、Django环境搭建（基于anaconda环境）13.八、Python开发环境管理14.七、ip地址配置15.二十五、JSON跨域16.二十四、文件上传17.二十三、Django Serializes18.二十二、Django之Form组件19.二十一、分页20.JS笔记
21.二十、基于Bootstrap和FontAwesome制作页面
22.十九、Ajax和iFrame23.十八、Django之Http24.十七、Cookie和Session25.十六、Django的ORM（二）26.十五、Django的ORM27.实践中前端的一些笔记28.二十六、登录相关29.二十九、RBAC+动态菜单30.二十八、XSS31.JS第三方插件32.二十七、简单的验证码实现33.三十二、Django实践的笔记34.三十一、动态Form35.三十、Kingadmin调整项目目录结构：在项目statics目录下，创建JS、CSS、Plugins文件，分别用于存放js、css和第三方插件。
Bootstrap：提供现成的样式+效果
1、下载Bootstrap
在boostrap官网下载用于生产版本的bootstrap，放在plugins文件夹。
2、Html中引入Bootstrap的css
<head>
...
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
// 开发时使用bootstrap.css。
// 发布时用bootstrap.min.css。Min.css内容中去掉了换行，文件大小小一些。
</head>
<body>
...
</body>
3、应用
Bootstrap官网css页中，找到所需样式，然后在html中使用对应class名称：
<table class="table table-bordered">
...
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
...
在bootstrap官网的组件页，找到要使用的组件样式，在html中对元素使用对应class名。
bootstrap上组件样式有限，这时可以使用fontawesome。
FontAwesome：提供图标
1、下载FontAwesome
到FontAwesome官网下载：font-awesome 放到Plugins文件夹
2、在html中引入fontawesome
<head>
...
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/font-awesome/css/fontawesome.css">
</head>
<body>
...
</body>
3、应用
找到合适的组件样式，将其class名应用到html元素中：
<a class="fa fa-pencil-square-o">编辑</a>
...
模态框
1、引入Bootstrap的JS：
...
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
</body>
...
2、编辑模态框代码
在Bootstrap官网的js页中找到需要的模态框，复制代码到项目代码中，并引入jquery。这时，点击复制的代码中对应的按钮，弹出模态框。然后根据需求修改模态框。
3、给模态框的元素绑定事件
...
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function(){
bindEvent();
bindSave();
});
function bindEvent(){
$("#aBtn").click(function(){ # 给页面中id='aBtn'的元素绑定点击事件
$("#aModal").modal("show"); # 找到id='aModal'的模态框，将它显示
})
}
function bindSave(){
var postData = {};
$("#saveBtn").click(function(){ # 给模态框中id='saveBtn'的元素绑定点击事件
$("#aModal").find("input,select").each(function(){ # 在id='aModal'的模态框中找出input和select元素，并遍历
console.log($(this)[0]);
var v = $(this).val();
var n = $(this).attr('name');
if(n=="gender"){ # 如果name='gender',那么它是select元素
if($(this).prop("checked")){ # 检测这个select元素是否被选中
postData[n]=v;
}
}else{
postData[n]=v;
}
...
# ajax将postData向后端发送请求
});
});
</script>
</body>
...
撤去模态框
$('#aModal').modal('hide') # 将模态框撤去
新页面还是模态框？
使用新页面的情况：
● 独立的页面
● 数据量大或条目多
使用对话框的情况：
● 数据量少或条目少
另：
(1) 增加、编辑
① Ajax：考虑，当前页；td中自定义属性
② 页面刷新
(2) 删除
对话框方式
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库