Bootstrap CSS组件之下拉菜单(dropdown)
Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍
dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu
例子见下拉菜单.html
//源码 .dropup, .dropdown{ position:relative; } .dropdown-toggle:focus{ outline:0; } .dropdown-menu{ position:absolute; top:100%; left:0; z-index:1000; display:none; float:left; min-width:160px; padding:5px0; margin:2px00; font-size:14px; text-align:left; list-style:none; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1pxsolid#ccc; border:1pxsolidrgba(0,0,0,.15); border-radius:4px; -webkit-box-shadow:06px12pxrgba(0,0,0,.175); box-shadow:06px12pxrgba(0,0,0,.175); } .dropdown-menu.pull-right{ right:0; left:auto; } .dropdown-menu.divider{ height:1px; margin:9px0; overflow:hidden; background-color:#e5e5e5; } .dropdown-header{ display:block; padding:3px20px; font-size:12px; line-height:1.42857143; color:#777; white-space:nowrap; }
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <!--Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨--> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>Bootstrap101Template</title> <!--Bootstrap--> <linkhref="bootstrap-3.3.7-dist/css/bootstrap.min.css"rel="stylesheet"> </head> <body> <!----> <divclass="btn-group"> <buttontype="button"class="btnbtn-defaultdropdown-toggle"data-toggle="dropdown"> 我的书籍<spanclass="caret"></span> </button> <ulclass="dropdown-menu"> <li><ahref="#">编程</a></li> <li><ahref="#">设计</a></li> <li><ahref="#">深入</a></li> </ul> </div> <!--dropdown/dropdown-menu/dropdown-header--> <divclass="dropdown"> <buttontype="button"class="btnbtn-defaultdropdown-toggle"data-toggle="dropdown"> 我的书籍<spanclass="caret"></span> </button> <ulclass="dropdown-menu"> <liclass="dropdown-header">前端</a></li> <li><ahref="#">JS</a></li> <li><ahref="#">HTML</a></li> <li><ahref="#">CSS</a></li> <liclass="divider"></li> <liclass="dropdown-header">后台</li> <li><ahref="#">PYTHON</a></li> <li><ahref="#">JAVA</a></li> </ul> </div> <!--bootstrap是基于jQuery--> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。