English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 기본 튜토리얼

Bootstrap4 下拉菜单位置

마우스를 가져가거나 클릭하여 트리거 요소를 일으키면, 일반적으로 네비게이션 타이틀 내에서下拉菜单位置相关链接的列表的下拉菜单를 사용하여 표시합니다。 您可以使用Bootstrap下拉插件向几乎所有内容（如链接，按钮或按钮组，导航栏，选项卡和药丸导航等）添加可切换的下拉菜单（即单击打开和关闭），而无需编写任何JavaScript代码。

Bootstrap4 드롭다운 메뉴는 popper.min.js에 의존합니다。

드롭다운 메뉴는 토글 가능하며, 링크를 목록 형식으로 표시하는 상태 메뉴입니다。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2下拉菜单</h2>
　　<p>.dropdown 클래스는 드롭다운 메뉴를 지정하는 데 사용됩니다。</p>
　　<p>.dropdown-menu 클래스를 사용하여 실제 드롭다운 메뉴를 설정。</p>
　　<p>我们也可以使用一个按钮或链接来 open the dropdown menu，按钮或链接需要 add .dropdown-toggle 과 data-toggle="dropdown" 속성。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary 드롭다운-toggle" data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<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>
테스트를 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

示例解析

.dropdown 클래스는 드롭다운 메뉴를 지정하는 데 사용됩니다。

我们也可以使用一个按钮或链接来 open the dropdown menu，按钮或链接需要添加 .dropdown-toggle 과 data-toggle="dropdown" 속성을 추가합니다。

<div> 요소에 .dropdown-menu 클래스를 사용하여 실제 드롭다운 메뉴를 설정하고, 그 다음 드롭다운 메뉴의 항목에 추가 .dropdown-item 클래스。

我们也可以在 <a> 标签中使用：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div　class="dropdown">
	　　<a class="btn btn-secondary 드롭다운-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown link
	　　</a>
	　　<div　class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a　class="dropdown-item" href="#">동작</a>
		<a　class="dropdown-item" href="#">다른 동작</a>
		<a　class="dropdown-item" href="#">여기에 무엇인가</a>
	　　</div>
	</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

드롭다운 메뉴의 분리선

.dropdown-divider 클래스는 드롭다운 메뉴에 수평 분리선을 생성하는 데 사용됩니다：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>드롭다운 메뉴에</h2>
　　<p>.dropdown-divider 클래스는 드롭다운 메뉴에 수평 분리선을 생성하는 데 사용됩니다：</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary 드롭다운-toggle" data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　3</a>
　　　　　　<div　class="dropdown-divider></div>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

드롭다운 메뉴의 제목

.dropdown-header 클래스는 드롭다운 메뉴에 제목을 추가하는 데 사용됩니다：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>드롭다운 메뉴에</h2>
　　<p>.dropdown-header 클래스는 드롭다운 메뉴에 제목을 추가하는 데 사용됩니다：</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary 드롭다운-toggle" data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　3</a>
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

드롭다운 메뉴의 사용 가능 항목과 비활성화 항목

.active 클래스는 드롭다운 메뉴 항목을 강조 표시합니다(파란 배경 추가)。

드롭다운 메뉴 항목을 비활성화하려면 .disabled 클래스를 사용할 수 있습니다。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2下拉菜单</h2>
　　<p>.active 클래스는 드롭다운 메뉴 항목을 강조 표시합니다(파란 배경 추가)。</p>
　　<p>如果要禁用下拉菜单的选项，可以使用.disabled　类。/p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary 드롭다운-toggle" data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Normal</a>
　　　　　　<a　class="dropdown-item　active"　href="#">Active</a>
　　　　　　<a　class="dropdown-item　disabled"　href="#">Disabled</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

下拉菜单的定位

如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu　클래스 뒤에 .dropdown-menu-right 类。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2下拉菜单</h2>
　　<p>如果我们想让下拉菜单右对齐，可以在元素上的　.dropdown-menu　클래스 뒤에　.dropdown-menu-right　类。</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary 드롭다운-toggle" data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu　dropdown-menu-right">
　　　　　　<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>
테스트를 보세요 ‹/›

下拉菜单弹出方向设置

下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。

