-
초간단 Django 게시판 14. base.html 수정Python/초간단 장고 Django 2021. 5. 30. 13:28반응형
일단 위가 상당히 허전하다.
nav 바를 만들고,
그 아래 로그인 부분을 가져오자.navbar
부트스트랩의 네비게이션 바를 참고하자.
https://getbootstrap.com/docs/5.0/components/navbar/<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <!-- '-fluid'를 지워주자 --> <a class="navbar-brand" href="{% url 'index' %}">Simple Django BBS</a> </div> </nav>nav바의 컬러는 이런 식으로 조절한다.
https://getbootstrap.com/docs/5.0/components/navbar/#color-schemeslog in
로그인 부분은 <div class="container"></div> 사이에 넣어두자.
<div style="margin: .9rem 0 0 0"> <p style="text-align:right"> {% if user.is_authenticated %} <span>Hi '{{ user.username }}'! <a href="{% url 'logout' %}">Log Out</a> / <a href="{% url 'password_change' %}">Password Change</a></span> {% else %} <span class="text-info">You are not logged in. <a href="{% url 'login' %}">Log In</a> or <a href="{% url 'signup' %}">Sign Up</a></span> {% endif %} </p> </div>전체 코드
<!-- 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> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="{% url 'index' %}">Simple Django BBS</a> </div> </nav> <div class="container"> <div style="margin: .9rem 0 0 0"> <p style="text-align:right"> {% if user.is_authenticated %} <span>Hi '{{ user.username }}'! <a href="{% url 'logout' %}">Log Out</a> / <a href="{% url 'password_change' %}">Password Change</a></span> {% else %} <span class="text-info">You are not logged in. <a href="{% url 'login' %}">Log In</a> or <a href="{% url 'signup' %}">Sign Up</a></span> {% endif %} </p> </div> {% 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>반응형