使用django-bootstrap4 + django_icons +我的自定义css文件

时间:2018-06-13 12:34:48

标签: css django

有人可以提供任何步骤将django-bootstrap4和django_icons python包与我自己的css文件一起用于我的django应用程序的静态文件夹项目吗?这可以防止在为django模板html文件设置样式时python包和.css之间的任何混淆。

1 个答案:

答案 0 :(得分:0)

基本模板是您在网站的每个页面上展开的最基本的模板。

以下是一个简单的示例:

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>{{ title }}</title>
       <link rel="stylesheet" href="{{ static('bootstrap/css/bootstrap.min.css') }}">
       <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
       <link rel="stylesheet" href="{{ static('main.css') }}">
       {% block css %}

       {% endblock %}
    </head>
    <body>
    <!— Render content —>
        <div class="container">
            {% include 'common/header.html '%}
            {% include 'common/navbar.html '%}
            {% block content %}

            {% endblock %}
            {% include 'common/footer.html' %}
        </div>
    <script src="{{ static('bootstrap/js/bootstrap.min.js') }}"></script>
    {% block js %}
    {% endblock %}
    </body>
  </html>

在您的html文件中,您只需要扩展base.html文件,然后将所有自定义css,html组件和自定义js文件放在base.html文件中声明块的位置。 例如:

{% block css%}
    <link rel="stylesheet" href="{{ static('main.css') }}">
{% endblock %}

这意味着在您的html文件中,将首先加载来自base.html的所有css,然后将加载您的自定义css文件。