python(Flask-bootstrap、wtf)

最新推荐文章于 2024-05-16 09:09:08 发布

qq_43194257

最新推荐文章于 2024-05-16 09:09:08 发布

阅读量714

点赞数

本文链接：https://blog.csdn.net/qq_43194257/article/details/88224344

版权

本文详细介绍了如何在Flask中集成Bootstrap，包括Bootstrap的基本介绍、Flask-Bootstrap的安装与使用，以及如何通过Flask-Bootstrap实现页面结构。同时，文章还探讨了Flask中集成WTForms处理web表单，阐述了Flask-WTF的特点、优势以及使用流程，并给出了表单验证和邮件发送的案例。

摘要由CSDN通过智能技术生成

Flask中集成bootstrap

1. 什么是Bootstrap?

Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。

2. Flask中如何集成Bootstrap?

使用 pip 安装Flask-Bootstrap 的 Flask 扩展,简化集成的过程。

# 在业务逻辑app.py中实例化Bootstrap对象，用于继承
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

3. Flask-Bootstrap实现了什么?

利用 Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中
就有用来引入 Bootstrap 的元素。

# 在页面逻辑的基模板base.html中
{ % extends "bootstrap/base_other.html" % }

基模板中定义了可在衍生模板中重定义的块。

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

程序需要向已经有内容的块中添加新内容,必须使用 Jinja2 提供的 super() 函数。

{% block scripts %}
{# 先继承父类的js声明，在添加自己定义的js声明#}
{
  { super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

自定义base.html：

{# 继承自集成bootstrap对象中的基模板#}
{% extends 'bootstrap/base.html' %}

{% block styles %}
    {#  先继承父类的css样式导入   #}
    {
  { super() }}
    <link rel="stylesheet" href="{
  { url_for('static', filename='css/main.css') }}">
{% endblock %}

{% 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="#">Todo</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="#">主页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="{
  { url_for('list') }}">用户信息</a></li>

最低0.47元/天解锁文章

qq_43194257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python(Flask-bootstrap、wtf)

Flask中集成bootstrap1. 什么是Bootstrap?Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。2. Flask中如何集成Bootstrap?使用 pip 安装Flask-Bootstrap 的 Flask 扩展...
复制链接

扫一扫