Flask-Bootstrap Bootstrap 是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代 Web 浏览器。
Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了
Bootstrap 层叠样式表（CSS）和
JavaScript 文件的 HTML 响应， 并且 HTML、CSS 和
JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模版。
Flask-Bootstrap 可以在程序中集成
Bootstrap
安装
pip install flask-bootstrap
使用
Flask 扩展一般都在创建程序实例时初始化。
from flask_bootstrap import Bootstrap#...bootstrap = Bootstrap(app)
初始化
Flask-Bootstrap 之后，就可以在程序中使用一个包含所有
Bootstrap 文件的基模版。这个模版利用
Jinja2 的模版继承机制，让程序扩展一个具有基本页面结构的基模版，其中就有用来引入
Bootstrap 的元素。
{% extends "bootstrap/base.html" %}{% block title %}Flasky{% endblock %}{% block navbar %}
{% endblock %}{% block content %}
{% endblock %}
Jinja2 中的
extends 指令从
Flask-Bootstrap 中导入
bootstrap/base.html，从而实现模版继承。
Flask-Bootstrap 中的基模版提供了一个网页框架，引入了
Bootstrap 中的所有 CSS 和 JavaScript 文件。
基模版中定义了可在衍生模版中重定义的块。
block 和
endblock 指令定义的块中的内容可添加到基模版中。
上面这个示例定义了3个块，分别名为
title、
navbar和
content。这些块都是基模版提供的，可在衍生模版中重新定义。
Flask-Bootstrap 的
base.html 模块定义的可用块。
| 块名 |
说明 |
| doc |
整个HTML文档 |
| html_attribs |
标签的属性 |
| html |
标签的内容 |
| head |
标签的内容 |
| title |
标签的内容</td>
</tr>
<tr>
<td>metas</td>
<td>一组 <meta> 标签</td>
</tr>
<tr>
<td>styles</td>
<td>层叠样式表定义</td>
</tr>
<tr>
<td>body_attribs</td>
<td><body> 标签的属性</td>
</tr>
<tr>
<td>body</td>
<td><body> 标签的内容</td>
</tr>
<tr>
<td>navbar</td>
<td>用户自定义的导航条</td>
</tr>
<tr>
<td>content</td>
<td>用户定义的页面内容</td>
</tr>
<tr>
<td>scripts</td>
<td>文档底部的 JavaScript 声明</td>
</tr>
</tbody>
</table> <strong>【Flask扩展（ Flask-Bootstrap）】</strong>注意：上表中很多块都是 <code>Flask-Bootstap</code> 自用的， 如果直接重定义可能会导致一些问题。如果程序需要向已经有内容的块中添加新内容， 必须使用 <code>Jinja2</code> 提供的 <code>super()</code> 函数。例如，如果要在衍生模版中添加新的 <code>JavaScript</code> 文件，需要这么定义：<br />
<blockquote><code>{% block scripts %}
{{ super() }}
<script type="text/javascript" src="https://www.it610.com/article/my-script.js"></script>
{% endblock %}</code></blockquote><br />
</p>
<div class="dede_pages"><ul></ul></div>
<div class="pcd_ad">
<center><div class="_ahwullr0ac"></div>
<script type="text/javascript">
(window.slotbydup = window.slotbydup || []).push({
id: "u6834461",
container: "_ahwullr0ac",
async: true
});
</script>
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
</script></center>
</div>
<div class="mbd_ad">
<div style=margin-top:10px;margin-bottom:10px;>
<div class="_i7aftr79jl"></div>
<script type="text/javascript">
(window.slotbydup = window.slotbydup || []).push({
id: "u5950612",
container: "_i7aftr79jl",
async: true
});
</script>
<!-- ½űֻһ -->
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
</script>
</div>
</div>
<h3>推荐阅读</h3>
<ul class="post-loop post-loop-default cols-0">
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2303094.html" title="车子低速起步咔咔响 车辆低速行驶有咔咔响"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="车子低速起步咔咔响 车辆低速行驶有咔咔响" src="http://img.readke.com/230528/1U9433P3-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2303094.html"> <b>车子低速起步咔咔响 车辆低速行驶有咔咔响 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1283888.html" title="快速提高情商的5大方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="快速提高情商的5大方法" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1283888.html"> <b>快速提高情商的5大方法 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/4020048.html" title="mongodb参数 mongodb 函数性能"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="mongodb参数 mongodb 函数性能" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/4020048.html"> <b>mongodb参数 mongodb 函数性能 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/3315112.html" title="为什么斗鱼的服务器消失了？ 斗鱼怎么看不见服务器了"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="为什么斗鱼的服务器消失了？ 斗鱼怎么看不见服务器了" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/3315112.html"> <b>为什么斗鱼的服务器消失了？ 斗鱼怎么看不见服务器了 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1724416.html" title="超好听的男生女生网名 独特好听男生女生网名"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="超好听的男生女生网名 独特好听男生女生网名" src="http://img.readke.com/230423/024413D22-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1724416.html"> <b>超好听的男生女生网名 独特好听男生女生网名 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1737907.html" title="龟苓膏和烧仙草的区别有什么"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="龟苓膏和烧仙草的区别有什么" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1737907.html"> <b>龟苓膏和烧仙草的区别有什么 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1932770.html" title="肠粉添加硼砂的比例 请查看答案"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="肠粉添加硼砂的比例 请查看答案" src="http://img.readke.com/230504/21315953K-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1932770.html"> <b>肠粉添加硼砂的比例 请查看答案 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/3550917.html" title="jquery自适应位置，js自适应"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="jquery自适应位置，js自适应" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/3550917.html"> <b>jquery自适应位置，js自适应 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1271907.html" title="联想电视屏幕出现竖线维修报价"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="联想电视屏幕出现竖线维修报价" src="http://img.readke.com/230311/1949133409-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1271907.html"> <b>联想电视屏幕出现竖线维修报价 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/3375475.html" title="香椿用热水烫完之后用过凉水吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="香椿用热水烫完之后用过凉水吗" src="http://img.readke.com/231106/21312Q124-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/3375475.html"> <b>香椿用热水烫完之后用过凉水吗 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2998508.html" title="男性包皮过长是什么原因造成的"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="男性包皮过长是什么原因造成的" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2998508.html"> <b>男性包皮过长是什么原因造成的 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/4038525.html" title="iphone14pro暗夜紫色，Iphone屏幕上方出现暗紫色圆圈"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="iphone14pro暗夜紫色，Iphone屏幕上方出现暗紫色圆圈" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/4038525.html"> <b>iphone14pro暗夜紫色，Iphone屏幕上方出现暗紫色圆圈 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2758875.html" title="三星tab s6 lite 三星tab s"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="三星tab s6 lite 三星tab s" src="http://img.readke.com/230718/11312RH0-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2758875.html"> <b>三星tab s6 lite 三星tab s </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1160689.html" title="进天国的七大条件 天国在哪里"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="进天国的七大条件 天国在哪里" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1160689.html"> <b>进天国的七大条件 天国在哪里 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2150700.html" title="加湿器里面可以加香薰精油吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="加湿器里面可以加香薰精油吗" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2150700.html"> <b>加湿器里面可以加香薰精油吗 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2250446.html" title="极左是什么意思 极右是什么意思"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="极左是什么意思 极右是什么意思" src="http://img.readke.com/230526/0H22132T-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2250446.html"> <b>极左是什么意思 极右是什么意思 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2475574.html" title="牛皮"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="牛皮" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2475574.html"> <b>牛皮 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2013450.html" title="猪肉价格今日价最新价"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="猪肉价格今日价最新价" src="/images/defaultpic.gif"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2013450.html"> <b>猪肉价格今日价最新价 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/2007179.html" title="新车贴车衣的好处和坏处有哪些 新车贴车衣的好处和坏处"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="新车贴车衣的好处和坏处有哪些 新车贴车衣的好处和坏处" src="http://img.readke.com/230509/23523U552-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/2007179.html"> <b>新车贴车衣的好处和坏处有哪些 新车贴车衣的好处和坏处 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/1276455.html" title="什么叫危机公关"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="什么叫危机公关" src="http://img.readke.com/230312/11392235K-0-lp.jpg"> </a> </div>
<div class="item-content">
<h4 class="item-title"> <a href="/c/1276455.html"> <b>什么叫危机公关 </b></a></h4>
<div class="item-meta">
<div class="item-meta-right"> </div>
</div>
</div>
</li>
</ul>
<p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/020J404E2022.html" title="flask|Flask Mega-Tutorial V2.0 第13章（I18n和L10n）" target="_blank">flask|Flask Mega-Tutorial V2.0 第13章（I18n和L10n）
</a></li> <li><a href="/c/12253S0562021.html" title="ModuleNotFoundError: No module named 'flask.ext'" target="_blank">ModuleNotFoundError: No module named 'flask.ext'
</a></li> <li><a href="/c/12163C0102021.html" title="vs|VSCode编写简单flask文件&配置其虚拟运行环境（Windows）" target="_blank">vs|VSCode编写简单flask文件&配置其虚拟运行环境（Windows）
</a></li> <li><a href="/c/1215364PH021.html" title="python|Flask jinja2模板加载静态文件" target="_blank">python|Flask jinja2模板加载静态文件
</a></li> <li><a href="/c/121235b392021.html" title="代码|python3 flask开发05 加载图片 添加css样式" target="_blank">代码|python3 flask开发05 加载图片 添加css样式
</a></li> <li><a href="/c/121135C422021.html" title="flask|Nginx+uwsgi+flask部署实战" target="_blank">flask|Nginx+uwsgi+flask部署实战
</a></li> </ul></p>
<div class=entry-copyright>
<p></p>
</div>
</div>
<div class="entry-footer">
<div class="prev-next sb br mb clearfix">
<p class="post-prev fl ellipsis">上一篇：<a href='/c/1210354D42021.html'>前端工作前的准备--环境搭建</a> </p>
<p class="post-next fr ellipsis">下一篇：<a href='/c/1210354D62021.html'>[资源]|[资源] 优秀博客和常用插件</a> </p>
</div>
</div>
</div>
</article>
</main>
<aside class="sidebar">
<div class="widget widget_post_thumb">
<h3 class="widget-title"><span>更多...</span></h3>
<ul>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/092925H3R021.html" title="我最爱的少年.俊勉"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="我最爱的少年.俊勉" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/092925H3R021.html" title="我最爱的少年.俊勉">我最爱的少年.俊勉</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/09101X50R021.html" title="总有一天，你身边会有很多人结婚了有孩子了..."> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="总有一天，你身边会有很多人结婚了有孩子了..." src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/09101X50R021.html" title="总有一天，你身边会有很多人结婚了有孩子了...">总有一天，你身边会有很多人结婚了有孩子了...</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/012T30D32022.html" title="selenium增加失败截屏"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="selenium增加失败截屏" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/012T30D32022.html" title="selenium增加失败截屏">selenium增加失败截屏</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/0919225b52021.html" title="谁都不容易，只是不出声。"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="谁都不容易，只是不出声。" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/0919225b52021.html" title="谁都不容易，只是不出声。">谁都不容易，只是不出声。</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/02154521552022.html" title="vue.js组件开发"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="vue.js组件开发" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/02154521552022.html" title="vue.js组件开发">vue.js组件开发</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/0Z313Q632021.html" title="牙套日记|牙套日记 | 戴牙套两年，真的挺后悔的！"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="牙套日记|牙套日记 | 戴牙套两年，真的挺后悔的！" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/0Z313Q632021.html" title="牙套日记|牙套日记 | 戴牙套两年，真的挺后悔的！">牙套日记|牙套日记 | 戴牙套两年，真的挺后悔的！</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/092R545I2021.html" title="iTop4412|iTop4412 uboot-2019.2移植之内存控制器（七）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="iTop4412|iTop4412 uboot-2019.2移植之内存控制器（七）" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/092R545I2021.html" title="iTop4412|iTop4412 uboot-2019.2移植之内存控制器（七）">iTop4412|iTop4412 uboot-2019.2移植之内存控制器（七）</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/0Z91O12H021.html" title="弹出视图的动画工具类"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="弹出视图的动画工具类" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/0Z91O12H021.html" title="弹出视图的动画工具类">弹出视图的动画工具类</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/09111921162021.html" title="使用git进行版本管理（不断更新中）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="使用git进行版本管理（不断更新中）" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/09111921162021.html" title="使用git进行版本管理（不断更新中）">使用git进行版本管理（不断更新中）</a></p>
</div>
</li>
<li class="item">
<div class="item-img"> <a class="item-img-inner" href="/c/092323IB2021.html" title="linux环境下的各种后台执行"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="linux环境下的各种后台执行" src="/images/defaultpic.gif"> </a></div>
<div class="item-content">
<p class="item-title"><a href="/c/092323IB2021.html" title="linux环境下的各种后台执行">linux环境下的各种后台执行</a></p>
</div>
</li>
</ul>
</div>
</aside>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="clearfix">
<div class="footer-col footer-col-logo"> <!--<img src="/skin/images/logo-footer.png">--></div>
<div class="footer-col footer-col-copy">
<ul class="footer-nav hidden-xs">
<li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li>
<li class="menu-item menu-item-706"><a href="/it/">it技术</a></li>
</ul>
<div class="copyright">
<p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p>
</div>
</div>
<div class="footer-col footer-col-sns">
<div class="footer-sns"> </div>
</div>
</div>
</div>
</footer>
<div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;">
<div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true">
<use xlink:href="#wi-arrow-up-2"></use>
</svg></i></div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<script>var _web_js={};</script>
<script src="/skin/js/index.js"></script>
</body>
</html> |
