Flask Bootstrap #3 - BootStrap快速入门

news2024/11/13 12:12:05

Reference

  • https://www.bilibili.com/video/BV1AQe9eqEj7/?p=2&spm_id_from=pageDriver&vd_source=3d4b12fb4a4bfbc98942d43612ae2fb9

1 BootStrap

BootStrap,别人写好的一堆css样式,我们可以直接拿过来用,我们只要掌握两点就可以开始使用BootStrap:

  • BootStrap中什么样式对应什么效果
  • 如何在项目中引入BootStrap

2 下载BootStrap

进入下载地址,下载生产文件,将文件夹解压后,把文件夹放到 static 文件夹下
在这里插入图片描述

3 使用BootStrap

3.1 测试

templates 文件夹下新建一个 test.html,添加一个button标签,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap_test</title>
</head>
<body>
    <input type="button" value="提交">
</body>
</html>

用浏览器打开,可以看到此时没有css样式体现
在这里插入图片描述

3.2 使用BootStrap

  1. 使用 link 引入BootStrap
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap_test</title>
    <link rel="stylesheet" href="../static/bootstrap-4.6.2-dist/css/bootstrap.min.css">
</head>
<body>
    <input type="button" value="提交">
</body>
</html>
  1. 进入bootstrap官方文档,查询button的样式
    在这里插入图片描述
  2. 对应修改 input 标签的class则会得到对应的样式效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap_test</title>
    <link rel="stylesheet" href="../static/bootstrap-4.6.2-dist/css/bootstrap.min.css">
</head>
<body>
    <input type="button" class="btn btn-primary" value="提交">
</body>
</html>

在这里插入图片描述

4 在flask中启动对应html

修改 app 文件夹中的 __init__.pyroute.py

  • __init__.py

    from flask import Flask
    from app.route import hello_world,test_html
    	
    def create_app():
        app = Flask(__name__,template_folder='../templates',static_folder="../static")
        app.add_url_rule('/hello_world', 'hello_world', hello_world)
        app.add_url_rule('/test_html', 'test_html', test_html)
        return app
    
  • route.py

    from flask import render_template
    
    def hello_world():
        return "Hello, MVC框架!"
    
    def test_html():
        return render_template("test.html")
    
  • 修改 test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>bootstrap_test</title>
        <link rel="stylesheet" href="{{url_for('static',filename='bootstrap-4.6.2-dist/css/bootstrap.min.css')}}">
    </head>
    <body>
        <input type="button" class="btn btn-primary" value="提交">
    </body>
    </html>
    

修改相对路径相关的设置是为了能让 jinjia2 能够正确找到文件,运行 python main.py ,手动跳转到/test_html,网页运行正常
在这里插入图片描述

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

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

相关文章

【TabBar嵌套Navigation案例-自定义tabBar-封装 Objective-C语言】

一、再来说一个自定义tabbar的问题啊, 1.首先呢,这个tabbar,看起来好像效果是实现了,没有什么问题,但是说,从业务逻辑上来讲的话,这样做,是不太好的, 1)首先,我们去创建啊,我们自定义的一个UIView, UIView里边,有很多子控件,那么这个子控件,应该是写在你这个V…

kubernetes管理GUI工具Lens

从github上可以知道&#xff0c;lens的前端是用electron做的客户端工具&#xff0c;打开安装路径你会发现kubectl.exe,没错&#xff0c;就是你经常用的kubectl命令行的客户端工具。kubectl本来就能输出json的数据类型&#xff0c;集成前端更方便了。看到这里你是不是发现&#…

MoE技术揭秘——混合专家模型的计算奥秘

MoE技术揭秘——混合专家模型的计算 MoE技术的类比 你可以把MoE技术比作一个“智能团队”&#xff0c;团队中的每个成员&#xff08;专家&#xff09;都有自己擅长的领域。当面对一个问题时&#xff0c;只有擅长此问题的成员才会参与解答&#xff0c;这样既提高了效率&#xff…

如何开发属于自己直播平台的主播美颜SDK?

本篇文章&#xff0c;笔者将从需求分析、技术选型、开发流程等方面进行详细讲解。 一、需求分析 在开发美颜SDK之前&#xff0c;首先需要进行详细的需求分析。主要包括以下几个方面&#xff1a; 1.美颜功能的具体需求&#xff1a;确定美颜效果&#xff0c;包括磨皮、美白、瘦…

懂个锤子Vue 项目工程化扩展:

Vue项目工程化扩展&#x1f4f6;&#xff1a; 前言&#xff1a;当然既然学习框架的了&#xff0c;HTMLCSSJS三件套必须的就不说了&#xff1a; JavaScript 快速入门 紧跟前文&#xff0c;目标学习Vue2.0——3.0&#xff1a; 懂个锤子Vue、WebPack5.0、WebPack高级进阶 涉及的…

4418 4412 的 bl1 , bl2 的理解

之前一直 对 三星的 bl1 , bl2 不是很理解。 网上的资料 我自己的 测试&#xff1a; 我在 4418 的源码中没有找到这个 2ndboot 文件夹。

仅花3小时搭好一套仓库管理系统,老板看了直呼哇塞

公司仓库管理长期效率低下&#xff0c;让团队头疼不已。没想到&#xff0c;一位同事凭借自学的零代码系统搭建技能&#xff0c;仅用时3小时就搭建出了一套完善的仓库管理系统&#xff0c;不仅操作简便&#xff0c;还大幅提升了工作效率。老板亲自验收后连连夸赞直接给了1w奖金&…

