bootstrap-按钮下拉菜单

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

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

1.运行效果如图所示

wKiom1klPKGh8gRbAAAg9x1p0iM566.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="btn-group">
??????????<button?class="btn?btn-default?dropdown-toggle"?data-toggle="dropdown"?
??????????type="button">按钮下拉菜单<span?class="caret"></span></button>
????????<ul?class="dropdown-menu">
????????????<li><a?href="##">按钮下拉菜单项</a></li>
????????????<li><a?href="##">按钮下拉菜单项</a></li>
????????????<li><a?href="##">按钮下拉菜单项</a></li>
????????????<li><a?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>

（编辑：李大同）

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