第44天: Web 开发 Bootstrap (2)

首页效果

调整浏览器页面大小,可以看到页面自适应效果,是不是很神奇。接下来详细说明一下 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 资源

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"一起学习交流

第44天: Web 开发 Bootstrap

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzjzdz.html