Schaltflächen und Dropdown-Menüs für Studiennotizen in Bootstrap 3.0

Schaltflächen und Dropdown-Menüs für Studiennotizen in Bootstrap 3.0

Der vorherige Artikel war eine einfache Überprüfung des Bootstrap-CSS-Teils und viele Details wurden übersehen. Ich habe jedoch den Großteil des Inhalts durchgesehen, ihn in Code umgesetzt und die tatsächliche Wirkung gesehen. Ziemlich gut. In den nächsten Artikeln werden dann hauptsächlich die Komponenten von Bootstrap erläutert. Dann erklärt dieser Artikel hauptsächlich die folgenden Inhalte

1. Dropdown-Menü

2. Schaltflächengruppe

3. Dropdown-Menü der Schaltfläche

4. Zusammenfassung

Machen wir uns mit dem Code vertraut, um mit dem Erstellen einer Seite zu beginnen. Erstellen Sie zunächst eine neue Testwebseite und fügen Sie den folgenden Code hinzu


Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
<Titel>Bootstrap</Titel>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="bildschirm">
<!-- HTML5 Shim und Respond.js IE8-Unterstützung von HTML5-Elementen und Medienabfragen -->
<!-- WARNUNG: Respond.js funktioniert nicht, wenn Sie die Seite über file:// anzeigen --> <!--[if lt IE 9]>
<script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</Kopf>
<script src="js/jquery-2.0.3.min.js"></script> im <body>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Wenn Sie etwas nicht verstehen, habe ich es in meinem vorherigen Artikel vorgestellt. Sie können auf den Link klicken, um es anzuzeigen: http://www.cnblogs.com/aehyok/p/3398359.html

Dropdown-Menü

Ein umschaltbares Kontextmenü zum Anzeigen einer Liste von Links.

Fall

Umschließen Sie den Dropdown-Trigger und das Dropdown-Menü mit .dropdown und fügen Sie anschließend den HTML-Code hinzu, aus dem das Menü besteht.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="Dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown-Menü <span class="caret"></span>
</button>
<ul Klasse = "Dropdown-Menü" Rolle = "Menü" aria-labelledby = "DropdownMenü1">
<li role="Präsentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Eine weitere Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hier noch etwas</a></li>
<li role="Präsentation" class="Teiler"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Getrennter Link</a></li>
</ul>
</div>

Aus dem obigen Code können Sie erkennen, dass möglicherweise viele unbekannte Stilklassen oder Attribute vorhanden sind.

Ein Dropdown-Button und ein kleines Icon-Caret auf der rechten Seite. Natürlich befinden sich das kleine Icon und der Button-Text auf derselben Ebene.

Erstens gibt es in der Schaltfläche einen Dropdown-Umschalter und ein Datenumschaltattribut. Die Liste wird basierend auf diesem Attribut angezeigt.

Das Dropdown-Menü unmittelbar nach dem UL-Tag sollte in Verbindung mit der Stilklasse „Dropdown-Toggle“ der Schaltfläche darüber verwendet und dann über aria-labelledby an die Schaltfläche darüber gebunden werden.

Als nächstes gibt es im vierten Li-Tag einen Trenner, der eigentlich eine Trennlinienstilklasse ist.

So habe ich es wahrscheinlich verstanden, aber es ist definitiv kein vollständiges Verständnis.

Ausrichtungsoptionen

Fügen Sie dem Dropdown-Menü .dropdown-menu .text-right hinzu, um den Text rechtsbündig auszurichten.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="Dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown-Menü <span class="caret"></span>
</button>
<ul Klasse = "Dropdown-Menü Text rechts" Rolle = "Menü" aria-labelledby = "DropdownMenü1">
<li role="Präsentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Eine weitere Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hier noch etwas</a></li>
<li role="Präsentation" class="Teiler"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Getrennter Link</a></li>
</ul>
</div>

Fügen Sie dem ul-Tag im obigen Code einfach eine Text-Right-Klasse hinzu.

Titel

In jedem Dropdown-Menü können Sie eine Aktionsgruppe durch Hinzufügen eines Titels identifizieren.


Code kopieren
Der Code lautet wie folgt:

<h1>Dropdown-Menü</h1>
<div Klasse="Dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown-Menü <span class="caret"></span>
</button>
<ul Klasse = "Dropdown-Menü Text rechts" Rolle = "Menü" aria-labelledby = "DropdownMenü1">
<li role="presentation" class="dropdown-header">Dropdown-Überschrift</li>
<li role="Präsentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Eine weitere Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Hier noch etwas</a></li>
<li role="Präsentation" class="Teiler"></li>
<li role="presentation" class="dropdown-header">Dropdown-Überschrift</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Getrennter Link</a></li>
</ul>
</div>

Die Hauptsache besteht darin, einen <li role="presentation" class="dropdown-header">Dropdown-Header</li> hinzuzufügen, der eine .dropdown-header-Stilklasse hat.

Deaktivierte Menüelemente

