當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Python 前端框架【Bootstrap】

發(fā)布時(shí)間：2024/4/14 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Python 前端框架【Bootstrap】小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Bootstrap

Bootstrap是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。

使用bootstrap組件構(gòu)建頁面元素

獲取css源在官網(wǎng)中選擇版本后進(jìn)入如下界面

選擇下載源碼進(jìn)行本地導(dǎo)入，或者在聯(lián)網(wǎng)狀態(tài)下導(dǎo)入網(wǎng)絡(luò)位置的css

在html中導(dǎo)入bootstrap.css

在網(wǎng)絡(luò)上選擇需要選用的組件，這里以按鈕為例

復(fù)制代碼粘貼至html中，并根據(jù)需求修改內(nèi)容

在瀏覽器中查看

在flask中使用bootstrap(flask_bootstrap)

flask_bootstrap可以使我們快速在flask框架中使用bootstrap來構(gòu)建我們的頁面

安裝

在對(duì)應(yīng)的環(huán)境中使用pip 安裝 pip install flask_bootstrap

使用

在flask工程中主程序app.py中添加代碼如下： from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap(app) templates中的html文件可以直接導(dǎo)入flask_bootstrap中的基模板

可以在flask_bootstrap包中的templates/bootstrap/base.html查看基模板 {% 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 %}<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" 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 -%} 基模板中完成了bootstrap的css和js導(dǎo)入繼承后直接添加bootstrap中的元素即可實(shí)現(xiàn)繼承bootstrap的基模板后構(gòu)建自己的基模板，以添加一個(gè)導(dǎo)航欄為例 {% extends 'bootstrap/base.html' %}{% block navbar %}<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">測試頁面</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div></div></nav>{% endblock %} 測試主頁繼承自基模板 {% extends 'base.html' %} {% block title %}主頁 {% endblock %} {% block content %}<div class="jumbotron"><h1>歡迎來到測試主頁</h1></div> {% endblock %} 運(yùn)行flask后，查看測試主頁

轉(zhuǎn)載于:https://blog.51cto.com/13992211/2360333

總結(jié)

以上是生活随笔為你收集整理的Python 前端框架【Bootstrap】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。