引入Bootsrap
-
创建静态文件的目录,放入Bootstrap文件
-
Html开头声明引入静态文件 {% load static %}
- <head>内引入Bootstrap CSS
-
<body>内“先后”引入Jquery js、Bootstrap js,并置于<body>的“末尾”
Bootstrap V3.0、V4.0 需要Jquery支持;V5.0不再依赖
改造Bootstrap
复制导航条
- 从Bootstrap v3中文网,复制【导航条】代码
https://v3.bootcss.com/components/#navbar
改造导航条
- 删除<li class="dropdown">等多余组件
- 删除<div class="container-fluid">中的“-fluid”,使navbar居中
- <a class="navbar-brand"> 标题改为“用户管理系统”
- ……略……(参考最终效果)
效果如下
新建按钮“新建部门”
<div class="container">
<div style="margin-bottom: 10px">
<a class="btn btn-primary" href="#">新建部门</a>
</div>
</div>
复制带表格的面版
改造带表格的面版
- <table class="table table-bordered"> table-bordered即有边框的表格
- btn btn-primary即蓝底按钮;btn btn-danger即红底按钮;btn btn-success即绿底按钮
- Bootstrap V3 四种标准尺寸:btn-/xs/sm/{null(or md)}/lg/(xs)
为表格标题添加图标
- 在中文文档中找到表格样式的图标,其名为glyphicon glyphicon-th-list
- 新建<span>,限定其class为glyphicon glyphicon-th-list
效果如下
来源:BV1NL41157 武沛齐《2022 B站最详细django3教程(django从入门到实践)》P23