Beispiel-Tutorial zur Verschönerung des Bootstrap-Frameworks (Python)-Python-Tutorial-php.cn

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(&#39;css/bootstrap.css&#39;, cdn=&#39;bootstrap&#39;)}}" 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(&#39;jquery.js&#39;, cdn=&#39;jquery&#39;)}}"></script>
 <script src="{{bootstrap_find_resource(&#39;js/bootstrap.js&#39;, cdn=&#39;bootstrap&#39;)}}"></script>
 {%- endblock scripts %}
 {%- endblock body %}
 </body>
{%- endblock html %}
</html>
{% endblock doc -%}

Nach dem Login kopieren

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 %}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 🎜>

Nehmen Sie Änderungen vor. Ich verwende übrigens oft den Bootcdn-CDN-Server.

Verwenden Sie zum Testen die lokale Methode Das Ergebnis lautet:

Die vorherige Test-Login-Erfolgsseite wird weiterhin angezeigt, was offensichtlich falsch ist. Bbs oder Blogs springen jetzt zur Seite, bevor sie sich anmelden Der Einfachheit halber springen alle zur Startseite. Wenn der Benutzername oder das Passwort falsch ist, wird auf der Anmeldeseite eine Aufforderung angezeigt, den default.py-Code wie folgt zu ändern:

Der Quellcode nach erfolgreicher Anmeldung 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=&#39;myblog&#39;)
 else:
 return "登录失败"

Nach dem Login kopieren

Oh, auf die Bootstrap-Basisvorlage wird übrigens nicht verwiesen. Ändern Sie den Vorlagencode von index.html und ändern Sie die erste Zeile von

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>myblog</title>
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>

Nach dem Login kopieren

{% erweitert „base.html“ %}

geändert zu

{% erweitert „bootstrap/base.html“ %}

aktualisiert auf:

Stellen Sie sicher, dass das Bootstrap-Framework erfolgreich referenziert wurde, aber alle Navigationsteile fehlen. Natürlich können Sie die Navigation nicht erneut schreiben Ändern Sie zu diesem Zeitpunkt direkt die benutzerdefinierte Basisvorlage und lassen Sie dann andere Vorlagen darauf verweisen. Ändern Die Basisvorlage lautet:

<!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>

Nach dem Login kopieren

Ändern Sie dann den Homepage-Code:

{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->

{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
</p>
{% endblock %}

Nach dem Login kopieren

Ändern Der Anmeldeseitencode lautet:

{% extends "base.html" %}

{% block content %}
 <h1>这个站点的名字为 {{site_name}} </h1>
{% endblock %}

Nach dem Login kopieren

Das angezeigte Ergebnis der Anmeldeerfolgsseite unten lautet:

{% 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 %}

Nach dem Login kopieren

Der Seitenstil stimmt mit der Anmeldeseite überein Wenn jedoch derzeit der Benutzername und das Passwort falsch sind (d. h. die Eingabe ist nicht test und 123), kann der Benutzer nichts anderes als eine Anmeldefehlerzeichenfolge wissen, also ist es eine Methode In diesem Zusammenhang stellt Flask die Flash-Funktion bereit. Ändern Sie die Datei default.py:

Ändern Sie die Vorlage login.html:

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=&#39;myblog&#39;)
 else:
 flash("您输入的用户名或密码错误")
 return render_template("/login.html") #返回的仍为登录页

Nach dem Login kopieren

Geben Sie unten test und 1234 ein und das angezeigte Ergebnis ist:

{% 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">&times</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 %}

Nach dem Login kopieren

Der Status wird perfekt angezeigt.

Weiter verschönern

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来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改：

{% 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">&times</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

显示结果如下：

毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让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!