Bootstrap入门组件2：下拉菜单
Posted DL_dl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
效果
2.有时候我们希望分类放，那就需要一条线来分割，新添加
<li role="presentation" class="divider"></li>
效果：（可能看的不清楚，可以先尝试）
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>
效果为：
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>
效果为：
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>
效果为，禁用内容显示淡灰色，鼠标移动上去显示一个禁止的符号
以上是关于Bootstrap入门组件2：下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
React-Bootstrap 的下拉菜单组件上的自定义样式