Flask框架学习笔记11-导入前端框架Bootstrap

最新推荐文章于 2024-08-09 16:57:11 发布

python小明

最新推荐文章于 2024-08-09 16:57:11 发布

阅读量711

点赞数 1

分类专栏： Flask框架文章标签： flask

本文链接：https://blog.csdn.net/time_money/article/details/118380293

版权

本文介绍了如何在Flask项目中引入前端框架Bootstrap，以提升网页界面的美观性和组件丰富性。通过下载安装依赖、导入Bootstrap、修改模板以及重构页面，实现了Bootstrap的初步集成。文章还提到了在PyCharm中解决模板引用问题的方法，并展示了运行结果。

摘要由CSDN通过智能技术生成

前面我们的项目已经创建好了，也可以继承模板了，相当不错。但是，有没有发现，我们继承的模板是我们自己创建的，没有好看的界面，也没有炫丽的组件，就一个空白HTML文档，那继承了还不如不继承，对不对。于是乎，我们就想到了有没有人家写好的模板，我可以直接拿来用，这样就会节省我们大量的时间和开发成本。这个问题早都有人解决了，那就是使用前端框架来完成。因为前端是一个相当庞大的知识体系，对于我这样的后端开发人员嘛，了解就好，以后有机会再系统学习，现在我们就来了解下如何来使用前端框架—Bootstrap。

至于Bootstrap框架的全部以及详细内容，请参考官网：Bootstrap官网
 bootstrap组件

1、下载安装依赖包

pip install Flask-Bootstrap==3.3.5.6
pip install Flask-Nav==0.4

2、导入包
要使用bootstrap，那就得在项目中导入该依赖包了
app.py

#  -*- coding:utf-8 -*-
from flask import Flask,render_template,request,redirect,url_for
from werkzeug.routing import BaseConverter
from  werkzeug.utils import secure_filename
from flask_script import Manager
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from flask_nav.elements import *
from os import path

class RegexConver(BaseConverter):
    def __init__(self,url_map,*items):
        super(RegexConver,self).__init__(url_map)
        self.regex = items[0]


app = Flask(__name__)
app.url_map.converters['regex'] = RegexConver
app.config['BOOTSTRAP_SERVE_LOCAL']=True
bootstrap = Bootstrap(app)

nav = Nav()
nav.register_element('top',Navbar(u"Flask入门",
                                  View(u'主页'