Flask-Bootstrap安装及简单使用

Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的

官方文档：https://v3.bootcss.com/getting-started/

与前端相关优质项目

• React 用于构建用户界面的 JavaScript 框架
• svelte Svelte 是构建 Web 应用程序的一种新方法
• nodejs Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
• npm NPM（node package manager）是 Node.js 世界的包管理器
• vue.js Vue.js - 是一套构建用户界面的渐进式框架
• Markdown Markdown 是一种轻量级标记语言

Bootstrap CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Flask插件

Flask-Bootstrap 不支持 Bootstrap4

Bootstrap-Flask 轻量级代替品

这两个不能共存

使用需要安装，注意是虚拟环境，安装后就不需要下载bootstrap或者使用cdn了

pip install  -i https://pypi.tuna.tsinghua.edu.cn/simpletensorflow

使用 Flask-Bootstrap

配置初始化Flask

#ext/__init__.py
from flask_bootstrap import Bootstrap
bootstrap=Bootstrap()

#apps/__init__.py
from ext import db, bootstrap
create_app()
    # 初始化bootstrap
    # db.init_app(app=app) 和数据库db的格式相同
    bootstrap.init_app(app=app)

继承

{#base.html#}
{% extends 'bootstrap/base.html' %}
{% block title %}
index
{% endblock %}

内置 block 块

• title
• navbar
• content
• styles
• scripts
• head
• body

简单实例

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

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

{% block navbar %}
<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="/user/register">register</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">login</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
    {% block mycontent %}
    
    {% endblock %}
<div class="container">
    <div class="page-header">
    {% block page_content %}{% endblock %}
    </div>
</div>
{% endblock %}