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

最新推荐文章于 2024-09-30 07:26:05 发布

captain811

最新推荐文章于 2024-09-30 07:26:05 发布

阅读量1w

点赞数 3

分类专栏： flask 网络

本文链接：https://blog.csdn.net/captain811/article/details/79682768

版权

flask 网络专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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的特性，为了正常使用，需要在最开头加上

<!DOCTYPE html>

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

<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

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

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-success">按钮</button>

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

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<button class="btn btn-success">按钮</button>

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

(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，不用使用了
把上述代码代码改为下列代码：

<!DOCTYPE html>
{% extends "bootstrap/base.html" %}
{% block content %}
<button class="btn btn-success">按钮</button>
{% endblock %}

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