首页 » Python » python3 高级篇 » 正文

Django框架–bootstrap初识

一、bootstrap定位元素

  • 1、打开所需求的页面;
  • 2、F12根据需求提取所需要的代码;
  • 3、使用notepad++打开html页面;
  • 4、根据关键字定位到代码;

例如:(需求:我们需要引用类似于右侧整个页面的一个框架)

mark

根据关键字提取需要的前端框架:

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

然后去掉不需要的内容,最终的界面:

mark

然后编辑代码实际上咱们用到的就是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())

最终展示的菜单栏:

mark

赞 (0)

发表评论