bootstrap+flask实例搭建

已于 2023-03-24 13:19:38 修改
阅读量1k 收藏 8
点赞数
分类专栏： 笔记 教程 文章标签： bootstrap jquery html5 python flask
于 2020-11-12 13:23:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42568323/article/details/109641844
版权

bootstrap+flask实例搭建

默认会搭建flask项目

下载Bootstrap

  1. 下载Bootstrap
    在这里插入图片描述

下载引用依赖jQuery

默认使用在线地址，如需使用本地的bootstrap.min.js或jquery.min.js，则将中的https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js修改为本地即可，后边操作也一样。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

添加在body的末尾：

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

将文件复制到flask项目下

  1. 将第一步下载的bootstrap-3.3.7-dist.zip 解压并将其复制到flask项目的static目录下。
    在这里插入图片描述
  2. 然后下载jQuery的压缩包，1.12.4版本的兼容性较好，并将其解压然后复制dist目录到flask项目的static目录下，并将其重命名为jquery。

新建HTML文件

  1. 将bootstrap的基本模板复制一新建的HTML文件中，同理如需使用本地的bootstrap.min.js或jquery.min.js，则将script 标签的src设置成这两个文件的本地路径。
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
  1. 并在flask项目下的app文件中添加index.html模板的路由。
@app.route('/index')
def index():
    return render_template("index.html")
  1. 最后运行程序，这样一个简单的bootstrap实例就搭建好了。
    在这里插入图片描述
