bootstrap笔记（八）——表单样式和下拉菜单
在这里插入图片描述
<div class="container">
<!--字体图标-->
<span class="glyphicon glyphicon-tint"></span>
<span class="glyphicon glyphicon-music"></span>
<!--三角图标-->
<span class="caret"></span>
</div>
在这里插入图片描述
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--支持移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<!--下拉菜单 按钮+无序列表来实现，但这些内容都应该放置了个div里面-->
<div class="dropdown">
<!--按钮-->
<button class="btn btn-success" data-toggle="dropdown">PHP基础课程班
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">基础班</li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Bootstrap</a></li>
<!--<li class="dropdown-header">就业班</li>-->
<li class="divider"></li>
<!--li*4>a-->
<li><a href="#">PHP</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">jQuery</a></li>
<li class="disabled"><a href="#">java</a></li>
</ul>
</div>
</div>
</body>
</html>
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/11/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
