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

最后编辑于：2019.11.10 20:46:38

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

flask加载bootstrap页面