熊猫学猿--flask前端页面

最新推荐文章于 2025-02-20 10:10:30 发布

原创最新推荐文章于 2025-02-20 10:10:30 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

python 同时被 2 个专栏收录

25 篇文章

订阅专栏

flask

2 篇文章

订阅专栏

本文介绍如何利用Bootstrap框架和Flask框架搭建一个响应式的网页应用，包括下载Bootstrap、在项目中配置静态资源、使用Flask渲染模板，并展示了具体的代码实现。

1、下载bootstrap https://getbootstrap.com/docs/4.3/getting-started/download/

2、在项目目录下创建static文件夹，将下载的bootstrap解压到该static下

3、新建html，layout.html,url_for引用bootstrap.css

这里的block为定义模块

<!DOCTYPE html>
<title>{% block title %}{% endblock %} - 熊猫学猿</title>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
<section class="content">
  <header>
    {% block header %}{% endblock %}
  </header>
  {% block content %}{% endblock %}
</section>

4、在index.html 使用 extends 引入layout.html,使用block替换layout的内容

<!DOCTYPE html>
{% extends 'layout.html' %}
{% block title %}首页{% endblock %}
{% block header %}
<a href="/">首页</a>->
{% endblock %}
{% block content %}
    <ul class="row">
        <li class="col-4">
            <div class="row">
                <h1>熊猫学猿1</h1>
            </div>
        </li>
        <li class="col-4">
            <div class="row">
                <h1>熊猫学猿2</h1>
            </div>
        </li>
        <li class="col-4">
            <div class="row">
                <h1>熊猫学猿3</h1>
            </div>
        </li>
    </ul>

{% endblock %}

5、在index.py中使用render_template，渲染页面

from flask import  Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
   app.run(debug=True)

6、查看生成的页面源代码。使用Chrome浏览器，按【F12】打开【开发者工具】,index的block定义的内容，已经嵌入到layout的布局中