Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Od czasu premiery w 2013 r. Bootstrap zrewolucjonizował sposób, w jaki programiści stylizują strony internetowe. Bootstrap to popularny framework front-end służący do projektowania responsywnych aplikacji internetowych.

Django używa gotowych stylów CSS Bootstrapa i wtyczek JavaScript do stylizowania stron internetowych. Chociaż zmniejsza to kłopot związany ze stylizacją, konfigurowanie go w Django może być trudne.

Nauczmy się instalować i konfigurować Bootstrap w aplikacji Django.

Jak zainstalować Bootstrapa

Istnieją dwa sposoby użyj Bootstrapa 5 w projekcie Django. Możesz zainstalować go w swojej aplikacji lub odwołać się do plików za pomocą CDN Bootstrapa. W tym projekcie wykorzystamy poprzednią metodę.

Przed zainstalowaniem Bootstrapa, stworzyć projekt Django oraz aplikacja o nazwie galeria. Aplikacja będzie galerią zdjęć, a do stylizowania paska nawigacyjnego aplikacji użyjesz Bootstrap.

instagram viewer

Następnie zainstaluj Bootstrap za pomocą następującego polecenia:

pipenv zainstalować django-bootstrap5 # instaluje Bootstrap w wersji 5

Sprawdź plik Pipfile i potwierdź, że istnieje zależność Bootstrap 5. Musisz teraz powiadomić projekt Django, że używasz zależności Bootstrap.

w ustawienia.py plik, zarejestruj Bootstrap, jak pokazano poniżej:

ZAINSTALOWANE_APLIKACJE = [
'Galeria',
'bootstrap5', 
]

Rejestracja Bootstrap w ustawieniach projektu łączy zależność django-bootstrap5 z twoim projektem. Będzie dostępny dla każdej innej aplikacji zdefiniowanej w projekcie.

Zastosuj Bootstrap na szablonie

Najpierw utwórz folder o nazwie szablony w folderze aplikacji. Wewnątrz tego folderu utwórz plik baza.html plik i A pasek nawigacyjny.html plik. Szablony będą zawierać pliki HTML, które będą stylizowane przez Bootstrap.

Chociaż możesz zastosować Bootstrap na pasek nawigacyjny.html szablonu, użycie pliku podstawowego jest konwencjonalne. A baza.html plik będzie zawierał wszystkie skrypty i linki do zastosowania na dowolnej stronie. Zmniejsza złożoność poszczególnych szablonów, czyniąc Twój kod czystszym i łatwiejszym do zrozumienia.

w baza.html plik zawiera następujące elementy:

{% ładowania bootstrap5 %}
<!DOCTYPE html>


<język html="en">


<głowa>


<zestaw znaków meta="UTF-8">


<odpowiednik meta http="Kompatybilny z X-UA" zawartość="IE=krawędź">


<metanazwa="rzutnia" zawartość="szerokość = szerokość urządzenia, skala początkowa = 1,0">
<tytuł> Galeria </title>


{% style bloków %}


{% bootstrap_css %}


{% blok końcowy %}
</head>
<ciało>
 {% włączać 'pasek nawigacyjny.html' %}
 {% zawartość bloku %} {% blok końcowy %}
 {% skrypty blokowe %}
<źródło skryptu="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integralność ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" krzyżowe pochodzenie="anonimowy">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Najpierw załaduj zależność bootstrap5. Następnie utwórz dwa style bloków, w których zdefiniujesz wszystkie style dla szablonów. Zawierać {% bootstrap_css %} template i link do pliku CSS Bootstrap.

Następnie utwórz skrypt blokowy, który definiuje funkcjonalność JavaScript.

Włączając pasek nawigacyjny.html w baza.html łączy go z Bootstrapem.

Przetestuj konfigurację, dodając style Bootstrap do pliku pasek nawigacyjny.html szablon:

<klasa nawigacji ="navbar navbar-rozwiń-lg">
<klasa div="pojemnik-płyn">
<klasa h2="marka" styl="Zielony kolor">GALERIA PICHA</h2>
<klasa przycisku ="przełącznik paska nawigacyjnego" typ="przycisk" przełączanie danych="zawalić się" cel-danych="#navbarObsługiwana treść" aria-controls="navbarObsługiwana zawartość" aria-rozwinięta ="FAŁSZ" aria-etykieta="Przełącz nawigację"><ja klasa="fas fa bary"></I></button>
<klasa div="zwiń pasek nawigacyjny-zwiń" identyfikator="navbarObsługiwana zawartość">
<ul klasa="navbar-nav ml-auto mb-2 mb-lg-0">
<klasa li="element nawigacyjny"><klasa ="nav-link nav-link-1 aktywny" aria-bieżąca="strona" href="{% adresu URL 'dom' %}" styl="Zielony kolor">Dom</A></li>
<klasa li="element nawigacyjny"><klasa ="link do nawigacji link do nawigacji-2" href="#Galeria" styl="Zielony kolor">Galeria</A</li>
</ul>
</div>
</div>
</nav>

Teraz uruchom serwer i sprawdź swoją witrynę w przeglądarce. Powinieneś zobaczyć styl, który Bootstrap stosuje do paska nawigacyjnego.

Dlaczego warto używać Bootstrap w projektach Django?

Będziesz głównie używać Django do tworzenia back-endu, ale może on również tworzyć niesamowite strony front-endowe. Używanie Bootstrapa do stylizowania stron front-end jest dobrą praktyką dla początkujących Django. Dogłębnie zrozumiesz Django podczas tworzenia aplikacji z pełnym stosem.

Jak każdy framework front-end, możesz używać klas Bootstrap z projektem Django do stylizowania swoich stron internetowych. Bootstrap 5 ma lepsze komponenty i szybki arkusz stylów. Ma również lepszą responsywność dla nowoczesnych urządzeń.

Dlaczego nie użyć Bootstrap do stylizowania i tworzenia niesamowitych interfejsów użytkownika dla swoich projektów Django? Django zadziwi Cię swoimi możliwościami w tworzeniu stron internetowych.