Menu lungsur Bootstrap
Bab ini akan memfokuskan pada menu lungsur Bootstrap. Menu lungsur turun boleh togol dan merupakan menu konteks yang memaparkan pautan dalam format senarai. Ini dicapai dengan berinteraksi dengan pemalam JavaScript Dropdown .
Untuk menggunakan menu berikut, cuma tambah menu lungsur turun dalam kelas .dropdown. Contoh berikut menunjukkan menu lungsur asas:
<!DOCTYPE html>
<html>
<kepala>
<tajuk>Bootstrap 实例 - 下拉菜<turun tajuk> < ;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="gt";>&pan class="gt";>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role=" <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
;
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络
; ; ; >
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>
<html>
<kepala>
<tajuk>Bootstrap 实例 - 下拉菜<turun tajuk> < ;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="gt";>&pan class="gt";>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="
</li>
;
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络
; ; ; >
<li role="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 实例 - 下拉菜单（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>
Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Pilihan
Jajarkan
Jajarkan menu lungsur turun ke kanan dengan menambahkan kelas .tarik-kanan ke .menu lungsur turun. Contoh berikut menunjukkan ini:
<!DOCTYPE html>
<html>
<kepala>
<tajuk>Bootstrap 实例 - 向右对齐<gt; > < ;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>
<ul class="dropdown-menu pull-right" role="menu"
aria-labelledby="dropdownMenu1">
<li t="presentation" ;
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentasi"< ;
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li><🎜 >& lt ; ">
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络<🎜<> & ; & lt ; </li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>
<html>
<kepala>
<tajuk>Bootstrap 实例 - 向右对齐<gt; > < ;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>
<ul class="dropdown-menu pull-right" role="menu"
aria-labelledby="dropdownMenu1">
<li t="presentation" ;
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentasi"< ;
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li><🎜 >& lt ; ">
<a role="menuitem" tabindex="-1" href="#">
数据通信/网络<🎜<> & ; & lt ; </li>
<li role="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>
Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Pengepala
Anda boleh menggunakan kelas pengepala lungsur untuk menambah pengepala pada kawasan label menu lungsur. Contoh berikut menunjukkan ini:
<!DOCTYPE html>
<html>
<kepala>
<tajuk>Bootstrap 实例 - 下拉菜单<tajuk< ;pautan 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>
<badan>
<div class="dropdown">
<button type="button " class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"<span class="caret">< > </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; /a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href;="#"据据</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="#" gref="#"
数据通信/网络
</a>
</li>
" ;/vidation t;
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>
<html>
<kepala>
<tajuk>Bootstrap 实例 - 下拉菜单<tajuk< ;pautan 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>
<badan>
<div class="dropdown">
<button type="button " class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"<span class="caret">< > </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; /a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href;="#"据据</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="#" gref="#"
数据通信/网络
</a>
</li>
" ;/vidation t;
<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>
Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
