Flask学习笔记-2-扩展bootstrap,moment
来源:互联网 发布:淘宝买茶叶靠谱吗 编辑:程序博客网 时间:2024/05/19 00:42
1.Flask-Bootstrap:集成Twitter开发的一个开源框架Bootstrap
Bootstrap 是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。Bootstrap是客户端框架,因此不会直接涉及服务器。服务器需要做的指示提供引用了 Bootstrap 层叠样式表(CSS)和 Javascript 文件的 HTML 响应,并在 HTML、CSS 和 JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。
安装pip install flask-bootstrap
视图函数中调用run.pyfrom flask_bootstrap import Bootstrap
app=Flask(__name__)
bootstrap = Bootstrap(app) #生成实例
编写模板HTML base.html
{% extends "bootstrap/base.html" %}{% block title %}Flask{% 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="/">Flasky</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> </ul> </div> </div></div>{% endblock %}{% block content %}<div class="container"> {% block page_content %}{% endblock %}</div>{% endblock %}
2. 使用Flask-Moment本地化日期和时间
安装
pip install flask-moment
视图函数中run.py
from flask import *
from datetime import datetime
from flask_bootstrap import Bootstrap
from flask_moment import Moment
app=Flask(__name__)
bootstrap = Bootstrap(app)
moment=Moment(app)
@app.route('/')
def index():
current_time=datetime.utcnow()
return render_template('index.html',current_time=current_time)
渲染模板 base.html 中加入下面这段代码
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}
index.html
{% extends "base.html" %}
<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow() }}</p>
注意:
除了moment.js,Flask-Moment还依赖jquery.js。但是Bootstrap中已经引入了jquery.js,故只需要引入moment.js
1.{{ moment.include_moment() }}:引入moment.js,请注意上方的{{ super() }}
- Flask学习笔记-2-扩展bootstrap,moment
- Flask扩展: Flask-Moment
- Flask笔记(3)--扩展包Flask-WTF,Flask-Moment
- Flask扩展: Flask-Bootstrap
- Flask学习记录之Flask-Moment
- Flask学习总结笔记(6) -- Flask-Moment本地化日期和时间
- Flask-Moment
- Flask学习笔记-- 2
- python Flask学习笔记(二)-集成bootstrap
- Flask web学习笔记2
- BootStrap学习笔记-2
- 【Bootstrap学习笔记2】
- flask 学习 笔记,day01(基于python 2)
- Flask-SQLALchemy学习笔记
- Flask学习笔记-1
- Flask源码学习笔记
- flask学习笔记
- flask学习笔记(-模板)
- 栈
- C#开发的程序大致分为4种类型
- Linux下最完整的Samba服务器配置攻略
- Java SE学习笔记:抽象思想、包装类、final修饰符、代码块
- 寝室PC主机也能建站联网,在校大学生借助花生壳玩转“内网穿透”
- Flask学习笔记-2-扩展bootstrap,moment
- Spring data jpa 和 ORM框架的关系
- Java垃圾回收浅谈
- 子数组的最大乘积
- 程序员面试金典: 9.13 C和C++ 13.2 比较并比对散列表和STL map。散列表是如何实现的?如果输入的数据量不大,可以选用哪些数据结构替代散列表?
- 随机森林到底是啥?
- 自定义Inspector检视面板--可以NGUI Script->Editor目录下的脚本是怎样操作的
- 【认证】【Spain】TDT Premium
- Android开发的一些学习网址