ブートストラップフレームワーク (Python) を美しくするためのサンプルチュートリアル-Python チュートリアル-php.cn

ホームページ

バックエンド開発

Python チュートリアル

ブートストラップフレームワーク (Python) を美しくするためのサンプルチュートリアル

PHPz

Apr 26, 2017 am 10:19 AM

bootstrap

前の章の内容を踏まえると、実際、ページレイヤーに関する限り、機能は簡単に実装できますが、まだ美しさが大きく欠けていることは明らかです。現在、優れたフロントエンドがいくつかあります。 AmazeUI、Tencent WeUI などの CSS フレームワークは、flask とよく統合されているブートストラップフレームワークです

[関連ビデオの推奨: ブートストラップチュートリアル]

インストールフレームワーク

ブートストラップのフレームワークを直接参照しますテンプレート内の CDN またはローカルパスさらに、flask のブートストラップ統合パッケージを直接適用することもできます。まず、統合パッケージをインストールする必要があります:

pip3.6 install flask-bootstrap

これは flask 拡張パッケージです。 flask のすべての拡張パッケージはデフォルトで flask.ext で始まり、bootstrap についても同様です。まず、デフォルトファイルの先頭にあるパッケージをインポートします:

from flask.ext.bootstrap。 import Bootstrap

次に、ブートストラップを初期化してコードを変更します:

bootstrap=Bootstrap(app)

初期化後、Jinja2 の継承メソッドを使用して、これに含まれる Bootstrap の一連の基本テンプレートを使用できます。パッケージ。基本テンプレートは、ブートストラップ内の一連の要素を直接参照します。

jinja2 でのテンプレート継承の使用方法を覚えていますか? 使用する前に、まずベーステンプレートの構造を見てください:

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

ソースコードからわかるように、このベーステンプレートは 12 個のブロックを定義しています。ドキュメント全体 (doc)、html 属性 (html_attribs)、html 全体 (html)、ヘッド部分全体 (head)、タイトル部分 (title)、メタコード部分 (metas)、CSS スタイル (styles)、本文属性 ( body_attribs)、ボディパーツ (body)、ナビゲーション (navbar)、
ページコンテンツ (content)、js (スクリプト)

とタイトル、メタ、css、js にはすべてデフォルトのコンテンツがあるため、{{super( )}} 使用するときは

この基本テンプレートの構造に従って、login.html のコードを次のように変更します:

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

プログラムを実行すると、現在の表示結果は次のようになります:

生成された HTML コードは次のとおりです: :

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

これらの CDN のアドレスに注意してください。場合によっては、これらのアドレスが壁によってブロックされている場合があります。

変更する方法は、Python インストールディレクトリで Libsite-packagesflask_bootstrap フォルダーを見つけることです。フォルダーの下に __init__.py ファイルがあります。これを開くと、次のコードが表示されます。ちなみに、I Bootcdn はよく使われる CDN サーバーです

以下は、test と 123 を入力した後のテストです。

前のテストログイン成功ページがまだ残っています。これは明らかに間違っています。通常、、BBS またはブログは、便宜上、ユーザー名またはパスワードが間違っている場合、すべて同時にホームページにジャンプします。ログインページにプロンプトが表示されます。default.py コードを次のように変更します。

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 "登录失败"

ログインに成功した後のソースコードは次のとおりです。

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

ちなみに、ブートストラップのベーステンプレートは参照されていません。 Index.html のコードを変更し、

{% extends "base.html" % }

の最初の行を
{% extends "bootstrap/base.html" %}に変更します

更新to:

