Bootstrap、Python、Flask 做简单的前端

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，学习和调试更方便。

(3) 其它组件

 我还下载了bootstrap的日期时间控件，它的支持比较强大，比如进行月级别的选择。使用它，在不支持html5的浏览器中也可以正常使用时间日期控件了。

4. 实例

(1) 目录结构

 我只写了index.html和run.py两个文件，使用了python的flask框架支持http服务。其它内容都是从刚下载bootstrap目录下复制过来的（拷进来直接用即可，无需安装），具体的存放位置随意，只要在html文件指定好路径即可。

(2) run.py

(3) index.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中？

  xxxx可以有多个script标签

(8) Div是干什么用的

  Div在html中定义了块，可以通过

的 class 或 id 应用单独的样式。

(9) 怎么让div不换行

  每个Div默认换行，如果不想换行，在head中加，但它会把所有div都变成不换行，一般设完后layout就会乱掉。 实际上，换行是

固有的格式表现，想不换行用

(10) 怎么让几个控件横排，并指定显示比例为1/n

 用

(11) 怎么让一组控件整体居中

 外边加一个

(12) 如何改变元素的值

  在javascript中设定，形如：document.getElementById('draw').value='1'

6. 参考

(1) BootStrap, React, Vue

http://blog.51cto.com/12444007/1967291

(3) Bootstrap网站

https://v3.bootcss.com/

搜索添加公众号：算法学习分享