Messages Framework 작성하는 중인데 부트스트랩이 깨... - 인프런

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

Messages Framework 작성하는 중인데 부트스트랩이 깨지고 닫기버튼이 눌리지 않아요

해결된 질문

작성

200

안녕하세요 강사님! 메세지 프레임워크 적용시 사진과 같이 깨지고 버튼도 안눌리는데 제 코드에 문제가 있는건가요?

{% load bootstrap4 static %}

<!DOCTYPE html>
<html lang="kr">
<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>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                {% bootstrap_messages %}
                <!-- 아래 방법도 똑같음, 직접 커스텀 가능 -->
                <!-- {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                    <div class="alert alert-{{ message.tags }}">
                        {{ message.message }}
                    </div>
                    {% endfor %}
                </div>
            {% endif %} -->
            </div>
        </div>
    </div>


    {% block content %}
    {% endblock content %}
</body>
</html>

react django python docker

답변 1

이진석

지식공유자

안녕하세요.

django-bootstrap 라이브러리는 bootstrap4를 기반으로 하고 있습니다. 그런데, 부트스트랩 CDN을 v5를 사용하셔서 스타일이 맞지 않아서 말씀하신 이슈가 발생한 듯 합니다.

django-bootstrap을 쓰실 때에는 부트스트랩 CDN을 직접 쓰시기보다, 아래와 같이 django-bootstrap에서 지원하는 템플릿 태그를 쓰시면 보다 수월하게 적용하실 수 있습니다.

{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

그리고, 부트스트랩 v5에 대응해서는 django-bootstrap-v5 라이브러리가 있습니다. django-bootstrap과 사용법이 거의 유사하니, django-bootstrap 대신에 django-bootstrap-v5를 써보시는 것도 좋겠네요.

django-bootstrap (부트스트랩 v4) 공식 문서 : https://django-bootstrap4.readthedocs.io/en/latest/quickstart.html

django-bootstrap-v5 (부트스트랩 v5) 공식 문서 : https://django-bootstrap-v5.readthedocs.io/en/latest/quickstart.html

hwk

질문자

배우는 속도보다 기술이 발전하는 속도가 더빠르다니ㅠㅠ 더 열심히 해야겠네요 답변 감사합니다~!

인프런 커뮤니티 질문&답변

Messages Framework 작성하는 중인데 부트스트랩이 깨지고 닫기버튼이 눌리지 않아요