Django框架–bootstrap初识

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Algorithms Sequential & Parallel

Russ Miller、Laurence Boxer / Charles River Media / 2005-08-03 / USD 59.95

With multi-core processors replacing traditional processors and the movement to multiprocessor workstations and servers, parallel computing has moved from a specialty area to the core of computer scie......一起来看看《Algorithms Sequential & Parallel》这本书的介绍吧!

码农工具

RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具

HEX CMYK 互转工具