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

问题:

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

步骤 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的效果了


<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的引用也如图所示
flask-bootstrap不同于单独使用bootstrap的地方_第1张图片


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


{% 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框架用前端足够了!
就是这个文件夹:
flask-bootstrap不同于单独使用bootstrap的地方_第2张图片

你可能感兴趣的:(-----flask,-----bootstrap)