Fügen Sie dem <li> im Dropdown-Menü .disabled hinzu, um den Link zu deaktivieren.

Modifizieren Sie den obigen Code weiter und ersetzen Sie den Code in der Zeile „Something else here“.


Code kopieren
Der Code lautet wie folgt:
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Hier noch etwas</a></li>

Die Hauptsache besteht darin, dem Li-Tag die Stilklasse .disabled hinzuzufügen.

Sie können den Effekt nach dem Ausführen überprüfen. Tatsächlich ähnelt der Effekt dem obigen Titelstil. Wenn Sie darauf klicken, wird ein deaktiviertes Symbol angezeigt. Das Bild kann nicht aufgenommen werden.

Schaltflächengruppe

Tooltips und Popups in Schaltflächengruppen erfordern eine spezielle Einrichtung

Beim Anwenden von Tooltips oder Popovers auf Elemente innerhalb einer .btn-Gruppe müssen Sie die Containeroption „body“ angeben, um unerwünschte Nebeneffekte zu vermeiden (z. B. eine Verbreiterung des Seitenelements und/oder den Verlust der abgerundeten Ecken, wenn der Tooltip oder das Popover ausgelöst wird).

Basisgehäuse

Fügen Sie eine Reihe von .btn-Schaltflächen in eine .btn-Gruppe ein.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe">
<button type="button" class="btn btn-default">Links</button>
<button type="button" class="btn btn-default">Mitte</button>
<button type="button" class="btn btn-default">Rechts</button>
</div>

Über .btn-group können Sie eine Gruppe von Schaltflächen gruppieren und ihnen die Stilklasse btn hinzufügen

Schaltflächen-Symbolleiste

Kombinieren Sie eine Gruppe von <div class="btn-group"> zu einer <div class="btn-toolbar">, um eine komplexere Komponente zu erstellen.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-toolbar" Rolle="Werkzeugleiste">
<div Klasse="btn-Gruppe">
<button Typ="button" Klasse="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 Klasse="btn-Gruppe">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div Klasse="btn-Gruppe">
<button type="button" class="btn btn-default">9</button>
</div>
</div>

Größe

Fügen Sie einfach .btn-group-* zur .btn-Gruppe hinzu, anstatt Größenklassen auf jede Schaltfläche in der Gruppe anzuwenden.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe btn-Gruppe-lg">
<button Typ="button" Klasse="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 Klasse="btn-Gruppe btn-Gruppe-sm">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div Klasse="btn-Gruppe btn-Gruppe-xs">
<button type="button" class="btn btn-default">9</button>
</div>

Verschachtelung

Um ein Dropdown-Menü in eine Reihe von Schaltflächen zu integrieren, platzieren Sie eine .btn-Gruppe in einer anderen .btn-Gruppe.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe">
<button Typ="button" Klasse="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button></p> <p> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown-Menü <span class="caret"></span>
</button>
<ul Klasse="Dropdown-Menü">
<li><a href="#">Dropdown-Link</a></li>
<li><a href="#">Dropdown-Link</a></li>
</ul>
</div>
</div>

Vertikale Anordnung

Lassen Sie eine Gruppe von Schaltflächen vertikal statt horizontal anzeigen.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe btn-Gruppe-vertikal">
<a href="#">
<button Typ="button" Klasse="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>

</a>
<div Klasse="btn-Gruppe">
<a href="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
</a>
<ul Klasse="Dropdown-Menü">
<li><a href="#">Dropdown-Link</a></li>
<li><a href="#">Dropdown-Link</a></li>
</ul>
</div>
</div>
</div>

Blocksatz-Linkanordnung

Dehnt eine Gruppe von Schaltflächen auf die gleiche Größe aus, sodass sie der Breite des übergeordneten Elements entsprechen.

Verwendung spezifischer Elemente

Dies funktioniert nur bei <a>-Elementen, da diese Stile nicht auf <button> angewendet werden können.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe btn-Gruppe-gerechtfertigt">
<button type="button" class="btn btn-default">Links</button>
<button type="button" class="btn btn-default">Mitte</button>
<button type="button" class="btn btn-default">Rechts</button>
</div>

Dropdown-Menü für Schaltflächen

Sie können jede Schaltfläche zu einem Dropdown-Menüauslöser machen, indem Sie sie in eine .btn-Gruppe einfügen und die richtige Menümarkierung hinzufügen.

Dropdown-Menü mit einer Schaltfläche

Durch Ändern einiger grundlegender Markierungen können Sie eine Schaltfläche in einen Dropdown-Menüschalter verwandeln.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Aktion <span class="caret"></span>
</button>
<ul Klasse="Dropdown-Menü" Rolle="Menü">
<li><a href="#">Aktion</a></li>
<li><a href="#">Eine weitere Aktion</a></li>
<li><a href="#">Etwas anderes hier</a></li>
<li class="divider"></li>
<li><a href="#">Getrennter Link</a></li>
</ul>
</div>

Dropdown-Menü mit geteilter Schaltfläche

