Django框架–bootstrap初识

栏目: Python · 发布时间: 7年前

内容简介：例如：（需求：我们需要引用类似于右侧整个页面的一个框架）根据关键字提取需要的前端框架：

一、bootstrap定位元素

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

例如：（需求：我们需要引用类似于右侧整个页面的一个框架）

Django框架–bootstrap初识

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

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

然后去掉不需要的内容，最终的界面：

Django框架–bootstrap初识

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

以上所述就是小编给大家介绍的《Django框架–bootstrap初识》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Blockchain Basics

Daniel Drescher / Apress / 2017-3-16 / USD 20.99

In 25 concise steps, you will learn the basics of blockchain technology. No mathematical formulas, program code, or computer science jargon are used. No previous knowledge in computer science, mathema......一起来看看《Blockchain Basics》这本书的介绍吧!

码农工具

随机密码生成器

多种字符组合密码

UNIX 时间戳转换

RGB HSV 转换

RGB HSV 互转工具