flask加载bootstrap页面

在上一次的基础上,再看看如何家在bootstrap界面,先给大家看看我做的成果

demo.png

首先进入bootstrap中文网下载bootstrap4.0
https://getbootstrap.com/docs/4.0/getting-started/introduction/

(4.3版本没有包含头文件,推荐下载4.0版本)

首先,(1)、进入static文件夹里创建三个文件夹css、images、js

demo.png

(2)、在bootstrap-4.0.0里面找到bootstrap.min.css文件和signin.css(文件路径:bootstrap-4.0.0/docs/4.0./examples/signin)放到刚刚创建的css文件夹里

(3)、修改signin.css为login.css

demo.png

(4)、bootstrap-4.0.0找到bootstrap-social-logo.png这个照片放到images文件夹里

(5)、把index.html(和signin在同一路径下)这个文件放到templates文件夹里面

接着就是修改index.html这个重大工程了
(1)、修改文件名称为:login.html

demo.png (2)、修改两个css文件和bootstrap-social-logo.png图片的路径名 修改前
修改后 修改前 修改后

  小知识
  url_for是个什么东东?
  调用视图函数的url

  在Jinja的HTML文件中，使用url_for('视图函数名称')，可以得到视图函数的url。
  在这里面使用url_for得到文件的视图

除此之外还有一些其他的修改是一些关于html5的知识

修改前 修改后

最后,
(1)、修改app.py文件

demo.png

  @app.route(), 是调用了flask.app.py文件里面的Flask类的route方法，
                route方法所做的事情和add_url_rule类似，
                是用来为一个URL注册一个视图函数，route方法是以装饰器的方式使用的.

之前的视图函数，返回的都是简单的'Hello Wolrd'之类的字符串，怎么返回一个html呢？

  render_template函数会自动在templates文件夹中找到对应的html，
  因此我们不用写完整的html文件路径。用浏览器访问'/'这个地址即可

(2)、点击Tools上传所有文件只服务器 demo.png (3)、运行就可已得到刚开始展示的效果图了. demo.png