flask引用bootstrap4框架
前言:
Bootstrap是世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中,你将发现高质量的HTML、CSS以及JavaScript,使您的WEB工程项目变得无比简单,包括官方的CDN和启动器服务。
那么flask怎么引用这个框架来开发自己美丽网站呢,请各位细细看来
目录
前言:
1、引用网络中Bootstrap4的CDN加速服务
2、引用下载到本地的Bootstrap4
1、下载框架
2、引用框架
1、引用网络中Bootstrap4的CDN加速服务
首先在pycharm里面新增一个flask项目
File-New Project
新增项目成功,在templates 里上右击新增一个index.html文件
百度一下bootstrap找到一个bootstarp中文网
点击快速入门,
将上图里几行代码copy到index的<head>中去
然后在app.py文件里添加修改一行代码,先将flask里的引用模板方法导入render_template
然后在hello_world里返回index.html模板,运行
运行成功,用浏览器访问127.0.0.1:5000,访问前先打开F12
上图可以看到bootstrap在F12里可以看到,表明已经引用成功,
这种引用方法有个弊端,如果一些内网网站,这个内网不链接互联网,就无法引用到cdn里的bootstrap了,
所以也可以将bootstrap下载到本地来引用
2、引用下载到本地的Bootstrap4
1、下载框架
百度bootstrap进入到bootstrap中文网
点击下载bootstrap,下载到本是个zip压缩文件,解压缩
解压完成后,需要的js、css文件在目录下的dist文件下面
先看css,为啥会有一个bootstrap.css与bootstrap.min.css呢。应该引用哪一个呢,看上面网络引用了bootstrap.min.css这个。
其实两个css文件是一样的,只一个min的意思就是说明这个css文件压缩了,网上引用这个也是因为它压缩了,网络传输会快一些。
再看js,一样,有一个压缩的js文件,
但还少了两个文件,一个jquery,一个poper
这两个文件需要单独去网上找
百度一个jquery-3.3.1.js,第一条就出现了,去下载
点击下载会打开一个js页面,此时可以用ctrl+s保存,将js保存到本地
百度poper、哦不,在url里输入https://cdnjs.com/libraries/popper.js/1.14.0
查询 1.14.0 Version
找到umd版本的popper.js
然后将这个url在浏览器中打开,然后另存为到popper.js桌面
至此,bootstrap框架所有需要的js、css文件都已经下载完毕,开始引用了
2、引用框架
先在flask项目的static目录下新增两个目录 ,js、css目录 ,将对应的文件放入其中
然后在index里将之前网络引用的代码注释掉,添加引用本地的css、js的代码
下图里的url_for方法是flask里引用目录文件的一个方法,flask里的src,herf的值不能直接写路径,必须用url_for来引用
运行项目,在浏览器里输入127.0.0.1:5000
可以通过f12看到引用的bootstrap的js,css文件了
至此,bootstrap4框架的两种引用方法已经介绍完毕。希望大家看到多多点赞或提宝贵的意见
flask引用bootstrap4框架相关推荐
- Python-基于flask的接口框架
Python-基于flask的接口框架 Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档,大部分代码引用自官 ...
- 快速上手Flask(一) 认识框架Flask、项目结构、开发环境
文章目录 快速上手Flask(一) 认识框架Flask.项目结构.开发环境 Web开发轻量级框架Flask Flash历史和团队 Pallets 项目 flask运行过程 使用flask的场景 使用P ...
- Bootstrap4框架处理JS轮播
Bootstrap4框架处理JS轮播 开发工具与关键技术:使用Bootstrap4框架作者:郑健鹏撰写时间:2019年1月16日 我们之前的JS轮播是用原生的JS代码实现,这个方法比较耗费时间,因为还 ...
- Python之flask结合Bootstrap框架快速搭建Web应用
目录 前言 安装bootstrap扩展 模板的继承 总结 前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
- flask mysql orm,flask的orm框架(Flask-SQLAlchemy)-创建表
标签: # 转载请留言联系 ORM 是什么? ORM,Object-Relation Mapping.意思就是对象-关系映射.ORM 主要实现模型对象到关系数据库数据的映射. 优点 : 只需要面向对象 ...
- 看完这篇文章还能不懂Flask这种Web框架吗?
2019独角兽企业重金招聘Python工程师标准>>> Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeu ...
- python的flask微服务-flask微服务框架的初步接触
测试2个关联的系统接口时,经常会遇到被测试系统或被测app的处理内部处理流程会依赖另一个系统的接口返回结果,这时, 常用的做法就是写一个模拟测试桩,用作返回请求时的结果.java可以用servicel ...
- 人生苦短,我用Python(五)—通过Flask结合Bootstrap框架快速搭建Web应用-2
写在前面: Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http ...
- python flask 路由_python框架之Flask(2)-路由和视图Session
路由和视图 这一波主要是通过看源码加深对 Flask 中路由和视图的了解,可以先回顾一下装饰器的知识:[装饰器函数与进阶] 路由设置的两种方式 #示例代码 from flask importFlask ...
最新文章
- java 连接 oracle 10_java 怎么把原本连接32位oracle10g换到连接64位oracle10g
- 百度:2020年十大科技趋势
- 函数的方法call、apply、bind
- 怎么用latex写ppt呢?
- (转) Core Animation 简介
- 递归走迷宫java_在Java中的迷宫递归回溯
- 前端会有什么新的变化
- inteliJ maven 打包时把依赖的包一起打
- 【转载】linux tail命令的使用方法详解
- Linux之镜像源篇
- python做表格教程_(0基础如何快速入门Python)python表格入门教程
- 《关键对话》如何高效能沟通之何谓关键对话
- 【入门】Markdown的高级应用、计算机硬件、linux基本命令
- 求专业人员解答一下,万分感谢
- rocketmq初学者入门
- Windows12[Beta1.2.6]公测
- 暗影精灵4适合计算机专业,暗影精灵4什么时候出?今日发布,为专业电竞而生...
- Hibernate入门-03
- 程序设计思维模测 - M4
- PSpice 常见问题
热门文章
- Pwnable.tw之BookWriter
- java getopt_getopt() 函数
- Intel SGX Developer Reference 学习笔记(五)
- SQL添加一个新列并给默认值
- 单GPU显卡做计算时出现显示器驱动程序已停止响应
- eclipse无法显示此页,确保web地址http://localhost:8080正确,可能是ie问题
- Fabric部署基础篇 - 单机网络
- 和平精英体验服要维护服务器,和平精英体验服关服维护要多久?和平精英体验服开放时间一览[多图]...
- 厦门市阶梯电价如何计算,厦门电费阶梯收费标准
- 毕业生必须知道:干部身份、三方协议、派遣证【转】