在上一次的基础上,再看看如何家在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
修改前
修改后
修改前
修改后
小知识
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文件路径。用浏览器访问'/'这个地址即可
demo.png
demo.png