Ebenso erfordert ein Dropdown-Menü mit geteilter Schaltfläche die gleiche Änderungsmarkierung, jedoch mit einer zusätzlichen geteilten Schaltfläche.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe">
<button type="button" class="btn btn-danger">Aktion</button>
<div Klasse="Dropdown">
<button Typ="button" Klasse="btn btn-danger Dropdown-Umschalter" Daten-Umschalter="Dropdown">
<span class="caret"></span>
<span class="sr-only">Dropdown umschalten</span>
</button>
<ul Klasse="Dropdown-Menü" Rolle="Menü">
<li><a href="#">Aktion</a></li>
<li><a href="#">Eine weitere Aktion</a></li>
<li><a href="#">Etwas anderes hier</a></li>
<li class="divider"></li>
<li><a href="#">Getrennter Link</a></li>
</ul>
</div>
</div>


Sie können nur auf das kleine Symbol klicken, um das Dropdown-Menü anzuzeigen.

Größe

Für Schaltflächen aller Größen stehen Dropdown-Menüschaltflächen zur Verfügung.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-Gruppe">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Großer Knopf <span class="caret"></span>
</button>
<ul Klasse="Dropdown-Menü"> ... </ul>
</div>
<!-- Kleine Schaltflächengruppe -->
<div Klasse="btn-Gruppe">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Kleiner Knopf <span class="caret"></span>
</button>
<ul Klasse="Dropdown-Menü"> ... </ul>
</div>
<!-- Extra kleine Schaltflächengruppe -->
<div Klasse="btn-Gruppe">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra kleiner Knopf <span class="caret"></span>
</button>
<ul Klasse="Dropdown-Menü"> ... </ul>
</div>

Verwenden Sie die Stilklassen .btn-lg, .btn-sm und .btn-xs, um die Größe der Schaltfläche zu steuern.

Popup-Menü

Das Hinzufügen von .dropup zu einem übergeordneten Element löst das Dropdown-Menü über dem Element aus.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button Typ="button" Klasse="btn btn-default Dropdown-Umschalter" Daten-Umschalter="Dropdown">
<span class="caret"></span>
<span class="sr-only">Dropdown umschalten</span>
</button>
<ul Klasse="Dropdown-Menü">
<!-- Dropdown-Menü-Links -->
</ul>
</div>

Zusammenfassen

In diesem Artikel werden hauptsächlich Schaltflächen und Dropdown-Menüs und dann die Kombination von Schaltflächen und Dropdown-Menüs untersucht. Es gibt ziemlich viele Variationen und die Stile sind gut, aber es ist immer noch nicht so bequem, damit anzufangen, weil die Einführung hier nicht so ausführlich ist und es immer noch ein bisschen schwierig zu lernen ist. Aber das macht nichts. Üben Sie einfach mehr, und Sie werden es langsam verstehen.

<<:  CSS erzielt den Effekt, mehrere Elemente an beiden Enden in einer Box auszurichten

>>:  Einführung in die Stapelverarbeitung von virtuellen Netzwerkkarten unter CentOS 7.6

Artikel empfehlen

Detaillierte Erklärung der Methode getBoundingClientRect() in js

1. getBoundingClientRect() Analyse Die Methode ge...

Analyse der Protokolldateien im Tomcat-Protokollverzeichnis (Zusammenfassung)

Bei jedem Start von Tomcat werden die folgenden P...

Lösung für Nginx-Installationsfehler

1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...

Verwendung des Node.js-HTTP-Moduls

Inhaltsverzeichnis Vorwort HTTP HTTP-Server Datei...

Javascript-Betriebsmechanismus „Event Loop“

Inhaltsverzeichnis 1. Vier Konzepte 1. JavaScript...

Vue-Anfängerhandbuch: Umgebungserstellung und Erste Schritte

Inhaltsverzeichnis Erster Blick Erstellen einer V...

Detaillierte Erläuterung der Installation und Konfiguration des Redis- und phpredis-Erweiterungsvorgangs im Ubuntu 18.04-System

Dieser Artikel beschreibt, wie man Redis- und php...

Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen

Durchführung regelmäßiger Backups von Mysql-Daten...

Detailliertes Tutorial zur Installation und Bereitstellung von Nginx Linux

1. Einführung in Nginx Nginx ist ein Webserver, d...

So leiten Sie eine URL mit Nginx Rewrite um

Ich muss in letzter Zeit bei der Arbeit oft die N...

Canvas zeichnet Rubbellos-Effekt

In diesem Artikel wird der spezifische Code zum Z...

Zusammenfassung der MySQL InnoDB-Architektur

Inhaltsverzeichnis Einführung 1. Gesamtarchitektu...

So lesen Sie die regionalen Informationen einer IP mithilfe des Nginx- und GeoIP-Moduls

Installieren Sie GeoIP unter Linux yum installier...

jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation

Ich habe eine Navigationsleiste mit einem erweite...

Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)

Heute werde ich aufzeichnen, wie man MySQL 8.0.18...