首页 > 其他 > 详细

Bootstrap中下拉菜单的用法

时间:2015-08-16 01:58:17      阅读:222      评论:0      收藏:0      [点我收藏+]

<div class="dropdown">

<button type="button" class="btn btn-toggle"  id="dropdownmenu1" data-toggle="dropdown">编程语言</button>//下来按钮

<span class="caret"></span>//小三角图片

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownmenu1">

        //pull-right即显示的下来菜单靠右。默认是pull-left靠左位于下拉按钮下见图示

        //aria-labelledby用于提示屏幕阅读器显示对应的作用id

<li  role="presentation"><a class="menuitem" tabindex="-1" href="#">Java</li>

// tabindex="-1"  即切换tab键时不显示,如值为1,2,3的话恰换tab键时按小到大显示即1,2,3。。。。

<li role="presentation"><a class="menuitem" tabindex="1"   href="#">c#</a></li> 

<li role="presentation class="divider"></li> //分割线

<li role="presentation" class="dropdown-header">基础语言</li>//下拉标题

<li role="presentation"><a class="menuitem" tabindex="2" href="#">C</li>

</ul>

</div>

通过把<div class="dropdown">中的dropdown换成dropup即变成上拉

效果图如下:

技术分享技术分享

Bootstrap中下拉菜单的用法

原文:http://www.cnblogs.com/professional-NET/p/4733467.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!