Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Από την κυκλοφορία του το 2013, το Bootstrap έχει φέρει επανάσταση στον τρόπο με τον οποίο οι προγραμματιστές στυλ ιστοσελίδων. Το Bootstrap είναι ένα δημοφιλές πλαίσιο front-end που χρησιμοποιείται για το σχεδιασμό αποκριτικών εφαρμογών ιστού.

Το Django χρησιμοποιεί τα προκατασκευασμένα στυλ CSS και τις προσθήκες JavaScript του Bootstrap για το στυλ ιστοσελίδων. Ενώ μειώνει την ταλαιπωρία του στυλ, η διαμόρφωσή του στο Django μπορεί να είναι πρόκληση.

Ας μάθουμε πώς να εγκαταστήσετε και να ρυθμίσετε το Bootstrap σε μια εφαρμογή Django.

Πώς να εγκαταστήσετε το Bootstrap

Υπάρχουν δύο τρόποι να χρησιμοποιήστε το Bootstrap 5 σε ένα έργο Django. Μπορείτε να το εγκαταστήσετε στην εφαρμογή σας ή να αναφέρετε τα αρχεία χρησιμοποιώντας CDN του Bootstrap. Αυτό το έργο θα χρησιμοποιήσει την προηγούμενη μέθοδο.

Πριν εγκαταστήσετε το Bootstrap,

instagram viewer
δημιουργήστε ένα έργο Django και μια εφαρμογή που ονομάζεται gallery. Η εφαρμογή θα είναι μια συλλογή φωτογραφιών και θα χρησιμοποιήσετε το Bootstrap για το στυλ της γραμμής πλοήγησης της εφαρμογής.

Στη συνέχεια, εγκαταστήστε το Bootstrap με την ακόλουθη εντολή:

pipenv εγκαθιστώ django-bootstrap5 # εγκαθιστά το Bootstrap έκδοση 5

Ελέγξτε το Pipfile και επιβεβαιώστε ότι υπάρχει εξάρτηση Bootstrap 5. Τώρα πρέπει να ειδοποιήσετε το έργο Django ότι χρησιμοποιείτε μια εξάρτηση Bootstrap.

Στο settings.py αρχείο, καταχωρήστε το Bootstrap όπως φαίνεται παρακάτω:

INSTALLED_APPS = [
'εκθεσιακός χώρος',
'bootstrap5', 
]

Η εγγραφή του Bootstrap στις ρυθμίσεις του έργου συνδέει την εξάρτηση django-bootstrap5 με το έργο σας. Θα είναι διαθέσιμο σε οποιαδήποτε άλλη εφαρμογή που ορίζεται στο έργο.

Εφαρμόστε το Bootstrap σε ένα πρότυπο

Αρχικά, δημιουργήστε ένα φάκελο με το όνομα πρότυπα στον φάκελο της εφαρμογής σας. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα βάση.html αρχείο και α navbar.html αρχείο. Τα πρότυπα θα περιέχουν αρχεία HTML στα οποία θα το στυλ του Bootstrap.

Ενώ μπορείτε να εφαρμόσετε το Bootstrap στο navbar.html πρότυπο, η χρήση ενός αρχείου βάσης είναι συμβατική. ΕΝΑ βάση.html Το αρχείο θα περιέχει όλα τα σενάρια και τους συνδέσμους για εφαρμογή σε οποιαδήποτε σελίδα. Μειώνει την πολυπλοκότητα μεμονωμένων προτύπων, καθιστώντας τον κώδικά σας πιο καθαρό και πιο κατανοητό.

Στο βάση.html αρχείο, περιλαμβάνει τα ακόλουθα:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="en">


<κεφάλι>


<meta charset="UTF-8">


<meta http-equiv="X-UA-Συμβατό" περιεχόμενο="IE=ακμή">


<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1,0">
<τίτλος> Εκθεσιακός χώρος </title>


{% στυλ μπλοκ %}


{% bootstrap_css %}


{% endblock %}
</head>
<σώμα>
 {% περιλαμβάνω 'navbar.html' %}
 {% block content %} {% endblock %}
 {% σενάρια αποκλεισμού %}
<σενάριο src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ακεραιότητα="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="Ανώνυμος">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Αρχικά, φορτώστε την εξάρτηση bootstrap5. Στη συνέχεια, δημιουργήστε δύο στυλ μπλοκ όπου θα ορίσετε όλα τα στυλ για τα πρότυπα. Συμπεριλάβετε το {% bootstrap_css %} ετικέτα προτύπου και έναν σύνδεσμο προς το αρχείο CSS Bootstrap.

Στη συνέχεια, δημιουργήστε ένα σενάριο μπλοκ που καθορίζει τη λειτουργικότητα JavaScript.

Συμπεριλαμβανομένης της navbar.html στο βάση.html το συνδέει με το Bootstrap.

Δοκιμάστε τη διαμόρφωση προσθέτοντας στυλ Bootstrap στο navbar.html πρότυπο:

<nav class="navbar navbar-expand-lg">
<div class="δοχείο-ρευστό">
<h2 class="μάρκα" στυλ="χρώμα: πράσινο">GALLERY PICHA</h2>
<κλάση κουμπιού="navbar-toggler" τύπος="κουμπί" data-toggle="κατάρρευση" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="ψευδής" aria-label="Εναλλαγή πλοήγησης"><εγώ τάξη="fas fa-bars"></Εγώ></button>
<div class="σύμπτυξη navbar-σύμπτυξη" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-στοιχείο"><μια τάξη="nav-link nav-link-1 ενεργό" αρία-ρεύμα="σελίδα" href="{% url 'Σπίτι' %}" στυλ="χρώμα: πράσινο">Σπίτι</ένα></li>
<li class="nav-στοιχείο"><μια τάξη="Nav-link Nav-link-2" href="#εκθεσιακός χώρος" στυλ="χρώμα: πράσινο">Εκθεσιακός χώρος</ένα</li>
</ul>
</div>
</div>
</nav>

Τώρα, εκτελέστε τον διακομιστή και ελέγξτε τον ιστότοπό σας σε ένα πρόγραμμα περιήγησης. Θα πρέπει να δείτε το στυλ που εφαρμόζει το Bootstrap στη γραμμή πλοήγησης.

Γιατί να χρησιμοποιήσετε το Bootstrap σε έργα Django;

Θα χρησιμοποιείτε ως επί το πλείστον το Django για ανάπτυξη back-end, αλλά μπορεί επίσης να δημιουργήσει εκπληκτικές σελίδες στο front-end. Η χρήση του Bootstrap για το στυλ σελίδων στο μπροστινό μέρος είναι καλή πρακτική για αρχάριους του Django. Μπορείτε να κατανοήσετε σε βάθος το Django όταν δημιουργείτε εφαρμογές πλήρους στοίβας.

Όπως κάθε πλαίσιο front-end, μπορείτε να χρησιμοποιήσετε τάξεις Bootstrap με ένα έργο Django για να διαμορφώσετε τις ιστοσελίδες σας. Το Bootstrap 5 έχει καλύτερα εξαρτήματα και γρήγορο φύλλο στυλ. Έχει επίσης βελτιωμένη απόκριση για σύγχρονες συσκευές.

Γιατί να μην χρησιμοποιήσετε το Bootstrap για το στυλ και τη δημιουργία εκπληκτικών UI για τα έργα σας στο Django; Το Django θα σας καταπλήξει με τις δυνατότητές του στην ανάπτυξη ιστού.