首页 > 其他分享> 文章详细

【django入门】 09 Bootstrap设计页面

2022-02-11 12:04:29 阅读：241 来源： 互联网

标签：glyphicon 09 表格 Bootstrap django 按钮导航条 btn

引入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>

复制带表格的面版

https://v3.bootcss.com/components/#panels-tables

改造带表格的面版

<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

标签：glyphicon,09,表格,Bootstrap,django,按钮,导航条,btn
来源： https://www.cnblogs.com/navii/p/15882610.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9