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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。