引导下拉菜单中下拉切换类的目的是什么? [英] What's the purpose of dropdown-toggle class in bootstrap dropdowns?

问题描述

无论是否将 dropdown-toggle 引导类应用到 元素，下拉菜单都可以完美运行，那么为什么首先要使用它?>

解决方案

dropdown-toggle 类在 :focus 上添加了 outline: 0;code> 到按钮，所以当你点击按钮时，它不会有活动"元素的周围蓝色​​边框.

检查接下来的两个按钮:

<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="容器"><h2>下拉菜单</h2><p>.divider 类用于使用细水平线分隔下拉菜单内的链接:</p><div class="下拉"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">教程-无边框<span class="caret"></span></button><ul class="下拉菜单"><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="#">关于我们</a></li>

<div class="容器"><h2>下拉菜单</h2><p>.divider 类用于使用细水平线分隔下拉菜单内的链接:</p><div class="下拉"><button class="btn btn-default" type="button" data-toggle="dropdown">教程-带边框<span class="caret"></span></button><ul class="下拉菜单"><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="#">关于我们</a></li>

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?

解决方案

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.

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>

这篇关于引导下拉菜单中下拉切换类的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！