调整浏览器页面大小,可以看到页面自适应效果,是不是很神奇。接下来详细说明一下 bootstrap-flask 模块
资源助手在小试牛刀中,能看到对 Bootstrap 样式和脚本引用的方法 bootstrap.load_css() 和 bootstrap.load_js(),默认情况下会自动从 Bootstrap 的 CDN 上引用最新版的 Bootstrap 资源,例如: https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css,这样就方便了开发者对 Bootstrap 资源的引用和升级。
使用本地资源如果想要从其他位置或者本地引用资源,只要在给应用初始化完 Bootstrap 之后,将应用的 BOOTSTRAP_SERVE_LOCAL 属性设置为 True 就好了:
app = Flask(__name__) # 创建一个 Flask 应用 bootstrap = Bootstrap(app) # 为应用初始化 bootstrap app.config[\'BOOTSTRAP_SERVE_LOCAL\'] = True # 设置为使用本地资源本地资源放在 static 目录下(这个目录是 Flask 框架默认的静态资源目录),Bootstrap 本地资源放置如下:
bootstrap.load_css()加载 Bootstrap 样式资源,
参数:
version,指定 Bootstrap 样式版本号,默认值为 4.3.1,本地资源无效
bootstrap.load_js()加载 Bootstrap 脚本资源
参数:
version,指定 Bootstrap 脚本版本号,默认为 4.3.1,本地资源无效
jquery_version,指定 JQuery 版本号,默认为 3.3.1,本地资源无效
popper_version,指定 Popper 版本号,默认为 1.14.0,本地资源无效
with_jquery,是否加载 JQuery, 默认为 True
with_popper,是否加载 Popper, 默认为 True
宏bootstrap-flask 主要的改进是加入了很多方法是用的宏,让对页面效果的编辑像写逻辑代码一样,并在宏中还对所处环境信息进行了判断,比如菜单是否要激活,分页控件动态效果等等,下面介绍几个典型的宏
render_nav_item()生成一个导航菜单
参数:
endpoint,路径点,可以直接写视图函数名
text,标题
代码示例:
{% raw %}
{% from \'bootstrap/nav.html\' import render_nav_item %} <nav> <div> {{ render_nav_item(\'index\', \'Home\') }} {{ render_nav_item(\'explore\', \'Explore\') }} {{ render_nav_item(\'about\', \'About\') }} </div> </nav>{% endraw %}
render_breadcrumb_item()面包屑导航条
参数:
endpoint,路径点,可以直接写视图函数名
text,标题
代码示例:
{% raw %}
{% from \'bootstrap/nav.html\' import render_breadcrumb_item %} <nav aria-label="breadcrumb"> <ol> {{ render_breadcrumb_item(\'home\', \'Home\') }} {{ render_breadcrumb_item(\'users\', \'Users\') }} {{ render_breadcrumb_item(\'posts\', \'Posts\') }} {{ render_breadcrumb_item(\'comments\', \'Comments\') }} </ol> </nav>{% endraw %}
render_static()静态资源引用,例如引用 css 、js 或者 图标
参数:
type 资源类型,可以是 css 或 js 或 icon
filename_or_url 资源路径,文件名 或者 参数 local 为 False 时的远程 url
local 是否本地资源,默认为 True
代码示例:
{% raw %}
{% from \'bootstrap/utils.html\' import render_static %} {{ render_static(\'css\', \'style.css\') }}{% endraw %}
其他宏还有有些宏很有用,例如 表单(form)相关的,还有分页相关的,不过这些会涉及到其他 Flask 扩展模块,我们会在介绍 表单 和 数据库 的章节中做进一步学习,如果您有兴趣,可以浏览参考链接中的内容。
总结这篇文章简单介绍了 Flask 框架中如何使用 Bootstrap 扩展,从一个简单的示例开始,讲解了基于 Jinja2 模板引擎的 bootstrap-flask 模块的使用,其中包括资源助手 bootstrap.load_css() 和 bootstrap.load_css() ,以及一些基本的宏的用法,在参考代码中有较为完整的例子,您可以作为参考。在后面的文章中将会陆续介绍 表单 和 数据库 的使用,敬请期待。
示例代码:Python-100-days-day044
参考
bootstrap-flask 文档: https://bootstrap-flask.readthedocs.io/en/latest/basic.html
bootstrap-flask 源码: https://github.com/greyli/bootstrap-flask
Bootstrap: https://getbootstrap.com/
bootstrap-flask 作者:
关注公众号:python技术,回复"python"一起学习交流