font-awesome 官网 http://fontawesome.io/
flask-bootstrap 官网 http://pythonhosted.org/Flask-Bootstrap/index.html
安装:
pip install flask-bootstrap
使用:
# 导入类库 from flask_bootstrap import Bootstrap # 创建对象 bootstrap = Bootstrap(app)
添加模板文件,内容如下:
{# 继承自bootstrap的基础模板 #} {% extends 'bootstrap/base.html' %} {% block title %}用户登录{% endblock %} {% block content %} <div class="container">欢迎您的到来</div> {% endblock %}
bootstrap的基础模板文件已经提供了很多的block,如下:
block 说明 doc 整个HTML文档 html html标签 head head标签 title title标签 styles 引入层叠样式表 metas 一组meta标签 body body标签 navbar 用户定义的导航条 content 用户定义的内容 scripts 用户定义的JS声明 在使用时,若重写了某个block,原来的显示就消失了,八成是因为没有调用super
定制基础模板
说明:
一个项目中,很多时候不同的页面大部分的都是相同的,只有个别的地方稍有不同,若每个页面都定制,势必会有大量的重复工作,为了简化这种操作,我们可以为项目定制一个基础模板,让这个基础模板继承自bootstrap的基础模板,其它的页面都继承该基础模板,只需要做简单的修改,就可达到页面的定制(前提是基础模板比较好)。
步骤:
1.从bootcss.com粘贴一个导航条模板内容 2.将container-fluid改为container 3.删除不需要的内容(form),改为自己想要的效果 4.改为反色导航条navbar-default => navbar-inverse 5.将圆角改为直角:style="border-radius: 0px;" 6.修改折叠标签的选择方式:data-target=".navbar-collapse"
内容:
{% extends 'bootstrap/base.html' %} {% block title %}博客中心{% endblock %} {# 导航条 #} {% block navbar %} <nav class="navbar navbar-inverse" style="border-radius: 0px;"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">板块一</a></li> <li><a href="#">板块二</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> {% endblock %} {% block content %} <div class="container"> {% block page_content %}{% endblock %} </div> {% endblock %}