Bootstrap使用-1

目录

  • 结构:
  • 1. 视图函数
  • 2. 模板
  • 3. 登陆
  • 4. 怎样发生的
    • 添加模板
    • 基础模板提供的block
    • 定制基础模板

结构:

$ tree -I "__pycache*|*.pyc|*.xlsx" -FCL 3
.
|-- templates/
|   `-- h1.html
`-- test-boostracp.py

1. 视图函数

test-boostracp.py

from flask import Flask, render_template
from flask_bootstrap import Bootstrapapp = Flask(__name__)bootstrap = Bootstrap(app)@app.route('/')
def index():return render_template('h1.html')if __name__ == '__main__':app.run()

2. 模板

h1.html

{% extends 'bootstrap/base.html' %}
​
{% block title %}博客中心{% endblock %}
​
{# 导航条 #}
{% block navbar %}<nav class="navbar navbar-inverse" style="border-radius: 0px;"><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=".navbar-collapse" 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="#">首页</a></div>
​<!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="#">板块一</a></li><li><a href="#">板块二</a></li></ul>
​<ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container --></nav>
{% endblock %}
​
{% block content %}<div class="container">{% block page_content %}{% endblock %}</div>
{% endblock %}

3. 登陆

命令:

python test-boostracp.py

浏览器:

http://localhost:5000/

720033-20181205125857832-1281799986.png

4. 怎样发生的

添加模板

{# 继承自bootstrap的基础模板 #}
{% extends 'bootstrap/base.html' %}
​
{% block title %}用户登录{% endblock %}
​
{% block content %}<div class="container">欢迎您的到来</div>
{% endblock %}

基础模板提供的block

block说明
doc整个HTML文档
htmlhtml标签
headhead标签
titletitle标签
styles引入层叠样式表
metas一组meta标签
bodybody标签
navbar用户定义的导航条
content用户定义的内容
scripts用户定义的JS声明

在使用时,若重写了某个block,原来的显示就消失了,八成是因为没有调用super

定制基础模板

定制一个基础模板base.html继承自bootstrap,其他模板继承base.html

一般步骤:

  1. 从bootcss.com粘贴一个导航条模板内容
  2. 将container-fluid改为container
  3. 删除不需要的内容(form),改为自己想要的效果
  4. 改为反色导航条navbar-default => navbar-inverse
  5. 将圆角改为直角:style="border-radius: 0px;"
  6. 修改折叠标签的选择方式:data-target=".navbar-collapse"

转载于:https://www.cnblogs.com/xuwei1/p/10070849.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

段错误、内存溢出、内存泄漏(区别)、堆溢出、栈溢出

参考&#xff1a;内存泄漏、内存溢出、段错误、堆溢出、栈溢出 作者&#xff1a;焦木白 发布时间&#xff1a;2019-10-22 网址&#xff1a;https://blog.csdn.net/jiaomubai/article/details/102680705?spm1001.2014.3001.5501 目录段错误内存溢出内存泄漏栈溢出堆溢出段错误 …

C语言中指针的地址和内容

参考&#xff1a;C语言中指针的地址和内容 作者&#xff1a;wallying 发布时间&#xff1a;2018-10-18 09:47:54 网址&#xff1a;https://blog.csdn.net/qq_36631580/article/details/89375140?spm1001.2014.3001.5502 #include <stdio.h>//一般用"地址"表示…

android运行过程简书,android 启动过程(一)

1、由init.rc调用 app_main.cpp的main方法&#xff0c;启动zygote进程3、调用AndroidRuntime.cpp 的start方法传递ZygoteInit类路径5、AndroidRuntime.cpp的start方法主要启动java虚拟机跟注册虚拟机&#xff0c;调用ZygoteInit的main方法6、ZygoteInit的main方法主要 把zygote…

回调函数 —— 借助中间通用函数(形参里有函数指针,实现函数注册)调用不同的回调函数 (多态/分层)

回调函数传参&#xff1a;函数指针做函数参数&#xff08;回调函数&#xff09; 目录背景回调函数是实现函数分层且单向依赖的好办法&#xff0c;使用函数指针运行struct结构体回调函数代码更清晰简单理解回调函数Demo其他回调函数博文背景 这是我在实际工作中遇到的问题&…

ESP8266等模块

模块讲解学习视频可参照&#xff1a;https://space.bilibili.com/323745961?spm_id_from333.788.b_765f7570696e666f.1 作者&#xff1a;叁议电子 目录ESP8266 WIFI模块介绍电脑操作ESP8266单片机上网ESP8266 WIFI模块介绍 电脑操作ESP8266 单片机上网

html5在线音乐列表播放器,HTML5列表音乐播放器SMusic

插件描述&#xff1a;一款基于HTML5、Css3的列表式音乐播放器&#xff0c;包含列表&#xff0c;音量&#xff0c;进度&#xff0c;时间&#xff0c;歌词展示以及模式等功能&#xff0c;不依赖任何库SMusic使用方法这是一款基于HTML5以及CSS3的列表式音乐播放器&#xff0c;增加…

unzipping/Users/xq/.gradle/wrapper /dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zi

unzipping/Users/xq/.gradle/wrapper /dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to /Users/xq/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9 可能是下载时网络原因造成文件缺失 解决方法&#xff1a; cd /Users/xq/.gradle/w…

WIFI小车APP

对应这篇文章&#xff1a;433M射频遥控灯、震动感应灯、WIFI避障小车 目录代码概要activity_contrl.xmlContrlActivity.javaNetUtils.java详细工程代码下载代码概要 activity_contrl.xml <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android&qu…

[Web App]必胜客宅急送产品设计思路介绍[转]

O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向&#xff0c;迎合餐饮消费者从以往经验判断为主转变为依靠移动设备、LBS、社交网络进行立体决策的过程。App成为联系消费者和餐饮业的重要纽带&#xff0c;承载着在O2O双向流程的闭环中加深消费者对品牌的认同和感情认知的…

使用Raphael实现html中绘图

2019独角兽企业重金招聘Python工程师标准>>> 首先&#xff1a;下载Raphael的javascript库&#xff1a;http://raphaeljs.com/。或者在html页面<head></head>&#xff1a;如下 <script src"http://www.zfanw.com/blog/raphael.js"></…

vivo手机刷机鸿蒙,捡到vivo手机如何刷机

捡到手机&#xff0c;首先建议归还给失主&#xff01;然后如果需要刷机的话&#xff0c;建议可以清除账户密码&#xff1a;可以尝试在手机关机状态同时按住音量上键以及电源键3到4秒手机出现vivo手机标志后&#xff0c;放开按键进入recovery模式&#xff0c;先选择wipe data/fa…

详解ROM和RAM

参考&#xff1a;详解ROM和RAM 作者&#xff1a;嵌入式实验楼 网址&#xff1a;https://mp.weixin.qq.com/s/FhUxMLeAxkhWe5m-gV_hMw 目录1、只读存储器&#xff1a;ROM2、随机访问存储器&#xff1a;RAM内存是计算系统最重要的元素&#xff0c;因为没有它&#xff0c;计算机就…

深入理解STM32内存管理

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

html 手写字效果,canvas画布实现手写签名效果的示例代码

最近项目中涉及到移动端手写签名的功能需求&#xff0c;将实现代码记录于此&#xff0c;供小伙伴们参考指摘哦~HTML代码&#xff1a;手写区清除确定CSS样式&#xff1a;.mSign_signMark_box{padding: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 au…

FTP云盘

参考&#xff1a;FTP云盘项目 作者&#xff1a;糯米啊啊 发布时间&#xff1a; 2021-08-19 10:34:05 网址&#xff1a;https://blog.csdn.net/weixin_43732386?spm1001.2014.3001.5509 参考&#xff1a;自制FTP云盘项目 作者&#xff1a;不说话的小脑斧 发布时间&#xff1a; …

html transform属性,css3 transform属性详解

CSS3变形是一些效果的集合&#xff0c;比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果&#xff0c;每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。CSS3的2D transform函数包括了translate()、scale()、ro…

PHP调用新浪API 生成短链接

我们经常收到类似于这样的短信&#xff08;如下图&#xff09;&#xff0c;发现其中的链接并不是常规的网址链接&#xff0c;而是个短小精悍的短链接&#xff0c;产品中经常需要这样的需求&#xff0c;如果在给用户下发的短信中是一个很长的连接&#xff0c;用户体验肯定很差&a…

Chrome如何下载网页视频

目录第一步&#xff1a;右键&#xff0c;选择「检查」指令&#xff0c;进入代码控制面板第二步&#xff1a;单击代码面板左上角红色标出来的按钮&#xff0c;然后鼠标移到左边视频上第三步&#xff1a;双击src后面的代码&#xff08;全部展开&#xff09;&#xff0c;复制粘贴到…

单链表反转

参考&#xff1a;【图文解析】反转一个单链表 作者&#xff1a;giturtle 发布时间&#xff1a; 2019-03-18 15:26:38 网址&#xff1a;https://blog.csdn.net/qq_42351880/article/details/88637387?spm1001.2014.3001.5501 目录例题描述思路代码实现例题描述 反转一个链表 …

MODBUS通讯协议详解(基于485)

参考&#xff1a;灵育科技Modbus课程总结 作者&#xff1a;Naunyang 时间&#xff1a;2020-11-23 13:51:58 网址&#xff1a;https://blog.csdn.net/Naunyang/article/details/108740456?spm1001.2014.3001.5502 参考&#xff1a;MODBUS用于单片机通讯 作者&#xff1a;hillch…