溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Python 前端框架【Bootstrap】

發(fā)布時間：2020-07-28 03:58:33 來源：網(wǎng)絡(luò) 閱讀：1410 作者：流域哈哈 欄目：編程語言

Bootstrap

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

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

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

Python 前端框架【Bootstrap】

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

Python 前端框架【Bootstrap】

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

Python 前端框架【Bootstrap】

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

Python 前端框架【Bootstrap】

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

Python 前端框架【Bootstrap】

在瀏覽器中查看

Python 前端框架【Bootstrap】

在flask中使用bootstrap(flask_bootstrap)

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

安裝

在對應(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中的基模板

Python 前端框架【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 %}
    <!-- Bootstrap -->
    <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中的元素即可實現(xiàn)

繼承bootstrap的基模板后構(gòu)建自己的基模板，以添加一個導(dǎo)航欄為例
{% extends 'bootstrap/base.html' %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <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>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

{% endblock %}

測試主頁繼承自基模板
{% extends 'base.html' %}
{% block title %}
    主頁
{% endblock %}
{% block content %}
    <div class="jumbotron">
        <h2>歡迎來到測試主頁</h2>
    </div>
{% endblock %}
運行flask后，查看測試主頁

Python 前端框架【Bootstrap】

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手