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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/captain811/article/details/79682768

下载地址:

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框架用前端足够了! 
就是这个文件夹: 
这里写图片描述


猜你喜欢

转载自blog.csdn.net/captain811/article/details/79682768