zoukankan      html  css  js  c++  java
  • Flask 使用CSS框架

    加载静态文件

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

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

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

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

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

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

    <img src="{{ url_for('static', filename='a.jpg') }}" width="50">

    使用CSS框架

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

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

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

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

    {% block styles %}
        <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
    {% endblock %}
    ...
    {% block scripts %}
        <script src="{{ url_for('static', filename='js/jquery.min.js') }}}"></script>>
        <script src="{{ url_for('static', filename='js/popper.min.js') }}}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    {% endblock %}
    ...

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

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

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

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

    {% block styles %}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    {% endblock %}
    ...
    {% block scripts %}
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    {% endblock %}
    ...

    Example:
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/start.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/start.js') }}"></script>

    </head>
  • 相关阅读:
    docker 安装 clickhouse单机版
    CockRoachDB简介
    Ubuntu18.04 LTS Cockroach集群搭建
    ClickHouse 的一些优化参数
    ClickHouse 概念整理
    OOM Killer机制
    win10系统下载地址
    Quartz.Net在C#中的使用
    JavaScript的undefined与null、NaN的区别
    Java Web基础回顾 —JSP
  • 原文地址:https://www.cnblogs.com/tingtin/p/12778789.html
Copyright © 2011-2022 走看看