首页 > 网站 > WEB开发 > 正文

16.下拉菜单的样式

2024-04-27 15:10:43
字体:
来源:转载
供稿:网友
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="CSS/bootstrap.css" /></head><body> <div class="container" style="margin-top:5px"> <div class="row"> <div class="col-lg-4"> <div class="dropdown"> <!--在dropdown后面加上open使下拉列表默认展开;而pull-right使其右浮动并右对齐,改为dropup使箭头朝上并向上展开--> <button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">学院课程 <span class="caret"></span></button><!--btn-block使按钮撑满整个父级--> <ul class="dropdown-menu"> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">less</a></li> <li><a href="#">bootstrap</a></li> </ul> </div> </div> <div class="col-lg-4"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">学院课程 <span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-header"><a href="#">前端</a></li><!--dropdown-header是菜单里的标题,给li添加--> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">less</a></li> <li><a href="#">bootstrap</a></li> <li class="divider"><a href="#">html</a></li><!--divider是分隔线,给li添加--> <li class="dropdown-header text-center"><a href="#">后端</a></li><!--text-center让内容居中--> <li><a href="#">php</a></li> <li><a href="#">java</a></li> <li class="disabled"><a href="#">.net</a></li><!--disabled使菜单不可选--> </ul> </div> </div> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

这里写图片描述


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表