flask css super,Flask 使用CSS框架

加载静态文件

一个Web项目不仅需要HTML模板,还需要许多静态文件,比如CSS、JavaScript文件、图片和声音声。

在flask程序中,默认需要将静态文件存储在与主脚本(包含程序实例的脚本)同级目录的static文件夹中。

为了在HTML文件中引用静态文件,我们需要使用url_for()函数获取静态文件的URL。flask内置了用于获取静态文件的视图函数,端点值为static,它的默认URL规则为/static/,

URL变量filename是相对于文件夹根目录的文件路径。

如果需要使用其他文件夹来存储静态文件,可以在实例化flask类时使用static_folder参数指定,静态文件的URL路径中的static也会自动跟随文件夹名称变化。

在实例化flask类时用static_url_path参数可以自定义静态文件的URL路径。

使用CSS框架

在编写Web程序时,手动编写CSS比较麻烦,更常见的做法是使用CSS框架来为程序添加样式。

CSS框架内置了大量可以直接使用的CSS样式类和javaScript函数,使用它们可以非常快速的让程序页面变得没关和易用,同时我们也可以定义自己的CSS文件来进行补充和调整。

Bootstrap是最流行的开源前端框架之一,它有浏览器支持广泛、响应式设计等特点。使用它可以快速搭建没关、现代的网页。

通常情况下,CSS和javaScript的资源引用会在基模板中定义,如:

{% block styles %}

{% endblock %}

...

{% block scripts %}

>

{% endblock %}

...

如果不使用Bootstrap提供的javascript功能,也可以不加载。

Bootstrap所依赖的jQuery和popper.js需要单独下载,这三个javaScript文件在引入时要按照jQeury->popper.js->Bootstrap的顺序引入

如果下简化开发过程,也可以从CDN加载,这很方便。

才能够CDN夹杂时,只下将相应的URL替换我CDN提供的资源URL,如:

{% block styles %}

{% endblock %}

...

{% block scripts %}

{% endblock %}

...

Example:

标签:文件,框架,script,Flask,min,js,static,CSS

来源: https://www.cnblogs.com/tingtin/p/12778789.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值