[Django] 네비게이션바

점프 투 장고를 참고하여 학습,제작하였습니다.

---

1.네비게이션바

부트스트랩에 있는 네비게이션 바를 이용해 네비게이션바를 만들자

 

 

 

1-1 base.html

공통적으로 페이지에 적용되야하므로 base.html에 네비게이션 바를 만든다.

 

 

 

1-2.결과

 

줄였을때 나오는 작은 메뉴버튼이 작동안됨

 

 

 

 

 

 

 

 

 

1-2 js 파일추가

메뉴버튼 작동을 위해 부트스트랩의 js 파일을 static에 넣는다.

 

 

 

1-3.js 파일 적용

base.html 파일에 js 파일을 적용한다.

 

 

 

1-4.결과

버튼을 누르면 로그인이 나오는걸 볼수있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.include

네비게이션바를 base.html에서 분리한뒤 base.html 템플릿에 포함시키기

 

 

2-1.navbar.html 생성

네비게이션 기능의 html 파일을 생성한다.

 

 

2-2. base.html 파일에 적용

include 태그를 통해 base.html 파일 body에 navbar.html 을 포함시킨다.

 

 

 

 

2-3.결과