内容简介：例如：（需求：我们需要引用类似于右侧整个页面的一个框架）根据关键字提取需要的前端框架：
一、bootstrap定位元素
- 1、打开所需求的页面；
- 2、F12根据需求提取所需要的代码；
- 3、使用notepad++打开html页面；
- 4、根据关键字定位到代码；
例如：（需求：我们需要引用类似于右侧整个页面的一个框架）
根据关键字提取需要的前端框架：
<section class="content"> XXXXX </section>
二、bootstrap导入静态资源
提取到了代码 但是单独访问的时候是没任何样式的，需要再次引入样式；
例如：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Data Tables</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap4.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
- 如上，如果使用http的是可以不用引入的，但是使用绝对路径的就需要导入指定的目录到项目中，使用如下这种方式引入：
{% static 'plugins/datatables/dataTables.bootstrap4.min.css' %}
三、套用左侧菜单
依旧是根据关键字找到所需要的内容：
<div class="sidebar"> XXXXXX </div>
然后去掉不需要的内容，最终的界面：
然后编辑代码实际上咱们用到的就是Tables那个目录，更新咱们之前操作的代码：
{% for item in menu_dic.values %}
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-table"></i>
<p>
{{ item.name }}
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
{% for i in item.lower %}
<li class="nav-item">
<a href="{{ i.name }}" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>{{ i.url }}</p>
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
{% endfor %}
调整访问url后跳转的页面：
class List(View):
def post(self, request, *args, **kwargs):
pass
def get(self, request, *args, **kwargs):
menu_dic = request.session.get('menu_dic') ##注意此句 前端页面需要调用的数据
print("FFFFUCKKK-->", menu_dic.values)
host_list = models.Host.objects.all()
# print(host_list)
# print(request.permission_code_list)
return render(request, 'main.html', locals()) ##修改为此条即可
# return render(request, 'host.html', locals())
最终展示的菜单栏：
以上所述就是小编给大家介绍的《Django框架–bootstrap初识》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 初识HDFS原理及框架
- 初识gauge自动化测试框架（二）
- 初识 Knative: 跨平台的 Serverless 编排框架
- 【Zinx第二章-初识Zinx框架】Golang轻量级并发服务器框架
- 二、【Zinx第二章-初识Zinx框架】Golang轻量级并发服务器框架
- 初识Redis
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
