网站设计与制,湖北网站建设免费,企业网站建设咨询,成都电商网站开发要想在程序中集成Bootstrap#xff0c;显然要对模板做所有必要的改动。不过#xff0c;更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展#xff0c;简化集成的过程。
安装#xff1a;
Flask-Bootstrap 使用pip安装#xff1a;
pip install flask_bootstrap Fl…要想在程序中集成Bootstrap显然要对模板做所有必要的改动。不过更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展简化集成的过程。
安装
Flask-Bootstrap 使用pip安装
pip install flask_bootstrap Flask 扩展一般都在创建程序实例时初始化下面是Flask_Bootstrap的初始化方法
加载
from flask_bootstrap import Bootstrap
初始化
方法一
app Flask(__name__) Bootstrap(app)
方法二
实例
页面加入 { %extends bootstrap/base.html %}
!DOCTYPE html
html langen
headmeta charsetUTF-8title{% block title %} 首页 {% endblock %}/title{% block mycss %} {% endblock %}
/head
bodynav classnavbar navbar-inverse div classcontainer!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href{{url_for(blog.index)}}首页 span classsr-only(current)/span/a/lilia href{{url_for(article.add)}}发表博客/a/lilia href{{url_for(blog.uall)}}显示用户/a/lilia href{{url_for(blog.test)}}测试钩子函数/a/li/ulform classnavbar-form navbar-left action{{url_for(blog.search)}} methodpostdiv classform-groupinput typetext classform-control placeholder输入用户名/手机号码 namesearch/divbutton typesubmit classbtn btn-default搜索用户/button/formul classnav navbar-nav navbar-right{% if session[uname] %}lia href{{url_for(blog.udetial)}}欢迎 {{session[uname]}}/a/lilia href{{url_for(blog.exit)}}注销/a/li{% else%}lia href{{url_for(blog.login)}}登录/a/lilia href{{ url_for(blog.register) }}注册/a/li{% endif %}/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/nav{%extends bootstrap/base.html%}
{% block content %} {% endblock %}{% block myjs %} {% endblock %}
/body
/html 效果 Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/base.html 从而实现模板继承。Flask-Bootstrap 中的基模板提供了一个网页框架引入了Bootstrap 中的所有CSS 和JavaScript 文件。基模板中定义了可在衍生模板中重定义的块。block 和endblock 指令定义的块中的内容可添加到基模板中。上面这个user.html 模板定义了3 个块分别名为title、navbar 和content。这些块都是基模板提供的可在衍生模板中重新定义。title 块的作用很明显其中的内容会出现在渲染后的HTML 文档头部放在title 标签中。navbar 和content 这两个块分别表示页面中的导航条和主体内容。在这个模板中navbar 块使用Bootstrap 组件定义了一个简单的导航条。content 块中有个div 容器其中包含一个页面头部。之前版本的模板中的欢迎信息现在就放在这个页面头部。运行结果如下图
Flask-Bootstrap 的base.html 模板还定义了很多其他块都可在衍生模板中使用下表列出了所有可用的块 块名 说明doc整个html文档html_attribshtml标签属性html html标签中的内容headhead标签中的内容titletitle标签中的内容metas一组meta标签styles层叠样式表定义body_attribsbody标签的属性bodybody标签中的内容navbar用户定义的导航条content用户定义的页面内容scripts文档底部的JavaScript 声明上表中的很多块都是Flask-Bootstrap 自用的如果直接重定义可能会导致一些问题。例如Bootstrap 所需的文件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容必须使用Jinja2 提供的super() 函数。例如如果要在衍生模板中添加新的JavaScript 文件需要这么定义scripts 块
{% block scripts %}
{{ super() }}
script typetext/javascript srcmy-script.js/script
{% endblock %}
关于settings配置文件
BOOTSTRAP_USE_MINIFIED True # 使用mini版的bootstrap文件
BOOTSTRAP_SERVE_LOCAL False #是否使用本地服务器来提供bootstrap文件
BOOTSTRAP_LOCAL_SUBDOMAIN None # 关于blueprint的子域名传输暂时没用到
BOOTSTRAP_CDN_FORCE_SSL True # 给CDN加速使用安全的https连接
