I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Dalla sua uscita nel 2013, Bootstrap ha rivoluzionato il modo in cui gli sviluppatori modellano le pagine web. Bootstrap è un popolare framework front-end utilizzato per progettare applicazioni Web reattive.

Django utilizza gli stili CSS e i plug-in JavaScript predefiniti di Bootstrap per modellare le pagine web. Sebbene riduca il fastidio dello styling, configurarlo in Django può essere impegnativo.

Impariamo come installare e configurare Bootstrap in un'applicazione Django.

Come installare Bootstrap

Ci sono due modi per usa Bootstrap 5 in un progetto Django. Puoi installarlo nella tua applicazione o fare riferimento ai file utilizzando CDN di Bootstrap. Questo progetto utilizzerà il metodo precedente.

Prima di installare Bootstrap, creare un progetto Django e un'applicazione chiamata gallery. L'applicazione sarà una galleria fotografica e utilizzerai Bootstrap per modellare la barra di navigazione dell'applicazione.

instagram viewer

Successivamente, installa Bootstrap con il seguente comando:

pipenv installare django-bootstrap5 # installa Bootstrap versione 5

Controlla il Pipfile e conferma che c'è una dipendenza Bootstrap 5. Ora devi notificare al progetto Django che stai utilizzando una dipendenza Bootstrap.

Nel impostazioni.py file, registrare Bootstrap come mostrato di seguito:

APP_INSTALLATE = [
'galleria',
'bootstrap5', 
]

La registrazione di Bootstrap nelle impostazioni del progetto connette la dipendenza django-bootstrap5 al tuo progetto. Sarà disponibile per qualsiasi altra applicazione definita nel progetto.

Applicare Bootstrap su un modello

Innanzitutto, crea una cartella denominata modelli nella cartella dell'applicazione. All'interno di questa cartella, crea un file base.html file e un barra di navigazione.html file. I modelli conterranno file HTML che Bootstrap modellerà.

Mentre puoi applicare Bootstrap sul file barra di navigazione.html modello, l'utilizzo di un file di base è convenzionale. UN base.html il file conterrà tutti gli script e i collegamenti da applicare a qualsiasi pagina. Riduce la complessità dei singoli modelli, rendendo il codice più pulito e più facile da capire.

Nel base.html file, includere quanto segue:

{% caricamento bootstrap5 %}
<!DOCTYPE html>


<html lang="it">


<Testa>


<meta set di caratteri="UTF-8">


<meta http-equiv="Compatibile con X-UA" contenuto="IE=bordo">


<nome meta="finestra" contenuto="width=larghezza-dispositivo, scala-iniziale=1.0">
<titolo> Galleria </title>


{% stili di blocco %}


{% bootstrap_css %}


{% blocco finale %}
</head>
<corpo>
 {% includere 'barra di navigazione.html' %}
 {% blocco contenuto %} {% blocco finale %}
 {% script di blocco %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrità="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" origine incrociata="anonimo">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Innanzitutto, carica la dipendenza bootstrap5. Quindi crea due stili di blocco in cui definirai tutti gli stili per i modelli. Includi il {% bootstrap_css %} tag template e un collegamento al file CSS Bootstrap.

Successivamente, crea uno script di blocco che definisce la funzionalità JavaScript.

Includendo il barra di navigazione.html nel base.html lo collega a Bootstrap.

Testare la configurazione aggiungendo stili Bootstrap al file barra di navigazione.html modello:

<classe di navigazione="navbar navbar-expand-lg">
<classe div="contenitore-fluido">
<classe h2="marca" stile="colore: verde">GALLERIA PICA</h2>
<classe pulsante="navbar-toggler" tipo="pulsante" data-toggle="crollo" obiettivo-dati="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-espanso="falso" etichetta-aria="Attiva/disattiva la navigazione"><io classe="fas fa-bar"></io></button>
<classe div="collassa barra di navigazione-collassa" id="navbarSupportedContent">
<classe ul="barra di navigazione-nav ml-auto mb-2 mb-lg-0">
<li class="elemento di navigazione"><una classe="nav-link nav-link-1 attivo" aria-corrente="pagina" href="{% URL 'casa' %}" stile="colore: verde">Casa</UN></li>
<li class="elemento di navigazione"><una classe="nav-link nav-link-2" href="#galleria" stile="colore: verde">Galleria</UN</li>
</ul>
</div>
</div>
</nav>

Ora avvia il server e controlla il tuo sito in un browser. Dovresti vedere lo stile che Bootstrap applica alla barra di navigazione.

Perché usare Bootstrap nei progetti Django?

Utilizzerai principalmente Django per lo sviluppo back-end, ma può anche creare fantastiche pagine front-end. Usare Bootstrap per dare uno stile alle pagine front-end è una buona pratica per i principianti di Django. Ottieni una comprensione approfondita di Django quando crei applicazioni full-stack.

Come qualsiasi framework front-end, puoi utilizzare le classi Bootstrap con un progetto Django per modellare le tue pagine web. Bootstrap 5 ha componenti migliori e un foglio di stile veloce. Ha anche migliorato la reattività per i dispositivi moderni.

Perché non utilizzare Bootstrap per modellare e creare fantastiche interfacce utente per i tuoi progetti Django? Django ti stupirà con le sue capacità nello sviluppo web.