Flask学习笔记-- 4

来源：互联网发布：黑格尔的哲学思想知乎编辑：程序博客网时间：2024/06/07 10:06

上篇笔记记录了Renderig Templates，index()视图函数返回的响应是一个index.html 的模板。
这篇笔记中在index.html 模板中添加CSS 和JavaSript，定义网页样式。

from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')def index():    return render_template("index.html")@app.route('/<name>')def hello(name):    return "Hello,%s" % nameif __name__ == "__main__":    app.run(debug=True)

网页显示了index.html 中的内容：

这里写图片描述

Version 6

昨天看了一些css，JavaScript 内容。
可以添加CSS、JavaScript文件到代码中来定义网页样式。

Bootstrapcdn网站中有CSS和JavaScript 文件链接，可以拿过来直接用到自己写的代码中，不用自己写CSS 和JavaScript 文件啦

（1）在index.html的head标签中间添加link标签，href属性粘贴Bootstrapcdn网站中的CSS文件链接；
在boby标签中间添加script标签，src 属性粘贴href属性粘贴Bootstrapcdn网站中的Javascript文件链接。
（昨天笔记中有详细介绍link标签和script标签。）

<!DOCTYPE html>    <html>    <head>        <title>FlaskApp</title>        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    </head>    <body>        <div>            <p>Use templates to write things nicely. </p>            <br>            <p>Notice that the title of the page turned into "FlaskApp"</p>        </div>        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    </body></html>

重新加载网页，发现网页字体发生了变化,文字和页面边界之间空白消失了（还有很多，暂时看不到）

这里写图片描述

Flask Web Development 书中有关于Bootstrap 的章节：

(1) Bootstrap is an open source framework from Twitter that provides user interface components to create clean and attractive web pages that are compatible with all modern web browsers.

(2) Bootstrap is a client-side framework, so the server is not directly involved with it.
All the server needs to do is provide HTML responses that the reference Bootstrap’s cascading style sheet (CSS) and JavaScript files and instantiate the desired components through HTML, CSS, and JavaScript code.

(3) The ideal place to do all this is in templates.

阅读全文

0 0