首页
学习
活动
专区
工具
TVP
发布

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/

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190112G0PGX900?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券