在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条、侧边栏等,我们可以使用模板的继承,避免重复编写html代码。现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条。导航条的建立,我们直接使用 Bootstrap 提供的如下 导航条的样式

但在使用Bootstrap的导航条样式之前,需要先引用Bootstrap所需要的 css js 文件以及 jQuery ,我们在 html header 中插入以下代码完成引用:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

这里都是通过链接引用网络上的 css js 文件,而不是将其下载下来并从本地引用。之后我们把上述导航条的代码复制到 html body 中, js css 引用复制到 header 中,浏览器就能显示和图中一样的导航条了。我们再做一些简单的修改和优化,最终我们的导航条是这样的:

具体修改的点是,我把原始的Brand替换成了一个图片作为logo,第一个下拉控件Dropdown删掉了,最右侧的下拉控件增加了一个选项,并把文字都替换成了我们想要的。然后建立了一个 base.css 文件来调整图片大小、控件位置、背景色等等,这一部分都是基础的 html/css 知识,也就不多说。后续所有的网页都要使用这个导航条,我们将含有导航条这个html命名为 base.html ,并在其 body 中,导航条代码的下方增加以下代码:

{% block body_part %}
{% endblock %}

然后新建一个 home.html ,输入以下内容:

{% extends 'base.html' %}
{% block body_part %}
<p>This is body content under nav-bar</p>
{% endblock %}

渲染 home.html 并访问,我们可以看到这样的结果:

因此我们不难理解,在 home.html 中, {% extends 'base.html' %} 表示继承自 base.html home.html block endblock 区间的代码块会自动替换到 base.html 同样名为 body_part block 区域。 block 可以使用多个,例如在 <title> 中也可以使用,以便于不同的页面设置不同的标题。
最终 base.html 代码如下:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}"/>
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <title>{% block page_name %}{% endblock %}-HarpQA</title>
</head>
<nav class="navbar navbar-default">
    <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">
              <img class="logo" src="{{ url_for('static',filename='images/logo.png') }}">
        <!-- 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>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Key Words">
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登录</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">友情链接<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="mailto:liutao25@baidu.com">联系我</a></li>
                <li><a href="http://flask.pocoo.org" target="_blank">Flask官网</a></li>
                <li><a href="https://www.python.org/">Python官网</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="https://www.baidu.com" target="_blank">百度搜索</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="https://www.google.com.hk" target="_blank">Google Search</a></li>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
{% block body_part %}
{% endblock %}
</body>
</html>

请注意一下 base.css logo 图片的引用,我们也使用了 url_for 函数,第一个参数是 static ,代表项目文件夹下 static 文件夹,第二个参数是以 static 文件夹为基准静态文件的相对路径,我们把 js文件/css文件/图片文件 等都放在这个文件夹下,所以这个用法以后会经常使用。我们在收藏网页的时候,网页都有一个小图标,我们也可以在 header 中使用这行html代码来实现:

<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">

favicon.ico 文件放在 static/images 文件夹即可,我们使用了Flask的图标,效果如下图:

base.css 代码如下:

