引导程序下拉菜单中的dropdown-toggle类的目的是什么? [英] What's the purpose of dropdown-toggle class in bootstrap dropdowns?
本文介绍了引导程序下拉菜单中的dropdown-toggle类的目的是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在<button>
元素上应用或不应用dropdown-toggle
引导类的情况下,下拉菜单都可以完美地工作,那么为什么要首先使用它?
Dropdown menus work perfectly with or without the dropdown-toggle
bootstrap class being applied to <button>
element,so why use it in the first place?
推荐答案
dropdown-toggle
类将:focus
上的outline: 0;
添加到按钮上,因此当您单击按钮时,它将没有周围的蓝色边框活动"元素的内容.
The dropdown-toggle
class adds the outline: 0;
on :focus
to the button, so when you click on the button it will not have the surrounding blue border of the "active" element.
检查接下来的两个botton:
Check the next two bottons:
<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>
这篇关于引导程序下拉菜单中的dropdown-toggle类的目的是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文