使用 Flask-Bootstrap 定制网页内容
2020-03-05 19:00
766 查看
1、首先需要安装 flask-bootstrap
(venv) [root@localhost]# pip install flask-bootstrap
2、在 app.py 中引入 Bootstrap 模块
from flask_bootstrap import Bootstrap ... bootstrap = Bootstrap(app)
3、在 HTML 代码中使用继承原有的 bootstrap模板
{% extends 'bootstrap/base.html' %}
4、在 flask-bootstrap 中,常用的 flask 继承属性有以下几个
块 名 | 说 明 |
---|---|
doc | 整个HTML文档 |
html_attribs | <html>标签的属性 |
html | <html>标签中的内容 |
head | <head>标签中的内容 |
title | <title>标签中的内容 |
metas | 一组<meta>标签 |
styles | 层叠样式表定义 |
body_attribs | 标签的属性 |
body | 标签中的内容 |
navbar | 用户定义的导航条 |
content | 用户定义的页面内容 |
scripts | 文档底部的JavaScript声明 |
5、以下示例代码
hello.html
{% extends 'bootstrap/base.html' %}{% 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="#">Brand</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="#">相册</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <form class="navbar-form navbar-left" method="get" action="https://www.baidu.com/s" target="_blank"> <div class="form-group"> <input type="input" name="wd" class="form-control" placeholder="请输入关键字"> </div> <button type="submit" class="btn btn-default">百度搜索</button> </form> <li><a href="#">请登录</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> {% endblock %}
6、写一个蓝图,返回模板
from flask import Blueprint, render_template views1 = Blueprint(name='view1', import_name=__name__) @views1.route("/hello/boots/") def bootsrrap_hello(): return render_template("boots/hello.html")
7、运行结果
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 解决在使用flask时向网页中插入一段包含html标签的内容正常显示的问题
- javascript使用xmlhttp获取网页内容
- VB使用WebBrowser读取网页内容
- [转]: 使用pl/sql获得网页内容
- 使用J2me网络编程访问网页内容
- 使用J2me网络编程访问网页内容--转载哦~~
- Android开发--身高体重指数(BIM)计算--查看线上内容(Uri)--打开网页--重构--使用Uri查看Google地图
- 使用head中的base标签使保存的网页显示完整内容
- 使用网页代码“截取”功能,打印页面某段定义区域内容
- 使用HttpWebRequest的POST取得网页内容(异步操作)2篇集合
- Magento使用正规的方式输出网页(使用phtml文件输出内容)
- 使用javascript去掉打印网页时页眉与页脚的内容
- 使用Python访问并下载网页内容
- 【HTML】使用iframe标签显示目标网页(内容)的指定区域
- 使用HAP抓取HTML网页内容实例
- JSP学习笔记(七十五):使用HttpClient远程抓取网页内容
- 使用 JTidy 协助抽取网页内容
- HTML网页内容判断该网页使用的字符集
- 使用MFC获取网页内容
- 使用Cisco IOS路由器实现网页内容过滤