【flask】flask-bootstrap 与 bootstrap 几点注意的问题

博客已经搬家到“捕获完成”：

https://www.v2python.com

 

下载地址：

https://pypi.python.org/pypi/Flask-Bootstrap

 

bootstrap模板下载：

http://www.bootstrappage.com/

 

bootstrap菜鸟教程

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

 

bootstrap 的代码可视化生成（直接拿这个两个去改，可以搞定80%的页面，比较方便）

http://how2j.cn/k/boostrap/boostrap-button/477.html

http://www.runoob.com/try/bootstrap/layoutit/

 

 

下载模块包进行安装。

       下载地址:https://pypi.python.org/pypi/Flask-Bootstrap

       下载后任意解压到任意目录，进入解压目录

     python setup.py install 

       安装成功

 

解决以下故障：

 

新版本的 ：

在新版的Bootstrap可用flask_bootstrap 代替 flask.ext.bootstrap导入flask-bootstrap模块

 

安装好后，按照方法实现bootstrap：

https://blog.csdn.net/linshuhe1/article/details/51742474

 

 

 

 

精美的免费网站后台管理系统模板（到处都有）

 

 

 

 

第二个资料：

 

 

这里再讲一个Bootstrap的模板

通过将app传入构造方法中进行设置

from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

 

然后，就可以用bootstrap/base.html这个模板了

具体的base的构架，如下截图

 

 

通过下面这个例子，我们来看下怎么样让user.html继承bootstrap的base.html文件

上面的

 

 

 

下面讲的是，因为很多块是Flask-Bootstrap自带的，所以，如果要使用自定义的块，则需要使用super()函数来进行操作，如下示例。

 

 

 

 

后来我曾尝试过不使用flask-bootstrap，直接使用bootstrap的代码来进行网页开发，其实也是可以的。

只需要把bootstrap的代码放到工程目录下，然后在html中把相应的css和js的路径设置正确就OK

 

这个到底对不对？？？？？？？？？？？

其实是不对的。

 

 

flask-bootstrap不同于单独使用bootstrap的地方：

https://blog.csdn.net/GeekLeee/article/details/52554898

 

 

问题：

bootstrap 如何使用 
在这个网站我学到了怎么单独使用bootstrap 
步骤 1 : 
因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上

步骤 2 : 导入js 导入css 
接着导入js和css 
Bootstrap需要JQuery才能正常工作，所以需要导入jquery.mini.js 
接着是 Bootstrap的css，里面定义了各种样式 
最后是 Boottrap的js，用于产生交互效果，比如关闭警告框 
注：顺序不要搞错了，否则有一些效果会出不来。 
首先是JQuery 
然后是Bootstrap css 
最后是Bootstrap js。

步骤 3 : 套用class 
接着就是出现BootStrap的效果，使用是非常简单的，只需要套用 bootstrap css中定义的class即可。 
如按钮，增加class btn btn-success 就能有bootstrap的效果了

按钮

步骤 4 : 本地测试 
首先在右侧下载bootstrap.rar 
解压后和html方在同一个目录下 
js和css的引用也如图所示 

按钮

我照着做了，但是本地测试时显示正常，但是运行服务器就不行了。

(venv) C:\Users\Geek Lee\Practice-Website>python hello.py runserver
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [16/Sep/2016 12:25:30] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [16/Sep/2016 12:25:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [16/Sep/2016 12:25:32] "GET /.js/jquery/2.0.0/jquery.min.js HTTP/1
.1" 404 -
127.0.0.1 - - [16/Sep/2016 12:25:32] "GET /.css/bootstrap/3.3.6/bootstrap.min.cs
s HTTP/1.1" 404 -
127.0.0.1 - - [16/Sep/2016 12:25:32] "GET /.js/bootstrap/3.3.6/bootstrap.min.js
HTTP/1.1" 404 -

我想是服务器没有找到css和js文件夹所以没有效果 
突然想到flask内置了flask-bootstrap，不用使用了 
把上述代码代码改为下列代码：

{% extends "bootstrap/base.html" %}
{% block content %}
按钮
{% endblock %}

不用导入js和css这两个文件夹，因为在{% extends “bootstrap/base.html” %}中已经引入过了，你只需在{% block content %}和{% endblock %}加入你的内容，就行了。 
研究透彻flask-bootstrap基本上在flask框架用前端足够了！ 
就是这个文件夹：