700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Bootstrap3 下拉菜单(Dropdown)

Bootstrap3 下拉菜单(Dropdown)

时间:2021-12-20 05:24:50

相关推荐

Bootstrap3  下拉菜单(Dropdown)

下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。

文档:/bootstrap/bootstrap-dropdowns.html

使用下拉菜单,只需要在 class.dropdown内加上下拉菜单即可。

效果图:

源代码:

必须加入bootstrap样式,主题,JS和jquery!

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" /><!--必须在bootstrap.js之前,否则无效果!--><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script><style type="text/css">body {padding: 10px;}</style>

<div class="dropdown"><!--data-toggle="dropdown" 默认是隐藏哦,自动的触发事件下拉;--><a href="#" class="btn btn-lg btn-success" data-toggle="dropdown">下拉菜单<i class="caret"></i></a><ul class="dropdown-menu"><li><a href="#">aaa</a></li><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div><p></p><!--<p>可以是超链接或按钮</p>--><div class="dropdown"><a href="#" data-toggle="dropdown">请激活下拉列表</a><ul class="dropdown-menu"><!--<ul class="dropdown-menu pull-right">--><li class="dropdown-header">姓名1</li><li><a href="#">mike</a></li><li class="disabled"><a href="#" >john禁用</a></li><!--分割线--><li class="divider"></li><li class="dropdown-header">姓名2</li><li ><a href="#">back</a></li></ul></div>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。