伸缩自如的Flask [day15] boostrap 4.6

首先可以谈谈为甚么採用boostrap这个框架，我想是因为可以快速搭建一个不难看的网页而且能同时具备了RWD(Responsive Web Design)的功能，让你写好一个网站能同时在手机与电脑上作使用。

至于为甚么选用4.6版本是因为相较于5.0，我觉得能更快速的把框架相容于Flask中。
直接Google搜寻boostrap 4.6第一个搜寻选项就是我们的目标:

接着请到上方Nav bar的地方点选Examples，再点击Download Examples:

恭喜你获得了前端框架，再来只要把喜欢的页面溶入Flask中就可以了。

先把CSS拉到static中并且引入:

<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">

在HTML中引入Bootstrap及JQuery:

<script    src="https://code.jquery.com/jquery-3.5.1.js"    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="    crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

溶入成功，再来可以可以从Docs的文件中了解bootstrap如何排版以及好用的component如何使用。

[day 1] 开场白[day 2] blue_print[day 3] Factory mode[day 4] JWT token[day 5] session[day 6] Jinja[day 7] Post data with Form tag[day 8] ajax with jquery[day 9] request[day 10] 将资料写进DB(pymongo)[day 11] log with mongoDB[day 12] Sql Database[day 13] 档案上传[day 14] 档案下载 及 其他传值方法[day 15] boostrap 4.6[day 16] API[day 17] Docker image化--安装篇[day 18] Docker image化--运行篇[day 19] Nginx[day 20] Docker compose[day 21] Nginx with https[day 22] pythonanywhere 部署[day 23] GCP app engine (介绍)[day 24] GCP app engine (deploy)[day 25] Flask with web cam[day 26] Flask with ML[day 27] Supervisor[day 28] Flask-Mail[day 29] Line Messaging API[day 30] 结语