關於bootstrap框架美化的實例教程（python）-Python教學-PHP中文網

首頁

後端開發

Python教學

關於bootstrap框架美化的實例教程（python）

PHPz

Apr 26, 2017 am 10:19 AM

bootstrap

經過上一章的內容，其實就頁面層來說已結可以很輕鬆的實現功能了，但是很明顯美觀上還有很大的欠缺，現在有一些很好的前端css框架，如AmazeUI ,騰訊的WeUI等等，這裡推薦一個和flask整合很好的bootstrap框架

#【相關影片推薦：Bootstrap教學##】

安裝框架

在模板中直接引用bootstrap的CDN或者本地路徑外，還可以直接應用flask的bootstrap集成包,首先需要對集成包進行安裝：

pip3.6 install flask-bootstrap

這是一個flask的擴充包，flask的所有擴充包預設的包名都為flask.ext打頭，同樣bootstrap也是如此，首先在default的檔案的頭部導入套件：

from flask.ext.bootstrap import Bootstrap

然後對bootstrap進行初始化，修改程式碼：

bootstrap=Bootstrap(app)

初始化之後，就可以使用Jinja2的繼承方式使用此套件中的包含的一系列的針對Bootstrap的基底模板。基底模板中直接引用了一系列的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個block，分別對應了整個文件(doc),html屬性(html_attribs),整個html(html),整個head部分(head),title部分(title),meta程式碼部分(metas),css樣式(styles), body屬性(body_attribs),body部分(body),導覽(navbar),

頁面內容(content),js(scripts)

且title，meta，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的安裝目錄下找到Lib\site-packages\flask_bootstrap資料夾，資料夾下有__init__.py文件，打開後看到如下程式碼：

進行修改，順便提一下，我比較常使用bootcdn這個cdn伺服器

下面使用土法進行一下測試，輸入test和123後的結果為：

顯示的還是先前的測試登入成功頁，這顯然是不對的，一般來說，bbs或blog都是跳到登入前的頁面或首頁，現在為了方便起見，都跳到首頁，同時，如果使用者名稱或密碼錯誤，也要在登入頁進行提示，修改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>

哦，對了，沒有引用bootstrap的基底模板，修改index.html的模板程式碼，將第一行的

{% extends "base.html" %}

修改為

{% extends "bootstrap/base.html" %}
##刷新為：

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

看到已經成功引用了bootstrap框架，但是導航部分全部都沒有，這時當然不能在寫一遍導航，直接修改自定義的基模板，然後讓其他模板引用即可，修改基模板為：

{%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函數，下面繼續修改default.py檔：

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

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

好下面輸入test和1234，顯示結果為：

#狀態很完美的顯示出來。

繼續美化

登入的頁面和控制器的基本功能都已經完成，但是僅僅就現在這個頁面來說，沒有登入框佔整個螢幕的，一般來說，都是居中的一部分，這塊不涉及flask的部分，輪到bootstrap的柵格系統登場了。

栅格系统简单说就是将一个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进行互联。

以上是關於bootstrap框架美化的實例教程（python）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

在Python陣列上可以執行哪些常見操作？Apr 26, 2025 am 12:22 AM

Pythonarrayssupportvariousoperations:1)Slicingextractssubsets,2)Appending/Extendingaddselements,3)Insertingplaceselementsatspecificpositions,4)Removingdeleteselements,5)Sorting/Reversingchangesorder,and6)Listcomprehensionscreatenewlistsbasedonexistin

在哪些類型的應用程序中，Numpy數組常用？Apr 26, 2025 am 12:13 AM

NumPyarraysareessentialforapplicationsrequiringefficientnumericalcomputationsanddatamanipulation.Theyarecrucialindatascience,machinelearning,physics,engineering,andfinanceduetotheirabilitytohandlelarge-scaledataefficiently.Forexample,infinancialanaly

您什麼時候選擇在Python中的列表上使用數組？Apr 26, 2025 am 12:12 AM

useanArray.ArarayoveralistinpythonwhendeAlingwithHomoGeneData，performance-Caliticalcode，orinterfacingwithccode.1）同質性data：arraysSaveMemorywithTypedElements.2）績效code-performance-calitialcode-calliginal-clitical-clitical-calligation-Critical-Code：Arraysofferferbetterperbetterperperformanceformanceformancefornallancefornalumericalical.3）

所有列表操作是否由數組支持，反之亦然？為什麼或為什麼不呢？Apr 26, 2025 am 12:05 AM

不，notalllistoperationsareSupportedByArrays，andviceversa.1）arraysdonotsupportdynamicoperationslikeappendorinsertwithoutresizing，wheremactsperformance.2）listssdonotguaranteeconecontanttanttanttanttanttanttanttanttanttimecomplecomecomplecomecomecomecomecomecomplecomectacccesslectaccesslecrectaccesslerikearraysodo。

您如何在python列表中訪問元素？Apr 26, 2025 am 12:03 AM

toAccesselementsInapythonlist，useIndIndexing，負索引，切片，口頭化。 1）indexingStartSat0.2）否定indexingAccessesessessessesfomtheend.3）slicingextractsportions.4）iterationerationUsistorationUsisturessoreTionsforloopsoreNumeratorseforeporloopsorenumerate.alwaysCheckListListListListlentePtotoVoidToavoIndexIndexIndexIndexIndexIndExerror。

Python的科學計算中如何使用陣列？Apr 25, 2025 am 12:28 AM

Arraysinpython，尤其是Vianumpy，ArecrucialInsCientificComputingfortheireftheireffertheireffertheirefferthe.1）Heasuedfornumerericalicerationalation，dataAnalysis和Machinelearning.2）Numpy'Simpy'Simpy'simplementIncressionSressirestrionsfasteroperoperoperationspasterationspasterationspasterationspasterationspasterationsthanpythonlists.3）inthanypythonlists.3）andAreseNableAblequick

您如何處理同一系統上的不同Python版本？Apr 25, 2025 am 12:24 AM

你可以通過使用pyenv、venv和Anaconda來管理不同的Python版本。 1）使用pyenv管理多個Python版本：安裝pyenv，設置全局和本地版本。 2）使用venv創建虛擬環境以隔離項目依賴。 3）使用Anaconda管理數據科學項目中的Python版本。 4）保留系統Python用於系統級任務。通過這些工具和策略，你可以有效地管理不同版本的Python，確保項目順利運行。

與標準Python陣列相比，使用Numpy數組的一些優點是什麼？Apr 25, 2025 am 12:21 AM

numpyarrayshaveseveraladagesoverandastardandpythonarrays：1）基於基於duetoc的iMplation，2）2）他們的aremoremoremorymorymoremorymoremorymoremorymoremoremory，尤其是WithlargedAtasets和3）效率化，效率化，矢量化函數函數函數函數構成和穩定性構成和穩定性的操作，製造

See all articles