-
초간단 Django 게시판 12. bootstrap 적용Python/초간단 장고 Django 2021. 5. 30. 11:18반응형
부트스트랩을 적용하자. ^^
0. bootstrap
https://getbootstrap.com/docs/5.0/getting-started/introduction/
자세한 것은 위 글을 읽어보면 되겠고...
공대생 디자인을 벗어날 수 있는
가장 간단한 솔루션 같고,
또 초간단 게시판과도 어울린다는 생각이 들어
도입을.... 쿨럭...최신 버전인 5는
이전 버전과 차이점은 여러 가지 있겠지만...
본인에게는 다음 두 가지가 가장 크게 와 닫는다.- Jquery 삭제
- IE10 & 11 지원 중단1. templates/base.html 수정
'viewport',
'Bootstrap CSS',
'Bootstrap Bundle with Popper'
을 추가한다.초간단 게시판에 걸맞게 static 파일을 쓰지말고..
CDN에서 퍼오는 걸로...<!-- templates/base.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <!-- viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <title>{% block title %}{% endblock %} - Simple Django BBS</title> </head> <body> <div class="container"> {% block content %} {% endblock %} </div> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>
https://getbootstrap.com/docs/5.0/getting-started/introduction/#starter-template 을 참고했다.
이렇게 공통 부분을 처리해 주면 한번만 수정해도 상속 관계의 모든 템플릿에 적용되니 편리하다.
이렇게 해두고 기존 화면을 보기만 해도 살짝 변화의 기운이 느껴진다.
이 부분도 추가되었는데...
감싸 주면 좌우에 공간이 생긴다.
반응형으로 제작할 때 필요한 부분이기도 하다.<div class="container"> <!-- Content here --> </div>
https://getbootstrap.com/docs/5.0/layout/containers/#default-container 참고.
반응형