body{
    background: #F3F3F3;
.navbar-brand{
    padding: 0 5px;
    padding-right: 10px;
.logo{
    height: 50px;

 flask系列---ORM与SQLAlchemy (1) - 建立第一个模型(五)

在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条、侧边栏等,我们可以使用模板的继承,避免重复编写html代码。现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条。导航条的建立,我们直接使用Bootstrap提供的如下导航条的样式。但在使用Bootstrap的导航条样式之前,需要先引用Bootstrap所需要的css和js文件以及jQuery,我们在html...
Sufee HTML5管理员仪表板模板(用于Flask!) Sufee是一个响应式Bootstrap 4管理模板。 它为您提供了一系列随时可用的代码段和实用程序,自定义页面,一系列应用程序和一些有用的小部件。 此功能强大的管理模板的预览可在此处获取: : 项目分叉设置以在Flask项目中使用。 演示站点: Chart.js jQuery的 Popper.js gauge.js 加载Google Maps API JQV地图 gmaps 对于烧瓶-迈克·瑞安( Mike Ryan) 原始Colorlib V 1.3.0-2018年10月6日 创建Dockerfile / Docker-Compose-docker pull mikeryan56 / sufee-admin-flas
在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条侧边栏等,我们可以使用模板继承,避免重复编写html代码。现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条导航条的建立,我们直接使用Bootstrap提供的如下导航条的样式。 但在使用Bootstrap导航条样式之前,需要先引用Bootstrap...
例如,针对此问题,使用Bootstrap模态弹出窗口更新Flask-Admin批处理操作中选择的多个记录。 git clone https://github.com/pjcunningham/flask-admin-modal.git cd flask-admin-modal # (optional, create a virtual environment) virtualenv venv && source venv/bin/activate # fetch dependencies; add '--user' if not using a virtualenv pip install -r requirements.txt # launch app w/ optional port number (default: 5000) python 由Flask Framework中的AppSeed生成的。 轻型Bootstrap仪表板是Bootstrap 4管理仪表板模板,旨在美观而简单。 它建立在Bootstrap 4之上,并且具有完全响应能力。 它包含大量元素,可为您提供多种可能性,以创建最适合您需求的应用程序。 它可用于创建管理面板,项目管理系统,Web应用程序后端,CMS或CRM。 DBMS:SQLite,PostgreSQL(生产) 数据库工具:SQLAlchemy ORM,Alembic(模式迁移) 带有蓝图的模块化设计,简单的代码库 基于会话的身份验证(通过flask_login ),表单验证
Flask Bootstrap UI模板模板存储库包含使用 UI框架的应用程序。 该应用程序的结构是基于最佳实践和之前实施中获得的经验。 通过使用模板存储库,您可以具有相同目录结构和文件,以更快地启动新项目。 Python 3.6.x或更高版本 Redis 4.0.x或更高版本(用于速率限制,否则使用内存存储) 创建venv并安装要求 python3 -m venv venv source venv/bin/activate pip3 install -r requirements.txt ; pip3 install -r requirements_dev.txt flask run 运行测试套件 python -m pytest --cov=app --cov-report=term-missing --cov-branch
1. 静态部署 到 https://github.com/WebStackPage/WebStackPage.github.io 将作者写的导航代码 clone 下来。 下载到本地后,删除掉404.html、en文件夹。将cn里面的index.html替换掉根目录的index.html,删除cn文件夹。 上面的步骤是因为我不需要中英文切换,懒。完成后你的目录下应该只剩下assets文件夹和index.html文件。 打开index.html应该能看到如下图所示的初始界面。 注意这里我是在 pycharm
无法从CDN服务v5.0.0-beta1,因为它试图加载v5.0.0 与Bootstrap文档的差异: _wrap_boolean将有额外div不类,如果是FORM_TYPE basic或floating 这是一个例子: from flask_bs4 import Bootstrap [...] Bootstrap ( app ) 这使一些新模板可用,包含包含所有引导资源的空白页面,并具有可用于放置内容的预定义块。 从版本3开始,Flask-Bootstrap具有,您可以检查更多的详细信息。 欢迎使用Flask-BS4示例应用程序。 这将为您概述Flask-BS4软件包如何呈现不同类型的输入字段。 首先,您应该创建一个虚拟环境。 我更喜欢使用: $ python3 -m venv venv
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 因为Bootstrap需要jquery的支持,所以在使用Bootstrap之前要先把jquery插件导入,并且要把bootstrap.js文件放在jquery.js之后改动方可生效。 Bootstrap中有许多好用的组件,只要以规定的class等命名就可以轻松使用这...
接下来看详细步骤,在pycharm中新建Flask项目,然后创建static文件夹,主要用来放css和img和js这些渲染网页的样式文件。创建templates文件夹,用来存放网页。 Boot...
使用 Bootstrap 使用 Bootstrap 实现导航非常简单。鉴于前台界面的导航并不在 Flask 技术体系中,所以本文不打算对 Bootstrap 的细节进行探讨,仅演示基本要点。大家可自行参考下面的文章: Bootstrap 导航栏 Bootstrap4 导航栏 比如,一个最简单的 Flask 程序中,下面的代码就实现了一个漂亮的导航栏: &lt;!DOCTYPE html&gt;...