HT Bootstrap - Bootstrap起点 - bootstrap介绍
bootstrap实现下拉菜单效果
效果体验:
https://hovertree.com/front/bootstrap/1/

本下拉菜单使用bootstrap和jquery实现,点击按钮会弹出下拉菜单。该菜单可以有分割横线。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap下拉菜单(Dropdowns)实例 -何问起</title>
<link rel="stylesheet" href="https://hovertree.com/front/bootstrap/inc/bootstrap.min.css">
<script src="https://hovertree.com/front/bootstrap/inc/jquery.js"></script>
<script src="https://hovertree.com/front/bootstrap/inc/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="https://hovertree.com/course/csharpdotnet/">C#.NET</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="https://hovertree.com/course/htwebfront/">Web前端特效</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="https://hovertree.com/tiku/css/">CSS题库</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="https://hovertree.com/hovertreeurlbox/">何问起网址箱</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="https://hovertree.com/h/bjag/2693y6sd.htm">说明</a>
</li>

</ul>
</div>

</body>
</html>
收藏 列表

评论:

何问起键盘