Bootstrap元件---下拉選單，多級選單 ,按鈕
阿新 • • 發佈：2019-02-17
下拉選單
選單： ,dropdown（.dropup改變這個是上顯示） data-toggle="dropdown" (啟用文字處) .dropdown-menu .pull-left .pull-right
按鈕組：.btn-group(各種類為btn的標籤集合) .btn-toolbar（按鈕導航條） .btn-group-vertical .btn-mini .btn-small .btn-large .nav-pills（膠囊樣式）
導航： .nav .nav-tabs .pull-right .disabled .nav-stacked（堆疊） .nav-list data-toggle="tab" .tabbable(容器) .tabs-left (right , below) .tab-content
注意： .dropdown-submenu(多級導航中，可能bootstrap中沒有)自行新增：
<style type="text/css"> .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } </style>
新增這段css即可使.dropdown-submenu有效結果：<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <script type="text/javascript" src="bootstrap-3.3.6/js/jquery.cyan1.js"></script><span style="color:#ff0000;">jquery庫檔案</span> <script type="text/javascript" src="bootstrap-3.3.6/js/<span style="color:#ff0000;">dropdown.js</span>"></script> <link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css" /> <style type="text/css"> .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } </style> </head> <body> <ul class="nav nav-pills"> <li class="dropdown"> <a href="#" class="btn btn-large" data-toggle="dropdown">cyan111<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">qiao1</a></li> <li><a href="#">qiao2</a></li> <li><a href="#">qiao3</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="btn btn-large" data-toggle="dropdown">cyan222<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">gao1</a></li> <li><a href="#">gao2</a></li> <li class="dropdown-submenu"> <a href="#">gao3</a> <ul class="dropdown-menu pull-right"> <li><a href="#">qiao1</a></li> <li><a href="#">qiao2</a></li> <li><a href="#">qiao3</a></li> </ul> </li> </ul> </li> </ul> <div class="dropup"> <a href="#" class="btn btn-large" data-toggle="dropdown">cyan333<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">chao1</a></li> <li><a href="#">chao2</a></li> <li><a href="#">chao3</a></li> </ul> </div> </body> </html>
