使用Flask集成bootstrap的方法

使用Flask集成Bootstrap的方法，需要完成以下几个步骤：

安装Flask 和 Bootstrap

在终端中运行以下命令来安装Flask 和 Bootstrap:

pip install Flask
pip install Flask-Bootstrap

创建Flask应用

创建一个app.py文件，并编写以下代码：

from flask import Flask
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
    return '<h1>Hello Flask and Bootstrap!</h1>'

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

在代码中，我们引入了Flask和Bootstrap并创建了一个Flask应用，并在应用中注册了Bootstrap。在路由中，我们返回了一个包含了HTML标签的字符串，并在启动应用时开启调试模式。

建立HTML模板

在使用Bootstrap前，需要先创建一个HTML模板。创建一个名为base.html的文件，编写以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}{% endblock %}</title>
    {% block styles %}
      <link rel="stylesheet" href="{{bootstrap_url}}">
    {% endblock %}
  </head>
  <body>
    {% block content %}{% endblock %}
    {% block scripts %}
      <script src="{{jquery_url}}"></script>
      <script src="{{bootstrap_url}}"></script>
    {% endblock %}
  </body>
</html>

在这个模板中，我们使用了Flask的模板引擎，并使用了Bootstrap的样式和JavaScript。使用{% block %}标签来定义可被子模板替换的代码块。

创建子模板

基于我们新建的base.html模板，我们可以创建一个新的子模板并包含自己的内容。在这个例子中，我们将创建一个名为index.html的子模板。

在子模板中，包含以下内容：

{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block styles %}
  {{ super() }}
{% endblock %}

{% block content %}
  <h1>Hello Flask and Bootstrap!</h1>
{% endblock %}

{% block scripts %}
  {{ super() }}
{% endblock %}

在这个子模板中，我们继承了base.html模板，并在其中覆盖了title和content内容区块。

运行应用

在终端中运行以下命令启动应用：

python app.py

在浏览器中访问http://localhost:5000，你将看到一个包含Bootstrap样式的页面。

下面是两个使用Flask集成Bootstrap的例子：

例子1

假设我们要创建一个简单的博客应用，在网站的首页需要显示最近发布的博客文章。我们可以创建一个index.html子模板，并从数据库中获取文章数据。

{% extends "base.html" %}

{% block title %}Blog{% endblock %}

{% block styles %}
  {{ super() }}
{% endblock %}

{% block content %}
  <div class="jumbotron">
    <h1>Recent Posts</h1>
  </div>
  <div class="row">
    {% for post in posts %}
      <div class="col-md-4">
        <h3>{{post.title}}</h3>
        <p>{{post.content}}</p>
      </div>
    {% endfor %}
  </div>
{% endblock %}

{% block scripts %}
  {{ super() }}
{% endblock %}

在视图函数中，我们从数据库中获取文章数据，并在渲染模板时将文章数据传递给子模板。

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from models import db, Post

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'

bootstrap = Bootstrap(app)
db.init_app(app)

@app.route('/')
def index():
    posts = Post.query.all()
    return render_template('index.html', posts=posts)

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

例子2

假设我们需要在网站中使用一个包含搜索框和按钮的Bootstrap导航栏。我们可以使用以下代码创建一个名为navbar.html的子模板，并在导航栏中包含搜索框及按钮。

{% block navbar %}
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Flask</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
{% endblock %}

在base.html模板中，我们使用{% include %}标签将navbar.html子模板引入到模板中。如果导航栏存在于多个页面，我们可以将navbar.html子模板作为一个独立的文件。

{% include 'navbar.html' %}

{% block content %}
{% endblock %}

{% block scripts %}
  {{ super() }}
{% endblock %}

在应用中，我们可以使用以下代码渲染包含导航栏的模板。

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

以上就是使用Flask集成Bootstrap的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用Flask集成bootstrap的方法 - Python技术站

使用Flask集成bootstrap的方法

例子1

例子2

相关文章