指定向右弹出的下拉菜单

如果你希望下拉菜单位置向右弹出，可以在 div 元素上添加 　"dropright" 类:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2下拉菜单</h2>
　　<p>　.dropright　클래스는下拉菜单位置向右弹出：</p><br>
　　<!--　Default　dropright　button　-->
	<div　class="btn-group　dropright">
	　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　드롭다운 메뉴 링크　-->
		<a　class="dropdown-item" href="#">동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">다른 동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">여기에 무엇인가</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">분리된 링크</a>
　　　　　　　　</div>
	</div>
	<!--　Split　dropright　button　-->
	<div　class="btn-group　dropright">
	　　<button　type="button"　class="btn　btn-secondary">
		Split　dropright
	　　</button>
	　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle　Dropright</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　드롭다운 메뉴 링크　-->
		　<a　class="dropdown-item" href="#">동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">다른 동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">여기에 무엇인가</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">분리된 링크</a>
	　　</div>
	</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

指定向上弹出的上拉菜单

如果你希望上拉菜单位置向上弹出，可以在 div 元素上添加 　"dropup" 类:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　　<h2下拉菜单</h2>
　　　　<p>　.dropup　클래스는下拉菜单位置向上弹出：</p><br><br><br><br><br><br><br><br>
　　<!--　Default　dropup　button　-->
　　　　<div　class="btn-group　dropup">
　　　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　드롭다운 메뉴 링크　-->
　　　　　　　　<a　class="dropdown-item" href="#">동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">다른 동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">여기에 무엇인가</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">분리된 링크</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!--　Split　dropup　button　-->
　　　　<div　class="btn-group　dropup">
　　　　<button　type="button"　class="btn　btn-secondary">
　　　　　　　　Split　dropup
　　　　</button>
　　　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　<span class="sr-only">Toggle　Dropdown</span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　드롭다운 메뉴 링크　-->
　　　　　　　　<a　class="dropdown-item" href="#">동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">다른 동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">여기에 무엇인가</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">분리된 링크</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

指定向左边弹出的下拉菜单

如果你希望下拉菜单位置向上弹出，可以在 div 元素上添加 　"dropleft" 类:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"　style="text-align:center;">
　　<h2下拉菜单</h2>
　　<p>　.dropleft　클래스는下拉菜单位置向左弹出：</p><br>
　　<!--　기본 드롭레프트 버튼　-->
	<div　class="btn-그룹 드롭레프트">
	　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		드롭레프트
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　드롭다운 메뉴 링크　-->
		<a　class="dropdown-item" href="#">동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">다른 동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">여기에 무엇인가</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">분리된 링크</a>
	　　</div>
	</div>
<br><br><br>
	<!--　스플릿 드롭레프트 버튼　-->
	<div　class="btn-그룹 드롭레프트">
	　　<button　type="button"　class="btn　btn-secondary">
		스플릿 드롭레프트
	　　</button>
	　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">드롭레프트 전환</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　드롭다운 메뉴 링크　-->
		<a　class="dropdown-item" href="#">동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">다른 동작</a>
　　　　　　　　<a　class="dropdown-item" href="#">여기에 무엇인가</a>
　　　　　　　　<div　class="dropdown-divider></div>
　　　　　　　　<a　class="dropdown-item" href="#">분리된 링크</a>
	　　</div>
	</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

버튼에 드롭다운 메뉴 설정

버튼에 드롭다운 메뉴를 추가할 수 있습니다：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>버튼의 드롭다운 메뉴</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">一级</button>
　　　　<button　type="button"　class="btn　btn-primary 드롭다운-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　</div>
　　</div>
　　
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-secondary">二级</button>
　　　　<button　type="button"　class="btn　btn-secondary 드롭다운-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-success">성공</button>
　　　　<button　type="button"　class="btn　btn-success 드롭다운-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-info">정보</button>
　　　　<button　type="button"　class="btn　btn-info　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-warning">경고</button>
　　　　<button　type="button"　class="btn　btn-warning　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-danger">위험</button>
　　　　<button　type="button"　class="btn　btn-danger　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">링크　1</a>
　　　　　　<a　class="dropdown-item"　href="#">링크　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
테스트를 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

Bootstrap4 접기Bootstrap4 카드