twitter-bootstrap 引导下拉菜单中下拉切换类的目的是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41308134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the purpose of dropdown-toggle class in bootstrap dropdowns?
提问by MrShabana
Dropdown menus work perfectly with or without the dropdown-togglebootstrap class being applied to <button>element,so why use it in the first place?
无论是否将dropdown-toggle引导类应用于<button>元素，下拉菜单都可以完美运行，那么为什么首先要使用它呢？
回答by Dekel
The dropdown-toggleclass adds the outline: 0;on :focusto the button, so when you click on the button it will not have the surrounding blue border of the "active" element.
本dropdown-toggle类添加outline: 0;上:focus的按钮，所以当你点击按钮，它不会有“活动”元素的周围蓝色边框。
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>回答by Syden
It adds the following CSS properties, but they impact when dropdown button's content is displayed:
它添加了以下 CSS 属性，但它们会在显示下拉按钮的内容时产生影响：
It's basically some buttoninner box-shadowwhen .open, as well as color, background-color, border-colorand outline(on :focus) removal. Here a comparison between the two:
它基本上是一些button内box-shadow时.open，还有color，background-color，border-color和outline（上:focus）去除。下面是两者的比较：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
With .dropdown-toggle <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Without .dropdown-toggle <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>Difference tested in Chrome, Opera & Safari:
在 Chrome、Opera 和 Safari 中测试的差异：
