Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

时间:2022-09-09 11:16:25

一、Bootstrap

  Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。

  Python中,同样可以使用Bootstrap。

  1. 导入Bootstrap库

from flask_bootstrap import Bootstrap

  2. 实例化

Bootstrap(app)

  Samply.py

# coding:utf-8
from flask import Flask,render_template,request,url_for
from flask_bootstrap import Bootstrap app = Flask(__name__)
Bootstrap(app) @app.route('/')
def home():
return render_template('home.html',title_name = 'welcome') @app.route('/service')
def service():
return 'service' @app.route('/about')
def about():
return 'about' if __name__ == '__main__':
app.run(debug=True)

  3. 定义块内容

  home.html

{% extends 'bootstrap/base.html' %}  #声明继承
{% import '_macro.html' as ui %} {% block title %}{{ title_name }}{% endblock %} {% block content %}
<div class="page-header">
<div class="container">
<h1>{{ self.title() }}</h1>
</div>
</div>
<div class="container">
{{ ui.input('username') }}
{{ ui.input('password',type='password') }}
</div>
{% endblock content %} {% block head %}
{{ super() }}
{% include 'includes/_head.html' %}
{% endblock %}

  这时候我们看一下,运行出来是什么样子

Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

------------------------------------------------------------------------------------------------

  基本的内容有了,如果我们想要加上一个标题栏

  可以使用Flask-Nav扩展,如何使用呢?

  1. 导入库

from flask_nav import Nav
from flask_nav.elements import *

  2. 实例化并注册一个导航栏

nav=Nav()
nav.register_element('top',Navbar(u'Flask入门',
View(u'主页','home'),
View(u'关于','about'),
Subgroup(u'项目',
View(u'项目一','about'),
Separator(),
View(u'项目二', 'service'),
),
))

  3. 初始化这个实例

nav.init_app(app)

  以上这些都是在Samply.py文件里

  4. 渲染并定义成块,home.html

{% block navbar %}
{{ nav.top.render() }}
{% endblock %}

  这时候我们看一下,运行出来是什么样子

Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

  5. 增加样式表

  这个时候我们发现配色太单调了,这时候我们可以引用 BootstrapCDN (地址)的CSS样式表,只要把地址填入href中就可以

    不改变原head的情况下,又增加css样式表

{% block styles %}
{{ super() }}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}

  这时候我们看一下,运行出来是什么样子

Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

-------------------------------完成@@-----------------------------------

参考文档:

1. Bootstrap中文网

2. Flask-Nav 文档

3. W3C Bootstrap教程

4. BootstrapCDN页面

附录:

Sample.py

# coding:utf-8
from flask import Flask,render_template,request,url_for
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from flask_nav.elements import *
app = Flask(__name__)
Bootstrap(app)
nav=Nav()
nav.register_element('top',Navbar(u'Flask入门',
View(u'主页','home'),
View(u'关于','about'),
Subgroup(u'项目',
View(u'项目一','about'),
Separator(),
View(u'项目二', 'service'),
),
)) nav.init_app(app)
@app.route('/')
def home():
return render_template('home.html',title_name = 'welcome') @app.route('/service')
def service():
return 'service' @app.route('/about')
def about():
return 'about' @app.template_test('current_link')
def is_current_link(link):
return link == request.path if __name__ == '__main__':
app.run(debug=True)

 home.html

{% extends 'bootstrap/base.html' %}
{% import '_macro.html' as ui %} {% block title %}{{ title_name }}{% endblock %} {% block content %}
<div class="page-header">
<div class="container">
<h1>{{ self.title() }}</h1>
</div>
</div>
<div class="container">
{{ ui.input('username') }}
{{ ui.input('password',type='password') }}
</div>
{% endblock content %} {% block head %}
{{ super() }}
{% include 'includes/_head.html' %}
{% endblock %} {% block styles %}
{{ super() }}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %} {% block navbar %}
{{ nav.top.render() }}
{% endblock %}

 _macro.html