<!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 id="这个站点的名字为-nbsp-myblog-nbsp">这个站点的名字为 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 id="这个站点的名字为-nbsp-site-name-nbsp">这个站点的名字为 {{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 %}

以下でログインします。成功ページの表示結果は次のとおりです:

ページのスタイルはログインページと一致していますが、現在、ユーザー名とパスワードが間違っている場合 (つまり、入力が test と 123 でない場合)、以前と同様にログインエラーが返されるだけでなく、ユーザーは文字列以外の文字列を使用できません。ユーザーのステータスを反映するメソッドが必要です。この点に関して、flask には flash 関数が用意されています。

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") #返回的仍为登录页

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

OK test と入力します。以下の 1234 を実行すると、表示された結果は次のようになります。

ステータスは完璧に表示されています。

美化を続けます

ログインページとコントローラーの基本機能は完成しましたが、このページに限っては、画面全体を占めるログインボックスはなく、一般的に言えば、中央部分です。このブロックはフラスコには関係なく、ブートストラップのグリッドシステムが登場する番です。

栅格系统简单说就是将一个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 id="欢迎您登陆">欢迎您登陆</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 %}

显示结果如下：

毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让flask和mysql进行互联。

以上がブートストラップフレームワーク (Python) を美しくするためのサンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Pythonと時間：勉強時間を最大限に活用するApr 14, 2025 am 12:02 AM

限られた時間でPythonの学習効率を最大化するには、PythonのDateTime、時間、およびスケジュールモジュールを使用できます。 1. DateTimeモジュールは、学習時間を記録および計画するために使用されます。 2。時間モジュールは、勉強と休息の時間を設定するのに役立ちます。 3.スケジュールモジュールは、毎週の学習タスクを自動的に配置します。

Python：ゲーム、GUIなどApr 13, 2025 am 12:14 AM

PythonはゲームとGUI開発に優れています。 1）ゲーム開発は、2Dゲームの作成に適した図面、オーディオ、その他の機能を提供し、Pygameを使用します。 2）GUI開発は、TKINTERまたはPYQTを選択できます。 TKINTERはシンプルで使いやすく、PYQTは豊富な機能を備えており、専門能力開発に適しています。

Python vs. C：比較されたアプリケーションとユースケースApr 12, 2025 am 12:01 AM

Pythonは、データサイエンス、Web開発、自動化タスクに適していますが、Cはシステムプログラミング、ゲーム開発、組み込みシステムに適しています。 Pythonは、そのシンプルさと強力なエコシステムで知られていますが、Cは高性能および基礎となる制御機能で知られています。

2時間のPython計画：現実的なアプローチApr 11, 2025 am 12:04 AM

2時間以内にPythonの基本的なプログラミングの概念とスキルを学ぶことができます。 1.変数とデータ型、2。マスターコントロールフロー（条件付きステートメントとループ）、3。機能の定義と使用を理解する4。

Python：主要なアプリケーションの調査Apr 10, 2025 am 09:41 AM

Pythonは、Web開発、データサイエンス、機械学習、自動化、スクリプトの分野で広く使用されています。 1）Web開発では、DjangoおよびFlask Frameworksが開発プロセスを簡素化します。 2）データサイエンスと機械学習の分野では、Numpy、Pandas、Scikit-Learn、Tensorflowライブラリが強力なサポートを提供します。 3）自動化とスクリプトの観点から、Pythonは自動テストやシステム管理などのタスクに適しています。

2時間でどのくらいのPythonを学ぶことができますか？Apr 09, 2025 pm 04:33 PM

2時間以内にPythonの基本を学ぶことができます。 1。変数とデータ型を学習します。2。ステートメントやループの場合などのマスター制御構造、3。関数の定義と使用を理解します。これらは、簡単なPythonプログラムの作成を開始するのに役立ちます。

プロジェクトの基本と問題駆動型の方法で10時間以内にコンピューター初心者プログラミングの基本を教える方法は？Apr 02, 2025 am 07:18 AM

10時間以内にコンピューター初心者プログラミングの基本を教える方法は？コンピューター初心者にプログラミングの知識を教えるのに10時間しかない場合、何を教えることを選びますか...

中間の読書にどこでもfiddlerを使用するときにブラウザによって検出されないようにするにはどうすればよいですか？Apr 02, 2025 am 07:15 AM

fiddlereveryversings for the-middleの測定値を使用するときに検出されないようにする方法

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。