3.4 使用Flask-Bootstarp集成Twitter Bootstrap

最新推荐文章于 2024-05-16 14:00:55 发布

sjk1996

最新推荐文章于 2024-05-16 14:00:55 发布

阅读量419

点赞数

分类专栏： flask web flask web开发文章标签： python flask web

本文链接：https://blog.csdn.net/sinat_34927324/article/details/79245611

版权

flask web 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

flask web开发

49 篇文章 7 订阅

订阅专栏

—————————————————————————前言——————————————————————————

Bootstrap： Twitter开发的一个开源框架，它提供的用户组件可用于创建整洁且具有吸引力的网页，这些网页还能兼容所有现代web浏览器。

Bootstrap只是客户端框架，不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap层叠样式表（CSS）和Javascript文件的HTML响应，并在HTML， CSS和Javascript代码中实例化所需组件。这些操作最理想的执行场所就是我们上节提到的模板。

——————————————————————————————————————————————————————

2.5节我们讲过为什么需要扩展和怎样安装扩展，我们来简单回忆一下：

1. 使用pip安装扩展包

2. 修改程序文件hello.py，初始化扩展

下面我们就来安装Flask-Bootstrap扩展

一. 安装Flask-Bootstrap扩展

1. 安装扩展包，如图：

2. 修改程序文件hello.py，对扩展初始化：

from flask.ext.bootstrap import Bootstrap

#...

bootstrap = Bootstrap(app)

扩展包总是从flask.ext包里导入，这里我们从bootstrap模块导入Bootstrap类，并且把程序实例对该类进行实例化。

规律：我们发现除了初始化扩展总是从flask.ext包里导入，而且python命名规则是模块名的第一个字母是小写，类名第一个字母都是大写。

二. 使用Flask-Bootstrap扩展

初始化扩展后，我们就可以在程序中使用一个包含所有Bootstrap文件的基模板。（这里的文件是什么意思呢，写过html的朋友会知道，网页除了html语言这些静态内容，还包括网页化妆器CSS还有动态部分javascript，这两部分都是作为文件和html代码分开的，通过标签<link>和<script>引入网页文件，我们有了Bootstrap提供的基模板，也就有了它提供的所有文件）

这个基模板采取的机制和我们上一节讲的继承机制是一样的，我们可以用自己的模板来扩展基模板，如下（user.html）:

{% extends 'bootstrap/base.html' %}

{% block title %}Flasky{% endblock %}

{% block navbar %}

#role属性告诉Accessibility类应用这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。

<div class="navbar navbar-inverse" role="navigation">                                                                                                             

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <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="/">Flasky</a>

        </div>

        <div>

            <ul class="nav navbar-nav">

                <li><a href="/">Home</a></li>

            </ul>

        </div>

    </div>

</div>

{% endblock %}

{% block content %}

<div class="container">

    <div class="page-header">

        <h1>Hello, {{ name }}</h1>

    </div>

</div>

{% endblock %}

我们用三个块title， navbar和content，分别定义了网页的标题，导航条和页面内容。

除了这三个块， Flask-Bootstrap还定义了很多其它块，都可在衍生模板中使用：

块名	说明
doc	整个HTML文档
html_attribs	<html>标签的属性
html	<html>标签的内容
head	<head>标签的内容
title	<title>标签的内容
metas	一组<meta>标签
styles	层叠样式表定义
body_attribs	<body>标签的属性
body	<body>标签中的内容
navbar	用户定义的导航条
content	用户定义的页面内容
scripts	文档底部的JavaScript说明

注意：BootStrap所需的文件再styles和scripts块中声明，如果衍生模板需要往里添加内容，不能覆盖基文件的内容：

{% block scripts %}

{{ super() }}

<script type="text/javascript" src="my-script.js"></script>

{% endblock %}

三. 第二点只是理论介绍，实际操作只需要把3b版本迁到工作区即可：

1.迁出成功以后运行服务器：

2.用浏览器访问网页：

sjk1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.4 使用Flask-Bootstarp集成Twitter Bootstrap

—————————————————————————前言——————————————————————————Bootstrap： Twitter开发的一个开源框架，它提供的用户组件可用于创建整洁且具有吸引力的网页，这些网页还能兼容所有现代web浏览器。Bootstrap只是客户端框架，不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap层叠样式表（CSS）和Javasc
复制链接

扫一扫