Bootstrap muss jeden Tag Javascript-Fähigkeiten im Dropdown-Menü erlernen
WBOY
Freigeben： 2016-05-16 15:30:03
Original
1101 Leute haben es durchsucht
1. Dropdown-Menü (grundlegende Verwendung)
Freunde, bitte beachten Sie, dass die Dropdown-Menükomponente im Bootstrap-Framework eine unabhängige Komponente ist. Je nach Version ist die entsprechende Datei:
☑ LESS-Version: Die entsprechende Quellcodedatei ist dropdowns.less
☑ Sass-Version: Die entsprechende Quellcodedatei ist _dropdowns.sass
☑ Kompilierte Bootstrap-Version: Sehen Sie sich die Zeilen 3004 bis 3130 der Datei „bootstrap.css“ an
Wenn Sie das Dropdown-Menü des Bootstrap-Frameworks verwenden, müssen Sie die vom Bootstrap-Framework bereitgestellte Datei bootstrap.js aufrufen. Wenn Sie die unkompilierte Version verwenden, finden Sie natürlich eine Datei mit dem Namen „dropdown.js“ im js-Ordner. Sie können diese js-Datei auch aufrufen. In unserem Tutorial nennen wir die komprimierte Datei jedoch einheitlich „bootstrap.min.js“:
Besondere Erklärung: Da die Komponenteninteraktionseffekte von Bootstrap alle auf Plug-Ins basieren, die von der jQuery-Bibliothek geschrieben wurden, muss jquery.min geladen werden, bevor bootstrap.min.js .js verwendet wird wird den Effekt hervorrufen.
Schauen wir uns zunächst ein einfaches Beispiel auf der offiziellen Website an:
Bei Verwendung der Dropdown-Menükomponente im Bootstrap-Framework ist es sehr wichtig, die richtige Struktur und den Klassennamen zu verwenden. Wenn die Struktur und der Klassenname nicht korrekt verwendet werden, wirkt sich dies direkt darauf aus, ob die Komponente normal verwendet werden kann. Werfen wir einen kurzen Blick darauf:
1. Verwenden Sie einen Container mit dem Namen „dropdown“, um das gesamte Dropdown-Menüelement einzuschließen:
2. Verwenden Sie eine Schaltfläche
data-toggle="dropdown"
3. Der Dropdown-Menüpunkt verwendet eine UL-Liste und definiert einen Klassennamen „dropdown-menu“.
Die Dropdown-Menükomponente im Bootstrap-Framework, deren Dropdown-Menüelemente standardmäßig ausgeblendet sind, wie unten gezeigt:
Da der Standardstil von „dropdown-menu“ auf „display:none“ eingestellt ist, sehen Sie sich bitte den detaillierten Quellcode aus den Zeilen 3010 bis 3029 der Bootstrap.css-Datei an:
Wenn der Benutzer auf den übergeordneten Menüpunkt klickt, wird das Dropdown-Menü angezeigt. Wenn der Benutzer erneut klickt, wird das Dropdown-Menü weiterhin ausgeblendet.
Prinzipanalyse:
Jetzt analysieren wir das Implementierungsprinzip. Es ist sehr einfach, den Klassennamen „open“ zum übergeordneten Container „div.dropdown“ hinzuzufügen oder zu entfernen, um die Anzeige oder das Ausblenden des Dropdown-Menüs zu steuern. Das heißt, „div.dropdown“ hat standardmäßig nicht den Klassennamen „open“. Wenn der Benutzer zum ersten Mal klickt, fügt „div.dropdown“ den Klassennamen „open“ hinzu erneut „div.dropdown“ „Der Klassenname „open“ im Container wird wieder entfernt. Wir können den gesamten Vorgang über den Firebug des Browsers verfolgen:
Standard:
Erster Klick des Benutzers:
Benutzer klickt erneut:
In den Zeilen 3076 bis 3078 der Bootstrap.css-Datei können wir leicht finden:
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
对应的样式代码也非常简单：
