부트스트랩 드롭다운 메뉴


이 장에서는 Bootstrap 드롭다운 메뉴에 중점을 둡니다. 드롭다운 메뉴는 전환 가능하며 링크를 목록 형식으로 표시하는 상황에 맞는 메뉴입니다. 이는 Dropdown JavaScript 플러그인과 상호작용하여 달성됩니다.

다음 메뉴를 사용해야 하는 경우 클래스 .dropdown에 드롭다운 메뉴만 추가하면 됩니다. 아래 예는 기본 드롭다운 메뉴를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
   <title>부트스트랩 实例 - 下拉菜单(드롭다운)</title>
  <link href="http://libs.baidu .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min .js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>< /head>
<body>

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown" >
      主题
      <span class="caret"></span>
   </button>
         <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li 역할 ="presentation">
         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
      </li>
      <li role="presentation" >
        <a role="menuitem" tabindex="-1" href="#">
           数据通信/网络
        </a>
      </li>
      <li role="프레젠테이션" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分离的链接< /a>
</li>
</ul>
</div>


</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

인스턴스 실행 중»

"실행"을 클릭하세요. "예제" 버튼을 누르면 온라인 예시를 볼 수 있습니다

Options

Alignment

클래스 .pull-right.dropdown-menu에 추가하여 드롭다운 메뉴를 바로 정렬하세요. 다음 예에서는 이를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向右对齐下拉菜单</title>
   <link href="http://libs. 바이두 .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min .js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>< /head>
<body>

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown" >主题
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-right" role="menu" 
      aria-labelledby=" dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      < ;li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
      </li>
      <li role= "프레젠테이션">
         <a role="menuitem" tabindex="-1" href="#">
           数据communica/网络
        </a>
      </li>
      <li 역할= "presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>


</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向右对齐下拉菜单</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu" 
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>


</body>
</html>

인스턴스 실행 중»

"실행"을 클릭하세요. "예제" 버튼을 누르면 온라인 예시를 볼 수 있습니다

Header

클래스 dropdown-header를 사용하여 드롭다운 메뉴의 라벨 영역에 헤더를 추가할 수 있습니다. 다음 예에서는 이를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 下拉菜单标题</title>
   <link href="http://libs.baidu.com /bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js "></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head> ;
<body>

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown"> ㅋㅋㅋ <li role="presentation" class="dropdown-header">下拉菜单标题</li>
      <li role="presentation" >
         <a role="menuitem" tabindex="-1 " href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#" >数据挖掘</a>
      </li>
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">
            数据통信/网络
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation" class="dropdown-header">下拉菜单标题</li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>


</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单标题</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">下拉菜单标题</li>
		<li role="presentation" >
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				数据通信/网络
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">下拉菜单标题</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

인스턴스 실행 중»

"실행"을 클릭하세요. "예제" 버튼을 누르면 온라인 예시를 볼 수 있습니다