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

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

[https://getbootstrap.com/docs/5.3/getting-started/introduction/](https://getbootstrap.com/docs/5.3/getting-started/introduction/)



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

```html
<!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을 사용할 준비는 끝났다.&#x20;

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

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

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

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F4sKNJvbJZ0PSK9yYiVs4%2FScreenshot_45.png?alt=media&#x26;token=fa608ef6-03de-4f89-8475-8ff66adba143" alt=""><figcaption><p>서브메뉴 예시 이미지 </p></figcaption></figure>

{% embed url="https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Math" %}

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

```html
<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>
```

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F7FB2ij626Bnh1KOwmuEf%2FScreenshot_46.png?alt=media&#x26;token=a0023520-5b33-48a7-bbe4-17f12e7fd79a" alt=""><figcaption><p>상단바 </p></figcaption></figure>

UI 만들기의 기본은&#x20;

1. HTML / CSS로 미리 디자인
2. 필요할 때 호출&#x20;

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

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

```html
<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추가

```css
.list-group {
    display: none;
}
.show {
    display: block;
}
```

```html
<ul class="list-group show">
```

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

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



```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>
```



