flask-bootstrap的使用

bootstrap官网 http://www.bootcss.com/

font-awesome 官网 http://fontawesome.io/

flask-bootstrap 官网 http://pythonhosted.org/Flask-Bootstrap/index.html

1. 安装：pip install flask-bootstrap

2. 使用：

   
   # 导入类库
   from flask_bootstrap import Bootstrap
   # 创建对象
   bootstrap = Bootstrap(app)

3. 添加模板文件，内容如下：

   
   {# 继承自bootstrap的基础模板 #}
   {% extends 'bootstrap/base.html' %}
   ​
   {% block title %}用户登录{% endblock %}
   ​
   {% block content %}
       <div class="container">欢迎您的到来</div>
   {% endblock %}

4. bootstrap的基础模板文件已经提供了很多的block，如下：

   block	说明
   doc	整个HTML文档
   html	html标签
   head	head标签
   title	title标签
   styles	引入层叠样式表
   metas	一组meta标签
   body	body标签
   navbar	用户定义的导航条
   content	用户定义的内容
   scripts	用户定义的JS声明

   在使用时，若重写了某个block，原来的显示就消失了，八成是因为没有调用super

定制基础模板

1. 说明：

   一个项目中，很多时候不同的页面大部分的都是相同的，只有个别的地方稍有不同，若每个页面都定制，势必会有大量的重复工作，为了简化这种操作，我们可以为项目定制一个基础模板，让这个基础模板继承自bootstrap的基础模板，其它的页面都继承该基础模板，只需要做简单的修改，就可达到页面的定制(前提是基础模板比较好)。

2. 步骤：

   
   1.从bootcss.com粘贴一个导航条模板内容
   2.将container-fluid改为container
   3.删除不需要的内容(form)，改为自己想要的效果
   4.改为反色导航条navbar-default => navbar-inverse
   5.将圆角改为直角：style="border-radius: 0px;"
   6.修改折叠标签的选择方式：data-target=".navbar-collapse" 

3. 内容：

   
   {% 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 %}