Twitter bootstrap 3 dropdown toggle类在dropdown中有什么用途

Twitter bootstrap 3 dropdown toggle类在dropdown中有什么用途,twitter-bootstrap-3,Twitter Bootstrap 3,请帮助我理解“下拉切换”类在下拉列表中的用法。在下面的代码中,我删除了“下拉切换”类。如果没有这个,下拉菜单也可以正常工作。那么这个类有什么用呢 <div class="container-fluid"> <h1>Hello, world!</h1> <div class="dropdown"> <button type="button" class="btn btn-info" data-toggle="dropdo

请帮助我理解“下拉切换”类在下拉列表中的用法。在下面的代码中,我删除了“下拉切换”类。如果没有这个,下拉菜单也可以正常工作。那么这个类有什么用呢

<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>

你好,世界!
菜单
  • 项目-1
  • 项目-1
  • 项目-1
  • 项目-1

使用
下拉开关
类添加
大纲:0在<代码>上:将焦点集中在按钮上,因此当您单击按钮时,它将不会有“活动”元素周围的蓝色边框

请看下面的示例:

<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>

下拉菜单
.divider类用于用细横线分隔下拉菜单内的链接:

教程-无边框
下拉菜单 .divider类用于用细横线分隔下拉菜单内的链接:

教程-带边框