Flsk-Bootstrap-2

参考：Flask 项目中使用 bootstrap

结构

  1. $ tree -I "__pycache*|*.pyc|*.xlsx" -FCL 3
  2. .
  3. |-- app/
  4. |   |-- __init__.py # 初始文件
  5. |   |-- static/     # 静态文件夹
  6. |   |   |-- css/    # 项目中引入的 css 样式表
  7. |   |   |-- fonts/  # 项目中需要的字体
  8. |   |   |-- images/ # 项目中的图片文件夹
  9. |   |   `-- js/     # 项目中引入的 js
  10. |   |-- templates/  # html 模板文件夹
  11. |   |   |-- common/ # 通用打模板文件
  12. |   |   `-- index.html
  13. |  |   `-- views.py    #视图函数
  14. `-- run.py  # 启动文件

解压Bootstrap

下载Bootstrap,解压到static/,结构如上。

制作基础模板

模板都存放在templates/common/

  1. common/
  2.    |-- base.html
  3.    |-- footer.html
  4.    |-- header.html
  5.    `-- sidebar.html

基础模板base.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8.         <meta name="author" content="xuwei">
  9.         <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}"><!--引入项目的图标，将需要的 ico 文件放到 static/images 文件夹下．-->
  11.         <title>{% block title %}首页{% endblock %}</title>
  12.         <!--设置网页的标题，通过这样的设置，你可以利用 jinja2 的一些特性，将每个网页的标题进行不通的设置．-->
  14.         {% block css %}　<!--css模块区域-->
  15.         <!-- Bootstrap core CSS -->
  16.         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
  17.         <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  18.         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}">
  19.         <!-- Custom styles for this template -->
  20.         <link href="{{ url_for('static', filename='css/offcanvas.css') }}" rel="stylesheet">
  21.         {% endblock %}
  22.     </head>
  24.     <body>
  25.         {% include "common/header.html" %}<!--引入网页的头部模板-->
  26.         <div class="container">
  27.             <div class="row row-offcanvas row-offcanvas-right">
  28.                 {% block content %}<!--自定义模板区域-->
  30.                 {% endblock %}
  31.                 {% include "common/sidebar.html" %}<!--引入网页的侧边模板-->
  32.             </div><!--/row-->
  33.             {% include "common/footer.html" %}<!--引入网页的底部模板-->
  34.         </div>
  36.         {% block js %}<!--js模块区域-->
  37.         <!-- Bootstrap core JavaScript
  38.         ================================================== -->
  39.         <!-- Placed at the end of the document so the pages load faster -->
  40.         <script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
  41.         <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
  42.         <script src="{{ url_for('static', filename='js/offcanvas.js') }}"></script>
  43.         {% endblock %}
  44.     </body>
  45. </html>

footer.html 页脚

  1. <hr>
  3. <footer>
  4.     <p>&copy; 2018 Company, Inc.</p>
  5. </footer>

header.html 页头

  1. <nav class="navbar navbar-fixed-top navbar-inverse">
  2.     <div class="container">
  3.         <div class="navbar-header">
  4.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  5.                 <span class="sr-only">Toggle navigation</span>
  6.                 <span class="icon-bar"></span>
  7.                 <span class="icon-bar"></span>
  8.                 <span class="icon-bar"></span>
  9.             </button>
  10.             <a class="navbar-brand" href="#">Project name</a>
  11.         </div>
  12.         <div id="navbar" class="collapse navbar-collapse">
  13.             <ul class="nav navbar-nav">
  14.                 <li class="active"><a href="#">Home</a></li>
  15.                 <li><a href="#about">About</a></li>
  16.                 <li class="dropdown">
  17.                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  18.                   <ul class="dropdown-menu">
  19.                     <li><a href="#">Action</a></li>
  20.                     <li><a href="#">Another action</a></li>
  21.                     <li><a href="#">Something else here</a></li>
  22.                     <li role="separator" class="divider"></li>
  23.                     <li><a href="#">Separated link</a></li>
  24.                     <li role="separator" class="divider"></li>
  25.                     <li><a href="#">One more separated link</a></li>
  26.                   </ul>
  27.                 </li>
  28.             </ul>
  29.         </div><!-- /.nav-collapse -->
  30.     </div><!-- /.container -->
  31. </nav><!-- /.navbar -->

侧边栏 sidebar.html

  1. <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
  2.     <div class="list-group">
  3.         <a href="#" class="list-group-item active">
  4.             <button type="button" class="btn btn-block btn-danger" aria-label="Left Align">
  5.                 <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  6.             </button>
  7.         </a>
  8.         <a href="#" class="list-group-item">
  9.             <button type="button" class="btn btn-block btn-info" aria-label="Left Align">
  10.                 <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
  11.             </button>
  12.         </a>
  13.         <a href="#" class="list-group-item">
  14.             <button type="button" class="btn btn-primary" aria-label="Left Align">
  15.                 <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
  16.             </button>
  17.         </a>
  18.         <a href="#" class="list-group-item">
  19.             <button type="button" class="btn btn-success" aria-label="Left Align">
  20.                 <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
  21.             </button>
  22.         </a>
  23.         <a href="#" class="list-group-item">
  24.             <button type="button" class="btn btn-block btn-warning" aria-label="Left Align">
  25.                 <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  26.             </button>
  27.         </a>
  28.         <a href="#" class="list-group-item">Link</a>
  29.         <a href="#" class="list-group-item">Link</a>
  30.         <a href="#" class="list-group-item">Link</a>
  31.         <a href="#" class="list-group-item">Link</a>
  32.         <a href="#" class="list-group-item">Link</a>
  33.     </div>
  34. </div><!--/.sidebar-offcanvas-->

首页index.html

  1. {% extends "common/base.html" %}<!--继承基础模板-->
  2. {% block content %}<!--自定义模板区域-->
  3. <div class="col-xs-12 col-sm-9">
  4.   <p class="pull-right visible-xs">
  5.     <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
  6.   </p>
  7.   <div class="jumbotron">
  8.     <h1>Hello, world!</h1>
  9.     <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
  10.   </div>
  11.   <div class="row">
  12.     <div class="col-xs-6 col-lg-4">
  13.       <h2>Heading</h2>
  14.       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  15.       <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  16.     </div><!--/.col-xs-6.col-lg-4-->
  17.     <div class="col-xs-6 col-lg-4">
  18.       <h2>Heading</h2>
  19.       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  20.       <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  21.     </div><!--/.col-xs-6.col-lg-4-->
  22.     <div class="col-xs-6 col-lg-4">
  23.       <h2>Heading</h2>
  24.       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  25.       <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  26.     </div><!--/.col-xs-6.col-lg-4-->
  27.     <div class="col-xs-6 col-lg-4">
  28.       <h2>Heading</h2>
  29.       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  30.       <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  31.     </div><!--/.col-xs-6.col-lg-4-->
  32.     <div class="col-xs-6 col-lg-4">
  33.       <h2>Heading</h2>
  34.       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  35.       <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  36.     </div><!--/.col-xs-6.col-lg-4-->
  37.     <div class="col-xs-6 col-lg-4">
  38.       <h2>Heading</h2>
  39.       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  40.       <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
  41.     </div><!--/.col-xs-6.col-lg-4-->
  42.   </div><!--/row-->
  43. </div><!--/.col-xs-12.col-sm-9-->
  44. {% endblock %}

视图函数

views.py

  1. from app import app
  2. from flask import render_template
  4. @app.route('/', methods=['GET', 'POST'])
  5. def index():
  6.     return render_template('index.html')

初始文件

__init__.py

  1. from flask import Flask
  3. app = Flask(__name__)
  5. from app import views

启动文件

run.py

  1. from app import app
  3. app.run(debug=True)

浏览器

  1. python run.py

浏览器打开：

http://localhost:5000/

Flsk-Bootstrap-2的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. 查看redis连接数

    在redis-cli命令行使用:info clients可以查看当前的redis连接数. 如下图: config get maxclients 可以查询redis允许的最大连接数. 如下图:

  2. MySQL存储引擎InnoDB与MyISAM的区别

    一.比较 事务:InnoDB是事务型的,可以使用Commit和Rollback语句. 并发:MyISAM只支持表级锁,InnoDB还支持行级锁. 外键:InnoDB支持外键. 备份:InnoDB支持在 ...

  3. Centos7安装搜狗输入法.

    系统默认安装输入法管理器的是 ibus. 而搜狗使用 fcitx 1.以我们先要安装 fcitx和必要的软件包 yum -y install fcitx* yum -y install libQtWe ...

  4. Nmon实时监控并生成HTML监控报告

    前面的博客介绍了服务端监控工具:Nmon使用方法,最近在github找到了一个nmon自动监控并生成HTML格式报告的工具:easyNmon,使用体验蛮不错的,这里介绍下它的安装及使用方法. 一.关于 ...

  5. STL—之迭代器，文中推荐的博客很给力

    在此,不再赘述迭代器本身的意义和作用,本质上,迭代器就是一种泛型指针.但是不同的容器对应的迭代器是不同的,我们使用迭代器的时候,需要认识到: 知道迭代器的类型是一件很重要的事情. 在此,给出一个描述迭 ...

  6. 每次用 selenium 操作浏览器都还原了 (比如没有浏览器历史记录)

    每次用 selenium 操作浏览器都还原了 (比如没有浏览器历史记录)

  7. （八）jdk8学习心得之Optional类

    八.Optional 类 1. 作用:可以存放空指针null,主要用于解决空指针问题. 2. 使用方法 1) 创建对象(2种方法) Optional optional = Optional.of(非n ...

  8. Android艺术——性能优化问题

    这次分析方向,我们主要包括:布局优化.绘制优化.内存泄漏优化.响应速度优化.ListView优化.Bitmap优化.线程优化. 布局优化:尽量的减少布局的层级,这意味着Android绘制时的工作量会变 ...

  9. 深入了解servlet

    一.web项目结构 |- WebRoot :   web应用的根目录 |- 静态资源(html+css+js+image+vedio)                             |- W ...

  10. 搭建一个MP-demo(mybatis_plus)

    MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 搭建一个简单的MP-demo 1.配置pom.xml ...