Bootstrap를 이용해서 서브메뉴 만들기

구글에서 Bootstrap 검색 후 Get Started 클릭

https://getbootstrap.com/docs/5.3/getting-started/introduction/

js007.html 파일을 만들고 링크에서 보이는 Sample 코드 복사 후 붙여넣기 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

이렇게 하면 Bootstrap을 사용할 준비는 끝났다.

여기에 우리가 이전에 만들었던 main.css 파일도 추가하자.

위 사이트에서 다양한 폼, 컴포넌트 등을 확인 할 수 있다.

우리는 여기서 이런 서브메뉴를 만들어 볼 겁니다.

Bootstrap 을 쓰기위해서 만들었던 페이지에 nav bar를 상단에 추가해보자.

<nav class="navbar ">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

UI 만들기의 기본은

  1. HTML / CSS로 미리 디자인

  2. 필요할 때 호출

그럼 먼저 list를 만들어보자.

부트스트랩 페이지에서 list 검색 후 적당한 걸 copy

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

main.css에 css추가

.list-group {
    display: none;
}
.show {
    display: block;
}
<ul class="list-group show">

이렇게 class에 show class를 추가하면 보여진다. (class를 추가할 때에는 띄워쓰고 class 이름 추가)

이제 버튼을 클릭 하면 show class 를 붙여주는 javascript 를 작성해보자.

<script>
    document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() {
        //버튼 클릭 시 show class 추가
        document.getElementsByClassName('list-group')[0].classList.add('show');
        //버튼 클릭 시 show class Toggle
        document.getElementsByClassName('list-group')[0].classList.toggle('show');
    })
</script>

PreviousEvent Listner 연습문제NextquerySelector

Last updated