Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實例
本文實例講述了Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法。分享給大家供大家參考,具體如下:
下拉菜單
菜單: ,dropdown(.dropup改變這個是上顯示) data-toggle="dropdown" (激活文本處) .dropdown-menu .pull-left .pull-right
按鈕組:.btn-group(各種類為btn的標(biāo)簽集合) .btn-toolbar(按鈕導(dǎo)航條) .btn-group-vertical .btn-mini .btn-small .btn-large .nav-pills(膠囊樣式)
導(dǎo)航: .nav .nav-tabs .pull-right .disabled .nav-stacked(堆疊) .nav-list data-toggle="tab" .tabbable(容器) .tabs-left (right , below) .tab-content
注意: .dropdown-submenu(多級導(dǎo)航中,可能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有效
實現(xiàn)菜單樣式:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標(biāo)題文檔</title> <script type="text/javascript" src="bootstrap-3.3.6/js/jquery.cyan1.js"></script> <script type="text/javascript" src="bootstrap-3.3.6/js/dropdown.js"></script> <link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css" rel="external nofollow" /> <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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-large" data-toggle="dropdown">cyan111<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao1</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao2</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao3</a></li> </ul> </li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-large" data-toggle="dropdown">cyan222<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >gao1</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >gao2</a></li> <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >gao3</a> <ul class="dropdown-menu pull-right"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao1</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao2</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao3</a></li> </ul> </li> </ul> </li> </ul> <div class="dropup"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-large" data-toggle="dropdown">cyan333<i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >chao1</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >chao2</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >chao3</a></li> </ul> </div> </body> </html>
結(jié)果:
PS:關(guān)于bootstrap布局,這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用:
在線bootstrap可視化布局編輯工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述對大家基于bootstrap的程序設(shè)計有所幫助。
相關(guān)文章
關(guān)于Vue中postcss-pxtorem的使用詳解
在Web開發(fā)領(lǐng)域,響應(yīng)式設(shè)計已經(jīng)成為一個不可或缺的趨勢,PostCSS插件——postcss-pxtorem的出現(xiàn)為我們提供了一種更加智能和高效的解決方案,本文將深入探討postcss-pxtorem的使用,包括其背后的原理、配置選項、實際應(yīng)用中的注意事項等方面,需要的朋友可以參考下2023-12-12如何通過vscode運行調(diào)試javascript代碼
這篇文章主要介紹了如何通過vscode運行調(diào)試javascript代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07uni-app h5端在jenkins構(gòu)建報錯解決
這篇文章主要為大家介紹了uni-app h5端在jenkins構(gòu)建報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06js 頁面?zhèn)鲄?shù)時 參數(shù)值含特殊字符的問題
解決方法就是利用js的escape函數(shù),這個函數(shù)在解決中文亂碼等方面應(yīng)用的比較廣泛。推薦使用。2009-12-12WebGame《逆轉(zhuǎn)裁判》完整版 代碼下載(1月24日更新)
WebGame《逆轉(zhuǎn)裁判》完整版 代碼下載(1月24日更新)...2007-01-01JavaScript內(nèi)置對象Math與String詳細介紹
這篇文章主要介紹了JavaScript內(nèi)置對象Math與String的介紹與使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08