[Bootstrap] Dropdown 메뉴 구현

 

부트스트랩으로 드롭다운 메뉴 구현! 뭔가 느낌있는 박스가 완성되었다. 부트스트랩을 이용하는 방법은 공식 문서에서 부트스트랩 stylesheet 링크를 복사하여 헤더에 넣어주는 것이다. 또 문서에서 jQuery library, Popper JS, bootstrap.js, 통합 js 번들도 데려올 수 있다. 

 

https://getbootstrap.com/docs/5.1/getting-started/introduction/ (부트스트랩 공식문서)

 

<!-- 그리드 나누는 법 --->

<div class="container"> <!-- 전체 컨테이너 생성 -->
	<div class="row"></div> <!-- 전체 컨테이너 중 가로행 1줄 생성 -->
     	<div class="col-md-12"></div> <!-- 가로행 1줄은 12개의 컬럼으로 -->
</div>

<!------------------->


<div class="container">
	<div class="dropdown">
    	<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        	<li><a class="dropdown-item" href="#">html</a></li>
            <li><a class="dropdown-item" href="#">css</a></li>
            <li><a class="dropdown-item" href="#">javascript</a></li>
            <li><a class="dropdown-item" href="#">bootstrap</a></li>
            <li><a class="dropdown-item" href="#">jsp/a></li>
        </ul>
	</div>
</div>