점프 투 플라스크 3-01 부트스트랩 햄버거 메뉴 관련 질문

현재 3-01까지 따라한 상태인데요. 부트스트랩 햄버거 메뉴를 아무리 클릭해도 숨어 있는 메뉴가 나타나지 않아 글을 올립니다.

처음 부트스트랩 다운 받을 때는 5.1 베타버전을 다운받고 제이쿼리는 3.5.1을 다운 받았습니다.

그런데, 실행이 되지 않아 부트스트랩 버전을 책과 똑같이 4.4.1로 낮추어서 다시 다운로드 받고 파일을 static에 추가했는데도 실행이 되지 않습니다.

혹시 제가 뭔가 잘못입력한걸가 싶어 github에 올라와 있는 3-01 단계의 코드를 복붙해봤는데도 해결되지 않습니다.

물론, 제이쿼리 버전 입력하는 부분은 github코드의 3.4.1 -> 3.5.1로 제가 다운 버전에 맞게 입력을 한 상태입니다.

햄버거 메뉴 추가하는 부분까지는 책과 똑같이 정상 실행되었습니다.

제 노트북에 있는 base.html 코드 입니다.

<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">

    <!-- pybo CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Hello, pybo!</title>
</head>
<body>
{% include "navbar.html" %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- jQuery JS -->
<script src="{{ url_for('static', filename='jquery-3.5.1.min.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
</body>
</html>

추가로, 부트스트랩 버전을 4.4.1로 하였는데, 질문 조회목록의 '번호 제목 작성일자' 부분이 책에 나온 것처럼 까만 배경으로 나오는 것이 아니라 하얀 배경으로 나오는데 이거는 어떤게 문제일까요? 이 부분도 혹시 몰라 github 코드 복붙을 해봤는데도 계속 하얀 배경으로 나옵니다.

최윤선 862

M 2020년 12월 29일 4:26 오후

목록으로
1개의 답변이 있습니다. 1 / 1 Page

안녕하세요.

부트스트랩은 4.x 버전을 설치하시는게 맞습니다.
현재 5.0 버전이 베타로 갑자기 나와서 책 구매자분들께 대응하고 있는 중입니다.

다음 문서도 참고해 주세요.

https://wikidocs.net/81050

지금 테이블 타이틀 바가 검은색이 아닌 흰색으로 보이신다면 부트스트랩5 버전이 여전히 적용되어 있기 때문입니다.
부트스트랩 css와 js를 모두 삭제하시고 4.4.1 또는 4.5.3(4.x중에서 최신버전)의 css와 js로 교체하시면 제대로 보일겁니다.

만약 그래도 제대로 안보인다면 브라우저 접속후 Ctrl-F5로 새로 고침 또는 브라우저 캐시를 삭제하시면 될것 같습니다.

조치해 보시고 안되면 다시 알려주세요.

박응용

M 2020년 12월 29일 10:54 오후

css와 js교체하고 ctrl+F5 누르니까 해결 되네요! 감사합니다!! - 최윤선님, 2020년 12월 29일 8:34 오후 추천 , 대댓글