twitter-bootstrap-3 - 下拉菜单中下拉切换类的用途是什么
问题描述
请帮助我了解下拉菜单中“下拉切换”类的使用。在下面的代码中,我删除了“下拉切换”类。没有这个下拉菜单也可以正常工作。那么这个类有什么用。
<div class="container-fluid">
<h1>Hello, world!</h1>
<div class="dropdown">
<button type="button" class="btn btn-info" data-toggle="dropdown">MENU</button>
<ul class="dropdown-menu">
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
</ul>
</div>
解决方案
该类dropdown-toggle
将outline: 0;
on添加:focus
到按钮上,因此当您单击该按钮时,它将没有“活动”元素的周围蓝色边框。
查看下面的示例:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials - no border
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown">Tutorials - with border
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
推荐阅读
- vue.js - 使用外部组件时出现 VueJS 错误
- python-2.7 - 如何在不发生无限循环的情况下从此 python 代码中消除偶数?
- mysql - Yii2 mysql 处理更大的数据
- linux - CentOS Apache 服务器正在 Chrome 浏览器中运行和访问网站
- postgresql - 如何限制只有 1 行在 postgres 中更新?
- fluent-ui - fluentui/react-northstar 版本升级是否向后兼容?
- python - 在 Python 中使用 Pandas,如果单词已经出现了 3 次,则删除数据框中的行
- r - plotly line graph r中的自动下拉菜单
- shell - dot 命令在不同的 shell 中的行为是否一致?
- node.js - Strapi Cron 任务未运行