在上一次的基礎上,再看看如何家在bootstrap界面,先給大家看看我做的成果
demo.png
首先進入bootstrap中文網(wǎng)下載bootstrap4.0
https://getbootstrap.com/docs/4.0/getting-started/introduction/
(4.3版本沒有包含頭文件,推薦下載4.0版本)
首先,(1)、進入static文件夾里創(chuàng)建三個文件夾css、images、js
demo.png
(2)降允、在bootstrap-4.0.0里面找到bootstrap.min.css文件和signin.css(文件路徑:bootstrap-4.0.0/docs/4.0./examples/signin)放到剛剛創(chuàng)建的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是個什么東東?
調(diào)用視圖函數(shù)的url
在Jinja的HTML文件中岛请，使用url_for('視圖函數(shù)名稱')，可以得到視圖函數(shù)的url警绩。
在這里面使用url_for得到文件的視圖
除此之外還有一些其他的修改是一些關于html5的知識
修改前
修改后
最后,
(1)崇败、修改app.py文件
demo.png
@app.route(), 是調(diào)用了flask.app.py文件里面的Flask類的route方法，
route方法所做的事情和add_url_rule類似肩祥，
是用來為一個URL注冊一個視圖函數(shù)后室，route方法是以裝飾器的方式使用的.
之前的視圖函數(shù)，返回的都是簡單的'Hello Wolrd'之類的字符串混狠，怎么返回一個html呢岸霹？
render_template函數(shù)會自動在templates文件夾中找到對應的html，
因此我們不用寫完整的html文件路徑将饺。用瀏覽器訪問'/'這個地址即可
demo.png
demo.png
