Nach dem Inhalt des vorherigen Kapitels ist die Seitenebene tatsächlich fertiggestellt und die Funktion kann problemlos implementiert werden, aber es ist offensichtlich, dass es immer noch an Schönheit mangelt. Jetzt gibt es einige gute Frontends CSS-Frameworks wie AmazeUI, WeUI von Tencent usw. Hier empfehlen wir ein Bootstrap-Framework, das sich gut in Flask integrieren lässt
[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]
Installations-Framework
Zusätzlich zur direkten Referenzierung des Bootstrap-CDN oder des lokalen Pfads in der Vorlage können Sie auch das Bootstrap-Integrationspaket von Flask direkt anwenden. Zuerst benötigen Sie So installieren Sie das Integrationspaket:
pip3.6 install flask-bootstrap
Dies ist ein Flask-Erweiterungspaket. Die Standardpaketnamen aller Flask-Erweiterungspakete Beginnen Sie mit flask.ext, das Gleiche gilt für Bootstrap. Importieren Sie zunächst das Paket am Anfang der Standarddatei:
aus flask.ext.bootstrap import Bootstrap
und dann Bootstrap ausführen. Initialisieren und ändern Sie den Code:
bootstrap=Bootstrap(app)
Nach der Initialisierung können Sie die verwenden Vererbungsmethode von Jinja2 zur Verwendung einer der in diesem Paket enthaltenen Komponenten. Eine Reihe von Basisvorlagen für Bootstrap. Die Basisvorlage verweist direkt auf eine Reihe von Elementen im Bootstrap.
Denken Sie daran, wie Sie die Vorlagenvererbung in jinja2 verwenden. Schauen Sie sich vor der Verwendung zunächst die Struktur der Basisvorlage an:
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="external nofollow" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}Wie aus dem Quellcode ersichtlich ist, ist dies der Fall Definition der Basisvorlage Es gibt 12 Blöcke, die dem gesamten Dokument (doc), den HTML-Attributen (html_attribs), dem gesamten HTML (html), dem gesamten Kopfteil (head), dem Titelteil (title) und dem Metacodeteil ( Metas) und CSS-Stile (Styles), Körperattribute (body_attribs), Körperteil (body), Navigation (navbar),
Seiteninhalt (content), js (scripts)
und Titel, Meta, CSS und JS haben alle Standardinhalte, daher müssen Sie {{super()}} hinzufügen.
Wenn Sie das Programm verwenden, lautet das aktuelle Anzeigeergebnis:
{% extends "bootstrap/base.html"%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->
{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
<p class="container">
<form method="post">
<p class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</p>
<p class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" id="passworld" placeholder="请输入密码">
</p>
<button type="submit" class="btn btn-default">登录</button>
</form>
</p>
</p>
{% endblock %} was viel schöner ist als gerade jetzt: 
Achten Sie auf diese wenigen Die Adresse des CDN wird manchmal von der Wand blockiert . Was soll ich in diesem Fall tun?
<!DOCTYPE html> <html> <head> <title>牛博客 </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"> </head> <body> <nav class="navbar navbar-inverse"><!-- 导航部分 --> 导航 </nav> <!--具体内容--> <p class="container"> <form method="post"> <p class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </p> <p class="form-group"> <label for="passworld">密码</label> <input type="password" class="form-control" id="passworld" placeholder="请输入密码"> </p> <button type="submit" class="btn btn-default">登录</button> </form> </p> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Die Möglichkeit zum Ändern besteht darin, den Ordner Libsite-packagesflask_bootstrap im Python-Installationsverzeichnis zu finden. Nach dem Öffnen wird der folgende Code angezeigt 🎜>
Verwenden Sie zum Testen die lokale Methode Das Ergebnis lautet:
from flask import session #导入session对象
@app.route("/login",methods=["POST"])
def loginPost():
username=request.form.get("username","")
password=request.form.get("password","")
if username=="test" and password=="123" :
session["user"]=username
return render_template("/index.html",name=username,site_name='myblog')
else:
return "登录失败"<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>myblog</title> </head> <body> <h1>这个站点的名字为 myblog </h1> </body> </html>
geändert zu
aktualisiert auf:
<!DOCTYPE html> <html> <head> <title>blog</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>这个站点的名字为 myblog </h1> </body> </html>
{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->
{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
</p>
{% endblock %}{% extends "base.html" %}
{% block content %}
<h1>这个站点的名字为 {{site_name}} </h1>
{% endblock %}{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
<form method="post">
<p class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</p>
<p class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</p>
<button type="submit" class="btn btn-default">登录</button>
</form>
</p>
{% endblock %}
from flask import flash
@app.route("/login",methods=["POST"])
def loginPost():
username=request.form.get("username","")
password=request.form.get("password","")
if username=="test" and password=="123" :
session["user"]=username
return render_template("/index.html",name=username,site_name='myblog')
else:
flash("您输入的用户名或密码错误")
return render_template("/login.html") #返回的仍为登录页{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
{% for message in get_flashed_messages() %}
<p class="alert alert-warning">
<button type="button" class="close" data-dismiss="alter">×</button>
{{message}}
</p>
{% endfor %}
<form method="post">
<p class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</p>
<p class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</p>
<button type="submit" class="btn btn-default">登录</button>
</form>
</p>
{% endblock %}
Die Anmeldeseite und die Grundfunktionen des Controllers wurden fertiggestellt, aber nur für diese Seite gibt es kein Anmeldefeld, das dies aufnimmt Im Allgemeinen ist es der zentrierende Teil, an dem das Rastersystem des Bootstraps nicht beteiligt ist. 栅格系统简单说就是将一个container或container-fluid中分为12个列，每个列都可以合并或偏移，与html中的table类似，并且支持响应式，通过xs，sm，md，lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改： 显示结果如下： 毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让flask和mysql进行互联。 Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Verschönerung des Bootstrap-Frameworks (Python). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
<p class="row"></p>
<p class="row">
<#-- col-md-4表示合并4列，col-md-offset-4表示偏移4列 sm意思相同 --#>
<p class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<p class="page-header">
<h1>欢迎您登陆</h1>
</p>
{% for message in get_flashed_messages() %}
<p class="alert alert-warning">
<button type="button" class="close" data-dismiss="alter">×</button>
{{message}}
</p>
{% endfor %}
<form method="post">
<p class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</p>
<p class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</p>
<button type="submit" class="btn btn-default">登录</button>
</form>
</p>
</p>
</p>
{% endblock %}Nach dem Login kopieren
