Django框架–bootstrap初识

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

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

一、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初识》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

粒子群优化算法及其工程应用

刘波 / 2010-8 / 28.00元

《粒子群优化算法及其工程应用》的主要内容是：粒子群优化（PSO）算法是一种基于群体智能的新兴演化计算技术，广泛用于解决科学研究和工程实践中的优化问题。《粒子群优化算法及其工程应用》主要阐述粒子群优化算法的基本理论及其在机械故障诊断和机械工程测试中的应用成果。全书共5章，第1至3章介绍了PSO算法的原理和各种改进、变体PSO算法的原理，第4章介绍了PSO算法在机械工程领域的应用，第5章介绍了PSO算......一起来看看《粒子群优化算法及其工程应用》这本书的介绍吧!

码农工具