Hvordan bruke Bootstrap i et Django-prosjekt

Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Siden lanseringen i 2013 har Bootstrap revolusjonert hvordan utviklere stiler nettsider. Bootstrap er et populært front-end-rammeverk som brukes til å designe responsive webapplikasjoner.

Django bruker Bootstraps forhåndsbygde CSS-stiler og JavaScript-plugins for å style nettsider. Selv om det reduserer bryet med styling, kan det være utfordrende å konfigurere det i Django.

MAKEUSE AV DAGENS VIDEO

La oss lære hvordan du installerer og konfigurerer Bootstrap i en Django-applikasjon.

hvor lenge varer datamaskinens strømforsyninger

Hvordan installere Bootstrap

Det er to måter å bruk Bootstrap 5 i et Django-prosjekt. Du kan installere den i applikasjonen din eller referere til filene ved hjelp av Bootstraps CDN . Dette prosjektet vil bruke førstnevnte metode.

Før du installerer Bootstrap, lage et Django-prosjekt og en applikasjon kalt galleri. Applikasjonen vil være et bildegalleri, og du vil bruke Bootstrap til å style applikasjonens navigasjonslinje.

Installer deretter Bootstrap med følgende kommando:

pipenv install django-bootstrap5  # installs Bootstrap version 5

Sjekk Pip-filen og bekreft at det er en Bootstrap 5-avhengighet. Du må nå varsle Django-prosjektet om at du bruker en Bootstrap-avhengighet.

I settings.py fil, registrer Bootstrap som vist nedenfor:

INSTALLED_APPS = [ 
    'gallery', 
    'bootstrap5',    
]

Registrering av Bootstrap i prosjektinnstillingene kobler django-bootstrap5-avhengigheten til prosjektet ditt. Den vil være tilgjengelig for alle andre applikasjoner som er definert i prosjektet.

Bruk Bootstrap på en mal

Først oppretter du en mappe med navnet maler i søknadsmappen din. Inne i denne mappen oppretter du en base.html fil og en navbar.html fil. Malene vil inneholde HTML-filer som Bootstrap vil style.

Mens du kan bruke Bootstrap på navbar.html mal, er det vanlig å bruke en basisfil. EN base.html filen vil inneholde alle skriptene og koblingene som skal brukes på en hvilken som helst side. Det reduserer kompleksiteten til individuelle maler, noe som gjør koden din renere og enklere å forstå.

hvorfor leverer ikke meldingene mine

I base.html fil, inkluderer følgende:

{% load bootstrap5 %} 
		 
	 
<!DOCTYPE html> 
		 
<html lang="en"> 
		 
<head> 
	 
      <meta charset="UTF-8"> 
		 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <title> Gallery </title> 
		 
		 
       {% block styles %} 
		 
		 
       {% bootstrap_css %} 
			 
		 
       {% endblock %} 
		 
</head> 
<body>   
       {% include 'navbar.html' %} 
       {% block content %} {% endblock %} 
       {% block scripts %} 
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> 
       </script> 
       {% bootstrap_javascript %} 
</body> 
</html>

Først laster du bootstrap5-avhengigheten. Lag deretter to blokkstiler der du skal definere alle stilene for malene. Inkluder {% bootstrap_css %} malkode og en lenke til Bootstrap CSS-filen.

Deretter oppretter du et blokkskript som definerer JavaScript-funksjonaliteten.

Inkludert navbar.html i base.html kobler den til Bootstrap.

Test konfigurasjonen ved å legge til Bootstrap-stiler til navbar.html mal:

<nav class="navbar navbar-expand-lg"> 
    <div class="container-fluid"> 
        <h2 class="brand" style="color:green">PICHA GALLERY</h2> 
  
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button> 
  
        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <ul class="navbar-nav ml-auto mb-2 mb-lg-0"> 
                <li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li> 
                <li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li> 
            </ul> 
        </div> 
    </div> 
</nav>

Kjør nå serveren og sjekk nettstedet ditt i en nettleser. Du bør se stylingen som Bootstrap bruker på navigasjonslinjen.

Hvorfor bruke Bootstrap i Django-prosjekter?

Du vil stort sett bruke Django for back-end-utvikling, men det kan også lage fantastiske front-end-sider. Å bruke Bootstrap til å style front-end-sider er god praksis for Django-nybegynnere. Du får en grundig forståelse av Django når du lager fullstack-applikasjoner.

dataoverføring fra telefon til datamaskin

Som ethvert front-end-rammeverk, kan du bruke Bootstrap-klasser med et Django-prosjekt for å style nettsidene dine. Bootstrap 5 har bedre komponenter og et raskt stilark. Den har også forbedret respons for moderne enheter.

Hvorfor ikke bruke Bootstrap til å style og lage fantastiske brukergrensesnitt for Django-prosjektene dine? Django vil overraske deg med sine evner innen webutvikling.