Explain
- Operating system: Windows 10
- Python version: 3.7x
- Virtual Environment Manager: virtualenv
- Code editor: VS Code
Experimental target
Use bootstrap flask to beautify the page and apply the style of bootstrap 4. X to the website.
Because flask bootstrap hasn't been updated for a long time and doesn't support BS4, here we use the bootstrap flask that supports BS4 to beautify the interface
install
pip install bootstrap-flask
Use
Modify the todolist \ app \ \init.py file. The sample code is as follows
from flask import Flask from flask_sqlalchemy import SQLAlchemy from flask_bootstrap import Bootstrap from config import Config app = Flask(__name__) app.config.from_object(Config) db = SQLAlchemy(app) bootstrap = Bootstrap(app) from app import views
Create the views.py file in the todolist\app directory. The example code is as follows:
from app import app
from flask import render_template
@app.route('/')
@app.route('/index')
def index():
return render_template('index.html', title="home page")
@app.route('/login')
def login():
return render_template('login.html', title='Sign in')
@app.route('/register')
def register():
return render_template('register.html', title='register')Create a nav.html file in the todolist\templates directory. The example code is as follows:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"> wish list</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item {% if request.endpoint == 'index' %} active {% endif %}">
<a class="nav-link" href="{{ url_for('index') }}">home page<span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item {% if request.endpoint == 'login' %} active {% endif %}">
<a class="nav-link" href="{{ url_for('login') }}">Sign in</a>
</li>
<li class="nav-item {% if request.endpoint == 'register' %} active {% endif %}">
<a class="nav-link" href="{{ url_for('register') }}">register</a>
</li>
</ul>
</div>
</div>
</nav>Create a login.html file in the todolist\templates directory. The example code is as follows:
{% extends 'base.html' %} {% block content %}
<h1>Login page</h1>
{% endblock %}Create a register.html file in the todolist\templates directory. The example code is as follows:
{% extends 'base.html' %} {% block content %}
<h1>Registration page</h1>
{% endblock %}Modify todolist\templates\index.html, and the sample code is as follows
{% extends 'base.html' %} {% block content %}
<h1>home page</h1>
{% endblock %}Add a website's ICO format picture resource under the todolist\static directory, named favicon.ico
Modify todolist\templates\base.html, and the sample code is as follows
<!doctype html>
<html lang="en">
<head>
{% block head %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% block styles %}
<!-- Bootstrap CSS -->
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"> {{ bootstrap.load_css() }} {% endblock %} {% if title %}
<title>{{title}}</title>
{% else %}
<title>Wish list</title>
{% endif %} {% endblock %}
</head>
<body>
{% include "nav.html" %}
<div class="container">
<!-- Your page contont -->
{% block content %}{% endblock%}
</div>
{% block scripts %}
<!-- Optional JavaScript -->
{{ bootstrap.load_js() }} {% endblock %}
</body>
</html>At this time, open the shell window of the current project and execute Python management.py to see that bootstrap 4 style has been applied to our website page.