首页 > 代码库 > Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门（八）组件2：下拉菜单
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script><script src="bootstrap.min.js" type="text/javascript"></script>
下拉菜单，首先，在容器div中创建一个class为dropdown的div
<div class="dropdown"> ... </div>
1.为下拉菜单添加内容
点击的下拉菜单，触发器是一个按钮，而下拉菜单的详细内容有<ul><li> 标签的组合来完成
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div>
效果
.png)
2.有时候我们希望分类放，那就需要一条线来分割，新添加
<li role="presentation" class="divider"></li>
效果：（可能看的不清楚，可以先尝试）
.png)
3.下拉菜单的对齐
比如说希望按钮和按钮内容都在右边，可以在<div>和<button>的class添加一个pull-right 属性，在<ul>标签中的class添加一个 dropdown-menu-right属性。（在<button> 中添加pull-right 属性 是为了让按钮移动到右边，，在<ul>添加一个 dropdown-menu-right属性 是为了把内容移动到右边，而如果没有在<div>添加pull-right 属性 会使点击后，会出现内容遮挡住按钮的情况）
修改为：
<div class="dropdown pull-right"> <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown"> 右边显示 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
效果为：
.png)
4.给下拉菜单内容添加标题
当下拉菜单内容多了之后，希望添加标题对他进行说明或者引导，可以添加标题
新添加
<li role="presentation" class="dropdown-header">标题内容</li>
操作：
<div class="dropdown"> <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown"> 带标题显示 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">标题1</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="presentation" class="dropdown-header">标题2</li> <li><a href="#">Action2</a></li> <li><a href="#">Another action2</a></li> <li><a href="#">Something else here2</a></li> <li role="presentation" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
效果为：
.png)
5.部分下拉菜单不可用
只需要在需要禁用的内容添加disabled
<li class="disabled"><a href="#">内容</a></li>
操作：
<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" aria-labelledby="dropdownMenu1"> <li class="disabled"><a href="#">Action</a></li> <li class="disabled"><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
效果为，禁用内容显示淡灰色，鼠标移动上去显示一个禁止的符号
.png)
Bootstrap入门（八）组件2：下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。