Bootstrap、Python、Flask 做简单的前端

原创

xieyan0811 2022-09-16 14:05:14 博主文章分类：搭建网站和服务 ©著作权

文章标签 bootstrap python flask css html 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者xieyan0811的原创作品，请联系作者获取转载授权，否则将追究法律责任

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文件指定好路径即可。

Bootstrap、Python、Flask 做简单的前端_css

(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> 运行效果如下：

Bootstrap、Python、Flask 做简单的前端_bootstrap_02

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'