{# 定义宏 #}
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"/>
{% endmacro %}

Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏的更多相关文章

  1. Bootstrap框架&lpar;基础篇&rpar;之按钮&comma;网格&comma;导航栏&comma;下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  2. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  3. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  4. &lbrack;置顶&rsqb;&NewLine; bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  5. Flask入门之结构重组(瘦身)-第13讲笔记

    1. pip list Flask 0.10.1 Flask-Bootstrap 3.3.5.6 Flask-SQLAlchemy 2 Flask-Script 2.0.5 Flask-WTF 0.1 ...

  6. Flask入门第一天

    一.flask介绍 flask诞生于2010年,是Armin ronacher用python语言基于Werkzeug工具箱编写的轻量级web开发框架.flask本身相当于一个内核,其他所有的功能都需要 ...

  7. Flask入门和快速上手

    目录 Flask入门和快速上手 python三大主流框架对比 Flask安装 依赖 可选依赖 创建flask项目 flask最小应用--hello word 非法导入名称 调试模式 路由 唯一的 UR ...

  8. Flask入门系列(转载)

    一.入门系列: Flask入门系列(一)–Hello World 项目开发中,经常要写一些小系统来辅助,比如监控系统,配置系统等等.用传统的Java写,太笨重了,连PHP都嫌麻烦.一直在寻找一个轻量级 ...

  9. Flask【第1篇】:Flask介绍

    Flask入门 一.Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来) Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Wer ...

随机推荐

  1. Alpha阶段测试报告

    测试说明 APP中前后端交互的接口主要有两种,一种是游戏开始前获取信息的HTTP请求接口,这种接口可以看成是静态的,比较简单:另外一种就是游戏过程中进行实时通信的Websocket请求接口,因为这是在 ...

  2. 初试 uTenux

    申请的的开发套件到目前还没到手,看到网友们都开始动手干了,我也是按捺不住了,所以就先在悠龙公司的主页下载了uTenux_V1.5.00r160.zip,打算看看,先了解一下. 下面是文件目录表: └─ ...

  3. Shader for sprite clipping

    Unity3D - Shader for sprite clippinghttp://*.com/questions/23165899/unity3d-shader-for-s ...

  4. Linux 常用

    1,解决ssh登录慢的问题记录 vim /etc/ssh/ssh_config    #   GSSAPIAuthentication no  把下面这一行的注释去掉 2,Linux查看当前是什么系统 ...

  5. openNebulafrontEnd ComputeNode 配置记录

    1,OpenNebula nfs(file system shared) for image datastore;

  6. WITH&plus;HInt MATERIALIZE 不见得有效

    那个要多次调用才需要物化的. 只调用一次,物化没用 MATERIALIZE  语法:MATERIALIZE  描述:指示优化器将内联视图实体化————执行过程中会创建基于视图的临时表. with dd ...

  7. Kafka 源代码分析之LogManager

    这里分析kafka 0.8.2的LogManager logmanager是kafka用来管理log文件的子系统.源代码文件在log目录下. 这里会逐步分析logmanager的源代码.首先看clas ...

  8. node&period;js学习5--------------------- 返回html内容给浏览器

    /** * http服务器的搭建,相当于php中的Apache或者java中的tomcat服务器 */ // 导包 const http=require("http"); cons ...

  9. SSD(single shot multibox detector)算法及Caffe代码详解&lbrack;转&rsqb;

    转自:AI之路 这篇博客主要介绍SSD算法,该算法是最近一年比较优秀的object detection算法,主要特点在于采用了特征融合. 论文:SSD single shot multibox det ...

  10. 深入理解Java虚拟机2-chap3-斗之气9段

    一.GC需要完成三件事 哪些内存需要回收:找出不需要使用的对象 什么时候回收:JVM空闲/堆内存紧张 如何回收:回收垃圾的策略 二.寻找已死对象:第一件事 判断对象是否存活算法 1.引用计数算法 原理 ...