Bootstrap 元件-下拉選單
阿新 • • 發佈：2019-02-12
- 下拉選單
選單div
下拉按鈕，id用來給下拉選單指向用的<div class="dropdown">
選單列表，aria-labelledby="dropdownMenu1" 就是用來指向哪個選單，因為有可能有多個選單<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
選單項<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li><a href="#">HTML</a></li><!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div> - 標題不可點選
標題不可點選<li role="presentation" class="dropdown-header">Dropdown header</li><!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"> 靜態頁面(不可點選) </li> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li class="dropdown-header"> 動態頁面(不可點選) </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div> - 分割線
選單分割線<li role="presentation" class="divider"></li><!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"> 靜態頁面 </li> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation" class="divider"></li> <li class="dropdown-header"> 動態頁面 </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div> - 禁用項
禁用的選單項<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(開發中)</a></li><!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"> 靜態頁面 </li> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation" class="divider"></li> <li class="dropdown-header"> 動態頁面 </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(開發中)</a></li> </ul> </div> <div style="height:200px"></div>
