[Html] 부트스트랩 data-toggle 사용해보기

Hyunjun Kim·2024년 7월 22일

Flask_web_project

목록 보기
1/3
post-thumbnail

python api 쇼핑몰 만들기 어쩌구 하다가

base.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewpoint" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384"
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css"
      crossorigin="anonymous"
    />

    <title>{% block title %}Home{% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">
        <div class="navbar-nav">
          <a class="nav-item nav-link" id="login" href="/login">Login</a>
          <a class="nav-item nav-link" id="signUp" href="/sign-up">Sign up</a>
          <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
          <a class="nav-item nav-link" id="home" href="/">Home</a>
        </div>
      </div>
    </nav>

    <script
      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
      integrity="sha256"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"
      integrity="sha512"
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
      integrity="sha384"
      crossorigin="anonymous"
    ></script>

    <script>
      type = "text/javascript";
      src = "{{ url_for('static', filename='index.js') }}";
    </script>
  </body>
</html>



home.html

{% extends "base.html" %} 
{% block title %}Changed{% endblock %}

을 만들었다.



화면분할 상태( item 들을 한번에 보여주기 힘든 상황에서는 메뉴버튼으로 접고 펼 수 있다.)

메뉴 버튼 누르기 전

메뉴 버튼 누른 후

전체화면 상태 (item 들을 한번에 보여줄 수 있는 상황에서는 메뉴버튼이 사라진다.)

프론트를 하려고 한 건 아닌데 강제로 하는 느낌이다. 하지만 재미있다.

profile
Data Analytics Engineer 가 되

0개의 댓글