闲人编程
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于flask+bootstrap+echarts+mysql的鱼村小馆订餐后台管理系统
阿牛的博客
03-05 3600
flask专栏已经很久没更新了，对于这个专栏我设置为付费是因为我对flask项目的搭建是有着自己的一套理解的，而且对于后面的这些项目，我都会放在项目专栏中，也就是说对于这些项目的介绍，我都会放在项目专栏中，感兴趣的可以免费看！最近又在做一个flask项目，后面会将用到的知识总结在这个专栏中，可以说的是这个正在做的项目比前面做的几个绝对要好，静静等待吧！在此之前我要在本篇博客中将之前没有总结的项目“鱼村小馆订餐后台管理系统”总结一下！
flask-bootstrap-ui:Flask Bootstrap UI模板
04-19
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 特征 该
Flask框架——Bootstrap-Flask使用
霖hero
08-06 3042
上篇文章我们学习了，这篇文章我们来学习Flask框架——Bootstrap-Flask扩展。对于css，html技术不熟练的人来说，想要快速创建简洁、美观又功能全面的页面是比较难的，这时我们就可以使用Bootstrap-Flask扩展，该扩展能让不熟练css、html的人也能快速的创建简洁、美观又功能全面的页面，让我们在前期不用花费太多的精力和CSS纠缠。............
Python之flask结合Bootstrap框架快速搭建Web应用
专注自动化、性能测试、测试架构学习交流
06-11 1万+
写在前面： Flask是一个基于Python开发，依赖jinja2模板和Werkzeug WSGI服务的一个微型框架。Werkzeug用来处理Socket服务，其在Flask中被用于接受和处理http请求；Jinja2被用来对模板进行处理，将模板和数据进行渲染，返回给用户的浏览器。 Bootstrap是由Twitter推出的一个用于前端开发的开源工具包，给予HTML、CSS、JavaScriot，提供简洁、直观、强悍的前端开发框架，是目前最受环境的前端框架。 前面一篇文章已经讲到了，如何通过flask将
Flask-Bootstrap 分析
示例和笔记
06-01 748
Flask-Bootstrap是一个基于Bootstrap前端框架的Flask扩展，提供易用的前端组件和模板，可以快速搭建美观的Web界面。
Flask 项目中使用 bootstrap
藕丝空间
03-20 1万+
flask 的插件中有一个 flask-bootstrap 项目, 但是用起来不怎么方便, 如果大家感兴趣的话, 还是直接在项目中引入 bootstrap. flask 项目的目录结构 项目名称/ app/ static/ # 静态文件夹 css/ # 项目中引入的 css 样式表 js/ # 项目中引入的...
bootstrap+flask简单实例搭建
11-12
通过这个基础实例，你已经掌握了如何在 Flask 项目中集成 Bootstrap 和 jQuery 的基本步骤。接下来，你可以开始在 `index.html` 中添加各种 Bootstrap 组件，如导航栏、按钮、表单等，实现更丰富的交互功能。同时，...
25【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏范例 - 企业宣传.zip
01-22
项目提供的详细操作手册是学习过程中的一大资源，它将指导你从搭建环境、配置Flask应用、集成Echarts到部署上线的全过程。通过实践，你可以掌握上述知识点，并具备实际开发能力。 通过学习并实践这个案例，不仅...
python+flask大型区块链论坛项目-BBS.zip
01-31
这里会创建一个Flask实例，并设置基本配置，如应用的名称、模板路径和静态文件路径。 4. **路由与视图** 使用Flask的`@app.route()`装饰器定义URL路由，对应不同的视图函数。视图函数负责处理HTTP请求，如获取数据...
Flask入门教程实例：搭建一个静态博客
12-23
在本教程中，我们将学习如何使用Python的Flask框架搭建一个静态博客。Flask是一个轻量级的Web服务器网关接口（WSGI）Web应用程序框架，适合开发小型但功能丰富的Web应用。在这个实例中，我们将利用Flask-FlatPages...
flask+bootstrap+python
07-25
flask+bootstrap+python,flask框架开发脚手架，保证可以运行
Flask框架快速搭建疫情打卡系统
12-22
创建Flask应用实例，`app = Flask(__name__)`，然后使用`Bootstrap`装饰器美化前端界面。`bootstrap = Bootstrap(app)`，引入Bootstrap库可以使网页更加美观。 4. **路由与视图函数**： - `@app.route('/')`定义...
Flask学习——Flask-Bootstrap框架
sjc_1024的博客
03-02 1923
Bootstrap(http://getbootstrap.com)是Twitter开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且能够兼容所有现代Web浏览器。Bootstrap是客户端框架，因此不会直接涉及服务器。服务器要做的只是提供引用了Bootstrap层叠样式表(CSS)和Javascript文件的HTML响应，并在HTML、CSS和Javascript代码...
Flask-Bootstrap安装及简单使用
热门推荐
Love&Share
01-20 1万+
Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的 官方文档：https://v3.bootcss.com/getting-started/ 与前端相关优质项目 React 用于构建用户界面的 JavaScript 框架 svelte Svelte 是构建 Web 应用程序的一种新方法 nodejs Node.js 是一个基于 Chrome V8 引擎的 JavaScrip
Bootstrap-Flask
Aoki的博客
05-08 2008
Bootstrap-flask Bootstrap-flask4 helper for Flask/Jinja2. Based on Flask-Bootstrap, but lighter and better. 扩展Bootstrap-Flask基于扩展Flask-Bootstrap实现，旨在替代缺乏维护的后者。和Flask-Bootstrap相比，Bootstrap-Flask简化了大部分功...
Flask 系列之 Bootstrap-Flask
weixin_30621959的博客
03-30 95
说明 操作系统：Windows 10 Python 版本：3.7x 虚拟环境管理器：virtualenv 代码编辑器：VS Code 实验目标 通过使用 Bootstrap-Flask 来进行页面美化，为网站应用上 Bootstrap4.x 的样式。 由于 Flask-Bootstrap 很久没有更新，并且不支持 BS4，所以这里我们使用支持 BS4 的 Bootstrap-Fl...
Python：Flask-Bootstrap 框架
AL ZN的博客
12-21 8467
2.5、Flask-Bootstrap 框架 2.5.1、Flask-Bootstrap框架的简单了解 参考博文链接：https://blog.csdn.net/linshuhe1/article/details/51742474 前端开源框架 Bootstrap， 使用Bootstrap可以去创建简洁、美观的页面。 在前面，我们已经使用了 Python + Flask 去创建一个简单的线性回归模型预测 web，使用html模板进行页面展示。在这里，为了更好的展示，引入了一个简化在 Flask 项目中集成前
软件设计之HTML5
最新发布
thm19990903的博客
08-04 1516
HTML：Hyper Text Markup Language 超文本标记语言。
Springboot + Bootstrap + FreeMarker搭建后台管理系统
05-10
Spring Boot 是一个基于 Spring 框架的快速开发 Web 应用程序的框架，Bootstrap 是一个流行的前端框架，FreeMarker 是一种模板引擎。它们可以一起使用来构建一个完整的后台管理系统。 下面是搭建后台管理系统的步骤： 1. 创建 Spring Boot 项目 使用 Spring Initializr 创建一个新的 Spring Boot 项目。在选择依赖时，选择 Web、FreeMarker 和 Thymeleaf（或者其他模板引擎）。 2. 集成 Bootstrap 在 pom.xml 文件中添加 Bootstrap 的依赖： ``` <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.6.0</version> </dependency> ``` 在 application.properties 中配置静态资源路径： ``` spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/webjars/ ``` 3. 集成 FreeMarker 在 pom.xml 文件中添加 FreeMarker 的依赖： ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> ``` 在 application.properties 中配置 FreeMarker 的模板路径： ``` spring.freemarker.template-loader-path=classpath:/templates/ ``` 4. 创建控制器 创建一个控制器来处理请求和渲染模板。可以使用 @Controller 注解来标记控制器： ```java @Controller public class HomeController { @GetMapping("/") public String index() { return "index"; } } ``` 5. 创建模板 在 templates 目录下创建 index.ftl 模板文件，使用 Bootstrap 的样式和组件来构建页面。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">后台管理系统</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">用户管理</a> </li> <li class="nav-item"> <a class="nav-link" href="#">订单管理</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>欢迎来到后台管理系统</h1> </div> </div> </div> <script src="/webjars/jquery/3.6.0/jquery.min.js"></script> <script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 6. 运行应用程序 在控制台中运行应用程序： ``` mvn spring-boot:run ``` 访问 http://localhost:8080/ 即可看到后台管理系统的首页。 总之，Spring Boot、Bootstrap 和 FreeMarker 的结合可以让我们快速开发出一个美观、实用的后台管理系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闲人编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值