1. 说明
无论做什么类型的程序，都难免需要给别人展示一下。Web展示是个很好的方案，做起来省事，效果好，可交互，无需安装，跨平台，等等等等，算是个必备技能，与做PPT比肩。 前一阵用pyecharts做网页统计图，发现自己做的界面实在太丑，同时又想引用一些现成的风格和控件，于是学习了一下Web前端框架，顺带熟悉一下JS。菜鸟入门，记录如下，仅供参考。
2. 前端流行框架
先看看几种流行的前端框架：BootStrap, React, Vue。
BootStrap容易上手，学习成本低，它提供了一些常用的css和js，拿来就能用。
React是数据单向响应的，数据发生变化时，前端UI即可随之变化。React可管理Dom树的变化，使页面呈现更快。
Vue站在了React的肩膀上, 许多方面更出色，如数据的双向绑定，速度更快，组件化，方便打包和发布等等，但相对来说上手的难度较大。
长远考虑, 建议使用Vue+node.js. 短期简单使用, BootStrap是个不错的选择。因此在这里选择了Bootstrap。
3. 下载
(1) 下载软件包
https://v3.bootcss.com/getting-started/#download
在此可以直接下载用于生产环境的bootstrap，解压后看到，有css, fonts, js三个目录，总共1.7M。剩下的就是看看怎么在html里面引用它们。
(2) 下载最新源码
更建议下源码，里面有些测试程序和demo，学习和调试更方便。
$ git clone https://github.com/twbs/bootstrap.git
(3) 其它组件
我还下载了bootstrap的日期时间控件，它的支持比较强大，比如进行月级别的选择。使用它，在不支持html5的浏览器中也可以正常使用时间日期控件了。
$ git clone git://github.com/smalot/bootstrap-datetimepicker.git
4. 实例
(1) 目录结构
我只写了index.html和run.py两个文件，使用了python的flask框架支持http服务。其它内容都是从刚下载bootstrap目录下复制过来的（拷进来直接用即可，无需安装），具体的存放位置随意，只要在html文件指定好路径即可。
(2) run.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
app.run(debug=True)
(3) index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="/static/bootstrap-datetime/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
</head>
<body>
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript" src="/static/jquery/js/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-datetime/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
</script>
</body>
</html> 运行效果如下：
5. 问题与解答
在使用中遇到一些问题，整理如下：
(1) 在html中何处加入css和js的引用？
在html中，一般把css写上边，把js写下边，因为如果js较大，load时间较长时，会影响网页显示速度，而css不占load时间，比如有时候我们网速慢，load网页时，字虽然出来了，但一开始风格显示不对，这就是因为css还没load完，也间接地说明css并未在开始load。
(2) Html中的{% xxx %}是干什么用的？
<% %> 里面可以添加java代码片段
(3) 加入日期时间控件是不是还需要下其它的包？
需要另外安装bootstrap-datetimepicker 项目，它包括了年视图，月视图，小时视图，很好用的。
(4) bootstrap需要安装，还是解包后直接使用？
解包后直接使用
(5) 对js和css存放的目录有什么特殊要求？
对于js和css的目录，怎么放都行，只要在程序里指对位置就可以。
(6) Xx.min.js与xx.js有什么区别？
min.js是js的压缩格式
(7) Javascript怎么用在html中？
<script>xxxx<script>可以有多个script标签
(8) Div是干什么用的
Div在html中定义了块，可以通过 <div> 的 class 或 id 应用单独的样式。
(9) 怎么让div不换行
每个Div默认换行，如果不想换行，在head中加<style> div{ float:left} </style>，但它会把所有div都变成不换行，一般设完后layout就会乱掉。 实际上，换行是 <div> 固有的格式表现，想不换行用<span>
(10) 怎么让几个控件横排，并指定显示比例为1/n
用<div class=”row”>
(11) 怎么让一组控件整体居中
外边加一个<div class=’container’>
(12) 如何改变元素的值
在javascript中设定，形如：document.getElementById('draw').value='1'
6. 参考
(1) BootStrap, React, Vue
http://blog.51cto.com/12444007/1967291
(2) Flask 项目中使用 bootstrap
https://blog.csdn.net/os373/article/details/79620450
(3) Bootstrap网站
https://v3.bootcss.com/