# Bootstrap를 이용해서 서브메뉴 만들기
구글에서 Bootstrap 검색 후 Get Started 클릭
js007.html 파일을 만들고 링크에서 보이는 Sample 코드 복사 후 붙여넣기
```html
Bootstrap demo
Hello, world!
```
이렇게 하면 Bootstrap을 사용할 준비는 끝났다.
여기에 우리가 이전에 만들었던 main.css 파일도 추가하자.
위 사이트에서 다양한 폼, 컴포넌트 등을 확인 할 수 있다.
우리는 여기서 이런 서브메뉴를 만들어 볼 겁니다.
서브메뉴 예시 이미지
{% embed url="" %}
Bootstrap 을 쓰기위해서 만들었던 페이지에 nav bar를 상단에 추가해보자.
```html
```
상단바
UI 만들기의 기본은
1. HTML / CSS로 미리 디자인
2. 필요할 때 호출
그럼 먼저 list를 만들어보자.
부트스트랩 페이지에서 list 검색 후 적당한 걸 copy
```html
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
```
main.css에 css추가
```css
.list-group {
display: none;
}
.show {
display: block;
}
```
```html
```
이렇게 class에 show class를 추가하면 보여진다. (class를 추가할 때에는 띄워쓰고 class 이름 추가)
이제 버튼을 클릭 하면 show class 를 붙여주는 javascript 를 작성해보자.
```javascript
```