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

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

<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="/files/doxnaJ8gLFajG9clQDtx" 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="/files/XnAM9Vp8UMfCF2Lgj8cS" 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/bootstrap.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
