bootstrap-下拉菜单（菜单标题）

发布时间：2020-12-17 20:55:03 所属栏目：安全来源：网络整理

导读：1.运行效果如图所示 2.实现代码如下 !DOCTYPE?htmlhtmlhead????meta?charset="utf-8"????meta?http-equiv="X-UA-Compatible"?content="IE=edge"????title表单控件――下拉菜单（菜单标题）/title????!--?最新版本的?Bootstrap?核心?CSS?文件?--????link?rel=

1.运行效果如图所示

wKioL1klMC3hkR4nAAAufYYO2QQ253.png-wh_50

2.实现代码如下

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<title>表单控件――下拉菜单（菜单标题）</title>
????<!--?最新版本的?Bootstrap?核心?CSS?文件?-->
????<link?rel="stylesheet"?href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"?
????integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"?
????crossorigin="anonymous">

????<!--?可选的?Bootstrap?主题文件（一般不用引入）?-->
????<link?rel="stylesheet"?
????href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"?
????integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"?
????crossorigin="anonymous">
</head>
<body>
????<div?class="dropdown">
??????????<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?
??????????data-toggle="dropdown">
????????下拉菜单
????????????<span?class="caret"></span>
??????????</button>
????????<ul?class="dropdown-menu"?role="menu"?aria-labelledby="dropdownMenu1">
????????????<li?role="presentation"?class="dropdown-header">第一部分菜单头部</li>
????????????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜单项</a></li>
????????????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜单项</a></li>
????????????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜单项</a></li>
????????????<li?role="presentation"?class="divider"></li>
????????????<li?role="presentation"?class="dropdown-header">第二部分菜单头部</li>
????????????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜单项</a></li>
????????????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜单项</a></li>
????????????<li?role="presentation"><a?role="menuitem"?tabindex="-1"?href="#">下拉菜单项</a></li>
????????</ul>
????</div>???


????<script?src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
????<!--?最新的?Bootstrap?核心?JavaScript?文件?-->
????<script?src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"?
????integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"?
????crossorigin="anonymous"></script>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!