Einführung

CSS-Framework für Django-Projekte Wir werden ** UIKit3 ** vorstellen.

UIKit3 UIKit ist eines der CSS-Frameworks. Obwohl es Bootstrap und Foundation in Bezug auf die Namenserkennung etwas unterlegen ist Es ist ein beliebtes Framework mit einem einfachen Design.

Der Klassenname ist so vereinheitlicht, dass er mit uk - beginnt. Es ist auch ein guter Punkt, dass es unwahrscheinlich ist, dass Konflikte mit anderen CSS auftreten.

Laden Sie UIKit herunter

Download von hier.

Entpacken Sie die Zip-Datei und Dieses Mal werden wir die folgenden 3 Dateien verwenden.

uikit-3.5.6/ 　├ css/ 　│　└ uikit.min.css 　└ lib/ 　　└ uikit-icons.min.js 　　└ uikit.min.js

UIKit-Version ist 3.5.6

Erstellen Sie ein statisches Verzeichnis

Erstellen Sie ein statisches Verzeichnis direkt unter dem Projektverzeichnis Speichern Sie die Datei wie unten gezeigt.

[projectname]/ 　├ [projectname]/ 　├ static/ 　│　└ css/ 　│　│ └ uikit.min.css 　│　└ js/ 　│　　└ uikit.min.css 　│　　└ uikit.min.css 　└ manage.py

Ändern Sie settings.py

Definieren Sie die Informationen für das Verzeichnis "statisch" in "[Projektname] / settings.py".

`settings.py`


STATICFILES_DIRS = (
	os.path.join(BASE_DIR, 'static'),
)

Lesen Sie statisch

Point1:

{% load static %} Verwenden Sie das Tag> load, um die Verwendung statischer Tags zu aktivieren.

Point2:

{% static '[css or js]/[filenama]' %} Mit dem Tag> static können Sie den Pfad einer statischen Datei als relativen Pfad definieren.

Point3:

UIKit laden <link href="{% static 'css/uikit.min.css' %}" rel="stylesheet"> <script src="{% static 'js/uikit.min.js' %}"> <script src="{% static 'js/uikit-icons.min.js' %}">

Offizielles Dokument: https://getuikit.com/docs/introduction#html-markup

Versuchen Sie, die [Dropdown-Liste] anzuzeigen (https://getuikit.com/docs/button#button-group-with-dropdowns). Ich wollte einen Rand, weil ich den Bildschirm drücken wollte, also Ich habe auch versucht, "uk-margin-top" usw. zu verwenden.

`uikit-sample.html`


{% load static %}

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>TEST</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="{% static 'css/uikit.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/uikit.min.js' %}"></script>
    <script src="{% static 'js/uikit-icons.min.js' %}"></script>
</head>
<body>
    <h1 class="uk-margin-top uk-margin-left">UIKit-Probe</h1>

    <div class="uk-button-group uk-margin-left">
        <button class="uk-button uk-button-default">Dropdown</button>
        <div class="uk-inline">
            <button class="uk-button uk-button-default" type="button"><span uk-icon="icon:  triangle-down"></span></button>
            <div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;">
                <ul class="uk-nav uk-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>

Es wurde sicher angezeigt. Es ist einfach und schön!

abschließend

Ich hatte die Gelegenheit, UIKit vorzustellen, also habe ich es zusammengefasst.

Ich habe UIkit noch nicht gemeistert, aber wie oben erwähnt Es ist sehr einfach zu verwenden, dass der Klassenname mit "uk-" vereinheitlicht wird.

[Python] Führen Sie UIKit3 in das Django-Projekt ein