仙说{%extends "bootstrap/base.html"%}用法:
在base.html中调用一次即可,并且 {%extends "bootstrap/base.html"%} 要放在 最后头!!最后头!最后头!
base中不用再添加 {% block content%} {% endblock %},等等自带的block ,具体自带 如下图!
因为bootstrap/base.html包含很多block
官方文档
Examples
Adding a custom CSS file:
{% block styles %}
{{super()}}
<link rel="stylesheet"
href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}Custom Javascript loaded before Bootstrap’s javascript code:
{% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}Adding a
lang="en"
attribute to the<html>
-tag:{% block html_attribs %} lang="en"{% endblock %}
再说报错:如果继承中添加
{% block content %}
{% endblock %}
起了两次作用
因为在base.html中添加了 {%extends "bootstrap/base.html"%} 所以名字被占用了
只好改名后js才能在页面显示出来
base.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %} 首页 {% endblock %}</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>{% block mycss %} {% endblock %}</head>
<body><nav class="navbar navbar-inverse "><div class="container"><!-- 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="#">Liu'BLOG</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="{{url_for('blog.index')}}">首页 <span class="sr-only">(current)</span></a></li><li><a href="{{url_for('article.add')}}">发表博客</a></li><li><a href="{{url_for('blog.uall')}}">显示用户</a></li><li><a href="{{url_for('blog.test')}}">测试钩子函数</a></li><li><a href="{{url_for('blog.qiniu')}}">云存储IMG</a></li></ul><form class="navbar-form navbar-left" action="{{url_for('blog.search')}}" method="post"><div class="form-group"><input type="text" class="form-control" placeholder="输入用户名/手机号码" name="search"></div><button type="submit" class="btn btn-default">搜索用户</button></form><ul class="nav navbar-nav navbar-right">{% if session['uname'] %}<li><a href="{{url_for('blog.udetial')}}">欢迎 {{session['uname']}}</a></li><li><a href="{{url_for('blog.exit')}}">注销</a></li>{% else%}<li><a href="{{url_for('blog.login')}}">登录</a></li><li><a href="{{ url_for('blog.register') }}">注册</a></li>{% endif %}</ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>{% block myjs1 %} {% endblock %}
{%extends "bootstrap/base.html"%}</body></html>
继承模板.html
{% extends 'base.html' %}
{% block title %} 用户登录 {% endblock %}{% block content %}{% block myjs1 %}<script>$('#getCode').click(function(){// 获取手机号码文本框的值var phone = $('#phone').val();flag=(phone!=''&&phone.length==11);console.log(phone+"---"+flag);if(flag){// 向服务器发送请求$.getJSON("{{url_for('blog.send')}}",{phone:phone},function(data){});}else{alert('手机号码不能为空,长度必须11位')}})</script>{% endblock %}
可参考:flask-bootstrap/base.html研究以及使用
bootstrap官网 http://www.bootcss.com/
font-awesome 官网 http://fontawesome.io/
flask-bootstrap 官网 http://pythonhosted.org/Flask-Bootstrap/index.html