Detaillierte Erläuterung der Fähigkeiten der Bootstrap-Schaltfläche im Dropdown-Menü „component

Die Schaltflächengruppe ist ebenso wie die Dropdown-Menükomponente eine unabhängige Komponente, um ordnungsgemäß zu funktionieren.

Kombinieren Sie eine Gruppe von

zu einer

<div class="btn-toolbar" role="toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">9</button>
 </div>
 </div>

Nach dem Login kopieren

Schaltflächen-Dropdown-Menüs ähneln grundsätzlich dem Aussehen von Dropdown-Menüs. Der einzige Unterschied zwischen ihnen besteht darin, dass der äußere Container div.dropdown durch div.btn-group

ersetzt wird

<div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  按钮下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  <li><a href="#">菜单列表1</a></li>
  <li><a href="#">菜单列表2</a></li>
  <li><a href="#">菜单列表3</a></li>
  <li><a href="#">菜单列表4</a></li>
  <li><a href="#">菜单列表5</a></li>
 </ul>
 </div>

Nach dem Login kopieren

bootstrap.css-Datei

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
  box-shadow: none;
}

Nach dem Login kopieren

Nach unten gerichtetes Dreieck der Schaltfläche

Das nach unten gerichtete Dreieck der Schaltfläche wird durch Hinzufügen eines Span-Tag-Elements zum Schaltflächen-Tag erstellt. Der Klassenname lautet .caret

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 按钮下拉菜单
 <span class="caret"></span>
</button>

Nach dem Login kopieren

Diese Dreiecksform wird über CSS implementiert. Das Folgende ist der Bootstrap.css-Quellcode:

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Etiketten：

bootstrap 下拉按钮菜单

Quelle：php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Bootstrap-Schaltflächengruppe und der Dropdown-Button_Javascript-Fähigkeiten der JS-Komponente Nächster Artikel：Ajax-Cross-Domain-Call-Webservice-Implementierungscode_Javascript-Kenntnisse

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors