「Flask入门」安装Bootstrap

已于 2023-05-15 21:29:57 修改
阅读量229 收藏 2
点赞数 1
分类专栏： Flask入门 文章标签： flask bootstrap
于 2023-05-15 19:51:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34872231/article/details/130691459
版权

如果要在 .html 中使用 bootstrap 有两种方式，其一，在头部引入有效的 CDN，

<head>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
</head>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

这种方法的缺点，即不稳定，加载完全依赖于网速；第二种方法，在项目中引入 bootstrap 源代码，

<head>
  <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css" />
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script type="text/javascript" src="static/jquery/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
</head>

这需要从 Bootstrap 和 jQuery 官网下载，前者下载已经编译好的版本（Bootstrap 生产文件）即可。下载之后解压，移至项目对应的静态文件夹里即可。在 Flask 的配置里是，

app-flask
	|--venv
	|--static
		|--bootstrap
			|--css
			|--js
		|--jquery
			|--jquery.min.js
	|--templates
	|--hello.py
士全
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flask-bootstrap安装与使用
菲宇运维
04-13 5097
flask-bootstrap中文手册 　Bootstrap（http://getbootstrap.com/）是Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代Web 浏览器。 　　要想在程序中集成Bootstrap，显然要对模板做所有必要的改动。不过，更简单的方法是使用一个名为Flask-Bootstrap 的Flask...
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安装及简单使用
热门推荐
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
flask引用bootstrap4框架
weixin_40331132的博客
06-25 2097
前言： Bootstrap是世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。 那么flask怎么引用这个框架来开发自己美丽网站呢，请各位细细看来 目录 前言： 1、引用网络中Bootstrap4的CDN加速服务 2、引用下载到本地的Bootstrap4 1、下载框架 2、引用框架 1、引用网络中Bootstr...
flask学习四——bootstrap介绍
2301_78630677的博客
10-03 881
本章简单介绍一个前端开发框架：Bootstrap，并实现一个成绩管理网站。Bootstrap是一个流行的前端开发框架，它提供了一组CSS样式和JavaScript组件，用于构建响应式、现代化的网页和Web应用程序。本章简单记录了一下bootstrap这个十分实用的前端开发框架，同时也实现了一个简单的成绩管理页面的开发。 道者同于道，德者同于德，失者同于失。 –2023-10-3 进阶篇。
Python Flask Web开发入门之Bootstrap介绍使用和Flask-Nav快速导航栏 共10页.pdf
06-05
Python Flask Web开发入门之Bootstrap介绍使用和Flask-Nav快速导航栏 Bootstrap 是当前最受欢迎的前端框架之一，来自 Twitter，Python 中同样可以使用 Bootstrap。Bootstrap 提供了大量的前端组件，能够快速构建...
flask-bootstrap-ui:Flask Bootstrap UI模板
04-19
先决条件必需的Python 3.6.x或更高版本可选的Redis 4.0.x或更高版本（用于速率限制，否则使用内存存储）入门创建venv并安装要求python3 -m venv venvsource venv/bin/activatepip3 install -r requirements.txt ;...
flask入门实例
04-05
**Flask入门实例** Flask是一款轻量级的Python Web框架，因其简洁和灵活而深受开发者喜爱。在本实例中，我们将使用Flask框架来创建一个基础的Web应用，并结合Bootstrap 3进行前端设计，同时利用SQLite作为后端...
flask 入门实例
06-22
Jinja2 模板 0.Flask-Bootstrap：集成Twitter开发的一个开源框架Bootstrap。 1.Flask-Script：为Flask程序添加一个命令行解析器 2.Flask-Moment：本地化日期和时间 http://iyiming.me/
tedivms-flask：具有celery，bootstrap和docker环境的Flask入门应用
01-31
该代码库可作为编写下一个Flask应用程序的起点。 该软件包旨在使开发人员可以立即开始使用其特定功能，同时还可以轻松地将项目部署到生产中。 它包含许多已配置的扩展名和库以及专门为此软件包构建的独特功能。 它...
Flask之Bootstrap的基本使用
weixin_51022886的博客
08-01 2994
作为Web前端开发框架，Bootstrap集成了HTML标记、CSS样式及Javascript行为，使得开发人员和设计人员不再像过去那样周而复始地写模板、样式、交互效果，极大地节约了时间，提高开发效率。 一、Bootstrap简介 Bootstrap是Twitter推出的一个用于前端开发的开源框架。它是目前最受欢迎的集HTML、CSS和JS于一体的框架，用于开发响应式布局、移动设备优先的Web项目。 Bootstrap的环境至少需要三个文件：boo...
Flask框架——Bootstrap-Flask使用
霖hero
08-06 2990
上篇文章我们学习了，这篇文章我们来学习Flask框架——Bootstrap-Flask扩展。对于css，html技术不熟练的人来说，想要快速创建简洁、美观又功能全面的页面是比较难的，这时我们就可以使用Bootstrap-Flask扩展，该扩展能让不熟练css、html的人也能快速的创建简洁、美观又功能全面的页面，让我们在前期不用花费太多的精力和CSS纠缠。............
python flask整合bootstrap框架
weixin_42883164的博客
04-12 607
flask 整合bootstrap 步骤
python基础flask——bootstrap模板
felldeng的博客
01-07 1490
困于下衡于虑而后作 今天的学习目标是bootstrap模板的使用 模板能减少很多工作量，想搭建网站，模板必不可少，可以节约时间来研究逻辑部分 首先是官方文档，boostrap文档 打开网页后，先下载实例 1.使用bootstrap模板 下载完成之后，打开第一个示例的html，将这个html复制到项目文件夹的templates中 输入如下代码： from flask_bootstrap import Bootstrap from flask import Flask from flask import re
Python：Flask-Bootstrap 框架
AL ZN的博客
12-21 8412
2.5、Flask-Bootstrap 框架 2.5.1、Flask-Bootstrap框架的简单了解 参考博文链接：https://blog.csdn.net/linshuhe1/article/details/51742474 前端开源框架 Bootstrap， 使用Bootstrap可以去创建简洁、美观的页面。 在前面，我们已经使用了 Python + Flask 去创建一个简单的线性回归模型预测 web，使用html模板进行页面展示。在这里，为了更好的展示，引入了一个简化在 Flask 项目中集成前
（学习flask） 03 使用flask-bootstrap
akswyh的博客
04-12 3454
flask-bootstrap集成Bootstrap Bootstrap是Twitter开发的一个开源框架，提供的用户界面组件可用于创建简洁且具有吸引力的网页。使用bootstrap需要(1)引用bootstrap层叠样式表和相关js(2)在代码中实例化所需组件。 安装flask-bootstrap pip install flask-bootstrap flask-bootstrap的实例化 from flask_bootstrap import Bootstrap from flask import
Vue学习笔记 —— 路径引入
weixin_43340295的博客
10-21 634
前言 在html文件中，通过script标签来引入js，而在vue文件中通过import方式导入文件。并且import不止是可以导入js文件。 例：import HelloWorld from './components/HelloWorld.vue' 'HelloWorld'：指的是为导入文件气的一个名称，不是指导入文件的名称，相当于变量名 './components/HelloWorld.vue'：指的是文件的相对路径 引入路径的方式 以父子目录的方式定义相对路径： ./ 指当前目录 ..
flask-bootstrap的使用
pzl_pzl的博客
06-29 4283
bootstrap官网 http://www.bootcss.com/ font-awesome 官网 http://fontawesome.io/flask-bootstrap 官网 http://pythonhosted.org/Flask-Bootstrap/index.html安装：pip install flask-bootstrap使用： # 导入类库 from flask...
升级openai库导致的404错误排查记录
最新发布
golfxiao的专栏
07-17 920
可以看出，在使用OpenAIEmbedding在进行向量嵌入时报的错，我们使用的是Azure部署的OpenAI服务，出现此错误一般是由于Azure Endpoint，Deployment，API Version，API Key，Model Version这几项信息中的某一项有问题。
flask flash bootstrap
09-05
要在Flask中使用Flask-Bootstrap来集成Bootstrap框架，你需要进行以下步骤： 1. 首先，使用pip来安装Flask-Bootstrap扩展：`pip install flask_bootstrap`。 2. 在你的Flask应用程序中导入Flask-Bootstrap并初始化它，可以使用以下代码： ``` from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app) ``` 3. 接下来，你可以创建一个包含所有Bootstrap文件的基模板，通过Jinja2的模板继承机制，让你的程序扩展这个基模板，并引入Bootstrap的元素。在你的模板文件中，可以使用以下代码引用Bootstrap的基模板： ``` {% extends "bootstrap/base.html" %} {% block title %}Flask{% endblock %} ``` 4. 如果你想在你的Flask应用程序中使用Flask-Flash来显示消息，你可以在基模板中添加一个代码块来显示flash消息。在基模板的相应位置，可以使用以下代码来显示flash消息： ``` {% for message in get_flashed_messages() %} <div id="alertmessage" class="alert alert-warning"> <button type="button" class="close" onclick="close_flash_message();">x</button> {{ message }} </div> {% endfor %} ``` 通过以上步骤，你可以在Flask应用程序中使用Flask-Bootstrap来集成Bootstrap框架，并且在基模板中添加代码块来显示flash消息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [常用Flask的插件bootstrap wtf](https://blog.csdn.net/qq_41829386/article/details/88360044)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Flask中，不用bootstrap实现flash消息关闭按钮](https://blog.csdn.net/steventian72/article/details/102960717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值