Unity Yaml

资料 UnityYaml 项目设置 选择用于存储序列化资产的格式 Project Settings->Asset Serialization->Mode Force Text 序列化为文本文件,例如场景文件 保存为yaml格式 方便查看&#xff1b;版本控制时文本文件比二进制文件更容易合并Force Binary 序列化为二进制文件&a…

图片格式怎么转换?这几种图片格式转换方法简单又高效

图片已成为我们日常生活与工作中不可或缺的一部分。然而&#xff0c;不同平台和应用往往对图片格式有着特定的要求&#xff0c;这就使得图片格式的转换成为了一项必备技能。下面给大家分享5种能够简单高效的转换图片格式方法&#xff0c;快来一起学习下吧。 方法一&#xff1a;…

隆尧县“隆品佳尧”区域公用品牌发布推介会暨地标之都七月选品会成功举办

在国家乡村振兴战略与农业现代化建设的大背景下&#xff0c;隆尧县凭借其得天独厚的地理优势和丰富的自然资源&#xff0c;正在成为区域经济与品牌建设的一颗新星。为了进一步推动隆尧县的农业发展和乡村建设&#xff0c;由隆尧县商务局指导、隆尧县电子商务公共服务中心主办的…

GD 32独立看门狗

前言 ... 独立看门狗简介 独立看门狗定时器(FWDGT)有独立的时钟源(IRC40K)。因此就算是主时钟失效了&#xff0c;它仍然能保持工作状态&#xff0c;这非常适合于需要独立环境且对计时精度要求不高的场合。 当内部向下计数器的计数值达到0&#xff0c;独立看门狗会产生一个复位…

迎接新时代:通过Web Distribution分发您的iOS应用

背 景 《数字市场法案》&#xff08;Digital Markets Act&#xff0c;DMA&#xff09;是欧盟委员会于2020年11月提出的旨在规范大型科技公司行为的立法提案&#xff0c;于2022年3月8日由欧盟议会和欧盟理事会正式通过&#xff0c;并于2022年11月1日正式生效&#xff0c;主要条…

面试题:MySQL 索引

1. 谈一下你对于MySQL索引的理解?(为什么MySQL要选择B+树来存储索引) MySQL的索引选择B+树作为数据结构来进行存储,使用B+树的本质原因在于可以减少IO次数,提高查询的效率,简单来说就是可以保证在树的高度不变的情况下存储更多的数据: IO效率的提高:在MySQL数据库中,…

最细哈希表相关的力扣题和讲解和Java、C++常用的数据结构(哈希法)来源于代码随想录,十分感谢这位我失散多年的老师!!

20240725 一、什么时候适用什么样的结构。1.java中1.1 HashSet&#xff1a;1.2 TreeSet&#xff1a;1.3 LinkedHashSet&#xff1a;1.4 HashMap&#xff1a;1.5 TreeMap&#xff1a;1.6 LinkedHashMap&#xff1a;1.7 总结 2. c中2.1 std::unordered_set&#xff1a;2.2 std::s…

mysql 的MHA

mysql 的MHA 什么是MHA 高可用模式下的故障切换&#xff0c;基于主从复制。 单点故障和主从复制不能切换的问题。 至少需要3台。 故障切换过程0-30秒。 vip地址&#xff0c;根据vip地址所在的主机&#xff0c;确定主备。 主 vip 备 vip 主和备不是优先确定的&#xff…

机器视觉13镜头

镜头作用&#xff1a; 一端收集物体的光线&#xff0c;并将光线在另一端汇聚为实像&#xff0c;并投影到接收面的物体。 此时&#xff0c;汇集光线的点称为焦点&#xff0c;镜头中心到焦点的距离称为焦点距离。 当镜头为凸镜时&#xff0c;焦点距离将根据镜头的厚度&#xf…

必看!CRM系统选型指南:10款CRM系统对比,你该用哪个?

不同行业、不同规模、不同业务模式的企业&#xff0c;对CRM系统的需求千差万别。 如何在众多选择中挑选出最适合自己企业的那一款&#xff0c;成为了许多管理者面临的难题。因为&#xff0c;如今的CRM系统成为了企业提升竞争力、深化客户关系、优化业务流程的关键工具。 因此…

【嵌入式】C51 和标准 C 语言的关键字对比详解

目录 C51 和标准 C 语言的关键字对比详解1. 概述2. C51 和标准 C 语言的关键字对比2.1 关键字对比表2.2 对比表详细解释2.2.1 C51 特定关键字2.2.2 标准 C 语言关键字 2.3 C51 特定关键字2.4 标准 C 语言关键字 3. 示例详细解释3.1 C51 特定关键字bitsfrsbitdataidatapdataxdat…

基于JSP的水果销售管理网站

你好&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP技术 工具&#xff1a; 未在文档中明确指出&#xff0c;可能包括但不限于IDEs&#xff08;如Ec…

.NET 相关概念

.NET 和 .NET SDK .NET 介绍 .NET 是一个由 Microsoft 开发和维护的广泛用于构建各种类型应用程序的开发框架。它是一个跨平台、跨语言的开发平台&#xff0c;提供了丰富的类库、API和开发工具&#xff0c;支持开发者使用多种编程语言&#xff08;如C#、VB.NET、F#等&#xf…