๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS/๐Ÿ›ฐ๏ธ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ BootStrap

8๏ธโƒฃ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ (BootStrap) - Dropdown

by Meteora_ 2021. 2. 26.
728x90


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

 <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
  
 
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <!-- ํด๋”๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‚ฌ์šฉ์‹œ ์†๋„๋น ๋ฆ„ -->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
  

</head>
<body>

<h1 class="text-center mb-5">component:dropdown</h1>
<h2 class="text-center mb-4">๊ธฐ๋ณธ์ ์ธ ์‚ฌ์šฉ ์˜ˆ</h2>

<div class="container">

	<div class="dropdown">
	
		<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      	๋“œ๋กญ ๋‹ค์šด
   		 </button>
	
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
			<a class="dropdown-item" href="#">๋ฉ”๋‰ด1</a>
			<a class="dropdown-item" href="#">๋ฉ”๋‰ด2</a>
			<a class="dropdown-item" href="#">๋ฉ”๋‰ด3</a>
		</div>
	
	</div>

</div>


</body>
</html>

๋Œ“๊ธ€