天天看点

Django 学习四--bootstrap

1.前端基础

html:看一下标签

css:装饰页面,操纵页面布局

js:前端专用语言

jquery:是js的一个封装库,语法和js稍微不太一样

2.快速美化页面

bootstrap库找到css链接:<code>https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css</code>

bootstrap.min.css中间min的意思是压缩版本,上线时候用

不带min的是开发版本

把这两个链接通过浏览子打开后下载下来

创建如下图所示文件夹,然后直接把下载下来的文件拷贝到bootstrap目录下,会发现带min文件跑到了不带min文件下

Django 学习四--bootstrap

3.引用

为了避免每个文件都写一次引用,所以需要用到模版继承。在template/personal_info目录下创建base.html文件,用来放公共的部分

很多样式都可以上bootstraps官网上找到,然后自己修改下

Django 学习四--bootstrap
Django 学习四--bootstrap

first_project/personal_info/forms.py

Django 学习四--bootstrap
Django 学习四--bootstrap

first_project/personal_info/templatetags/mytags.py

Django 学习四--bootstrap
Django 学习四--bootstrap

first_project/personal_info/templates/personal_info/base.html

Django 学习四--bootstrap
Django 学习四--bootstrap

first_project/personal_info/templates/personal_info/person_create.html

Django 学习四--bootstrap
Django 学习四--bootstrap

first_project/personal_info/templates/personal_info/person_list.html

启动服务后,效果

Django 学习四--bootstrap

保存后-&gt;

Django 学习四--bootstrap