장고 프로젝트에서 부트스트랩을 사용하는 방법

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 더 읽어보세요.

2013년 출시 이후 부트스트랩은 개발자가 웹 페이지 스타일을 지정하는 방식에 혁신을 가져왔습니다. 부트스트랩은 반응형 웹 애플리케이션을 설계하는 데 사용되는 널리 사용되는 프런트 엔드 프레임워크입니다.

Django는 Bootstrap의 사전 구축된 CSS 스타일과 JavaScript 플러그인을 사용하여 웹 페이지의 스타일을 지정합니다. 스타일링의 번거로움을 줄여주지만 Django에서 구성하는 것은 어려울 수 있습니다.

오늘의 메이크업 비디오

Django 애플리케이션에서 부트스트랩을 설치하고 구성하는 방법을 알아봅시다.

부트스트랩 설치 방법

두 가지 방법이 있습니다. 부트스트랩 5 사용 장고 프로젝트에서. 애플리케이션에 설치하거나 다음을 사용하여 파일을 참조할 수 있습니다. 부트스트랩의 CDN . 이 프로젝트는 전자의 방법을 사용합니다.

부트스트랩을 설치하기 전에, 장고 프로젝트 생성 갤러리라는 애플리케이션이 있습니다. 응용 프로그램은 사진 갤러리가 될 것이며 Bootstrap을 사용하여 응용 프로그램의 탐색 모음 스타일을 지정합니다.

다음으로 다음 명령을 사용하여 부트스트랩을 설치합니다.

pipenv install django-bootstrap5  # installs Bootstrap version 5

Pipfile을 확인하고 Bootstrap 5 종속성이 있는지 확인합니다. 이제 부트스트랩 종속성을 사용하고 있음을 Django 프로젝트에 알려야 합니다.

에서 settings.py 파일에서 아래와 같이 부트스트랩을 등록합니다.

애니메이션 배경 화면을 갖는 방법

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

프로젝트 설정에서 부트스트랩을 등록하면 django-bootstrap5 종속성이 프로젝트에 연결됩니다. 프로젝트에 정의된 다른 모든 애플리케이션에서 사용할 수 있습니다.

템플릿에 Bootstrap 적용

먼저 이름이 지정된 폴더를 만듭니다. 템플릿 응용 프로그램 폴더에. 이 폴더 안에 다음을 만듭니다. base.html 파일과 navbar.html 파일. 템플릿에는 부트스트랩이 스타일을 지정하는 HTML 파일이 포함됩니다.

부트스트랩을 적용할 수 있는 반면 navbar.html 기본 파일을 사용하는 것이 일반적입니다. ㅏ base.html 파일에는 모든 페이지에 적용할 모든 스크립트와 링크가 포함됩니다. 개별 템플릿의 복잡성을 줄여 코드를 더 깔끔하고 이해하기 쉽게 만듭니다.

에서 base.html 파일에는 다음이 포함됩니다.

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

먼저 bootstrap5 종속성을 로드합니다. 그런 다음 템플릿의 모든 스타일을 정의할 두 개의 블록 스타일을 만듭니다. 포함 {% bootstrap_css %} 템플릿 태그 및 Bootstrap CSS 파일에 대한 링크.

다음으로 JavaScript 기능을 정의하는 블록 스크립트를 만듭니다.

포함하는 navbar.html 에서 base.html 부트스트랩에 연결합니다.

부트스트랩 스타일을 navbar.html 주형:

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

이제 서버를 실행하고 브라우저에서 사이트를 확인하십시오. 부트스트랩이 탐색 모음에 적용하는 스타일이 표시되어야 합니다.

Django 프로젝트에서 부트스트랩을 사용하는 이유는 무엇입니까?

주로 백엔드 개발에 Django를 사용하지만 멋진 프런트엔드 페이지도 만들 수 있습니다. Bootstrap을 사용하여 프런트 엔드 페이지의 스타일을 지정하는 것은 Django 초보자에게 좋은 연습입니다. 전체 스택 애플리케이션을 만들 때 Django에 대한 심층적인 이해를 얻을 수 있습니다.

다른 프런트 엔드 프레임워크와 마찬가지로 Django 프로젝트와 함께 Bootstrap 클래스를 사용하여 웹 페이지의 스타일을 지정할 수 있습니다. Bootstrap 5에는 더 나은 구성 요소와 빠른 스타일 시트가 있습니다. 또한 최신 장치에 대한 응답성이 향상되었습니다.

Bootstrap을 사용하여 Django 프로젝트를 위한 놀라운 UI 스타일을 지정하고 생성해 보시지 않겠습니까? Django는 웹 개발 기능으로 당신을 놀라게 할 것입니다.