Kā lietot Bootstrap Django projektā

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Kopš izlaišanas 2013. gadā, Bootstrap ir mainījis to, kā izstrādātāji veido tīmekļa lapas. Bootstrap ir populārs priekšgala ietvars, ko izmanto, lai izstrādātu atsaucīgas tīmekļa lietojumprogrammas.

Django izmanto Bootstrap iepriekš izveidotos CSS stilus un JavaScript spraudņus, lai veidotu tīmekļa lapas. Lai gan tas samazina stila veidošanas grūtības, tā konfigurēšana programmā Django var būt sarežģīta.

DIENAS VIDEO MAKEUSEOF

Uzzināsim, kā instalēt un konfigurēt Bootstrap Django lietojumprogrammā.

kā izveidot anonīmu Facebook kontu

Kā instalēt Bootstrap

Ir divi veidi, kā izmantojiet Bootstrap 5 Django projektā. Varat to instalēt savā lietojumprogrammā vai atsaukties uz failiem, izmantojot Bootstrap CDN . Šajā projektā tiks izmantota iepriekšējā metode.

Pirms Bootstrap instalēšanas, izveidot Django projektu un lietojumprogramma ar nosaukumu galerija. Lietojumprogramma būs fotoattēlu galerija, un jūs izmantosit Bootstrap, lai veidotu lietojumprogrammas navigācijas joslu.

Pēc tam instalējiet Bootstrap ar šādu komandu:

pipenv install django-bootstrap5  # installs Bootstrap version 5

Pārbaudiet Pipfile un pārbaudiet, vai ir atkarība no Bootstrap 5. Tagad jums ir jāpaziņo Django projektam, ka izmantojat Bootstrap atkarību.

attālā darbvirsma no Windows uz Linux

Iekš settings.py failu, reģistrējiet Bootstrap, kā parādīts zemāk:

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

Reģistrējot Bootstrap projekta iestatījumos, django-bootstrap5 atkarība tiek savienota ar jūsu projektu. Tas būs pieejams jebkuram citam projektā definētajam pieteikumam.

Lietojiet Bootstrap veidnei

Vispirms izveidojiet mapi ar nosaukumu veidnes lietojumprogrammas mapē. Šajā mapē izveidojiet a base.html fails un a navbar.html failu. Veidnēs būs HTML faili, kurus veidos Bootstrap.

Kamēr jūs varat lietot Bootstrap uz navbar.html veidnē, pamata faila izmantošana ir ierasta. A base.html failā būs visi skripti un saites, kas attiecas uz jebkuru lapu. Tas samazina atsevišķu veidņu sarežģītību, padarot kodu tīrāku un vieglāk saprotamu.

Iekš base.html failu, iekļaujiet šādu informāciju:

{% 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>

Vispirms ielādējiet bootstrap5 atkarību. Pēc tam izveidojiet divus bloku stilus, kuros definēsit visus veidņu stilus. Iekļauts {% bootstrap_css %} veidnes tagu un saiti uz Bootstrap CSS failu.

Pēc tam izveidojiet bloka skriptu, kas definē JavaScript funkcionalitāti.

Ieskaitot navbar.html iekš base.html savieno to ar Bootstrap.

Pārbaudiet konfigurāciju, pievienojot Bootstrap stilus navbar.html veidne:

<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>

Tagad palaidiet serveri un pārlūkprogrammā pārbaudiet savu vietni. Jums vajadzētu redzēt stilu, ko Bootstrap piemēro navigācijas joslai.

Kāpēc Django projektos izmantot Bootstrap?

Jūs galvenokārt izmantosit Django aizmugures izstrādei, taču tas var izveidot arī pārsteidzošas priekšgala lapas. Bootstrap izmantošana priekšgala lapu veidošanai ir laba prakse Django iesācējiem. Jūs iegūstat padziļinātu izpratni par Django, veidojot pilnas kaudzes lietojumprogrammas.

kā spēlēt datorspēles televizorā bezvadu režīmā

Tāpat kā jebkuru priekšgala sistēmu, varat izmantot Bootstrap klases ar Django projektu, lai veidotu savas tīmekļa lapas. Bootstrap 5 ir labāki komponenti un ātra stila lapa. Tam ir arī uzlabota reakcija uz modernām ierīcēm.

Kāpēc neizmantot Bootstrap, lai veidotu un izveidotu pārsteidzošas lietotāja saskarnes saviem Django projektiem? Django jūs pārsteigs ar savām iespējām tīmekļa izstrādē.