Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)
|
Die wesentlichen Inhalte dieses Artikels sind wie folgt: 1. Schaltfläche „Schließen“ 2.Carets 3. Schnell schweben lassen 4. Zentrieren Sie den Inhaltsbereich 5. Schwimmer löschen 6. Inhalte ein- oder ausblenden 7. Inhalte für Screenreader 8. Bildaustausch 9. Zusammenfassung Schaltfläche „Schließen“ Kann verwendet werden, um modale Dialoge und Warnungen durch die Verwendung eines Symbols, das ein Schließen symbolisiert, verschwinden zu lassen. Code kopieren Der Code lautet wie folgt: <button type="button" class="schließen" aria-hidden="true">×</button>
Zirkumflexe Verwenden Sie das Caret-Zeichen, um die Funktion und Richtung des Dropdown-Menüs anzugeben. Beachten Sie, dass das Cursorzeichen im Dropdown-Menü standardmäßig automatisch invertiert ist. Code kopieren Der Code lautet wie folgt: <span class="caret"></span>
Schnelleinrichtungsschwimmer Diese beiden Klassen ermöglichen das Schweben von Seitenelementen nach links und rechts. !important wird verwendet, um bestimmte Probleme zu vermeiden. Sie können diese beiden Klassen auch wie Mixins verwenden. Code kopieren Der Code lautet wie folgt: <div Klasse="Pull-left">...</div> <div Klasse="Pull-right">...</div> Code kopieren Der Code lautet wie folgt: // Klassen .pull-left { float: left !important; } .pull-right { float: right !important; } // Verwendung als Mixins .element { .pull-left(); } .another-element { .pull-right(); } Nicht für Navigationsleisten verwendenWenn Sie Komponenten auf einer Navigationsleiste ausrichten, verwenden Sie unbedingt .navbar-left oder .navbar-right. Weitere Informationen finden Sie in der Dokumentation zur Navigationsleiste. Zentrieren Sie den Inhaltsbereich Stellen Sie das anzuzeigende Seitenelement ein: Blockieren Sie es und zentrieren Sie es, indem Sie Ränder festlegen. Kann als Mixin oder Klasse verwendet werden. Code kopieren Der Code lautet wie folgt: <div Klasse = "center-block">...</div> Code kopieren Der Code lautet wie folgt: // Verwendung als Klasse .center-block { display: block; margin-left: auto; margin-right: auto; } // Verwendung als Mixin .element { .center-block(); } Schwimmer löschen Verwenden Sie .clearfix, um Floats beliebiger Seitenelemente zu löschen. Wir haben das Micro Clearfix von Nicolas Gallagher verwendet. Kann auch als Mixin verwendet werden. Code kopieren Der Code lautet wie folgt: <div Klasse="clearfix">...</div> Code kopieren Der Code lautet wie folgt: // Mixin selbst .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Verwendung als Mixin .element { .clearfix(); } Inhalte ein- oder ausblenden Mit den Methoden .show und .hidden kann das Ein- oder Ausblenden beliebiger Seitenelemente erzwungen werden (auch bei Bildschirmleseprogrammen). Diese beiden Klassen verwenden !important, um Konflikte zu vermeiden. Diese beiden Klassen können nur für Elemente auf Blockebene und auch als Mixins verwendet werden. .hide funktioniert noch, aber nicht mit Bildschirmleseprogrammen und ist seit v3.0.1 als veraltet gekennzeichnet. Bitte verwenden Sie .hidden oder .sr-only. Darüber hinaus können Sie mit .invisible nur die Sichtbarkeit eines Elements umschalten, was bedeutet, dass seine Anzeige nicht verändert wird und Sie weiterhin auf Elemente im Dokumentfluss Einfluss nehmen können. Code kopieren Der Code lautet wie folgt: <div Klasse="anzeigen">...</div> <div Klasse="versteckt">...</div> Code kopieren Der Code lautet wie folgt: // Klassen .show { Anzeige: Block !important; } .hidden { Anzeige: keine !important; Sichtbarkeit: versteckt !important; } .invisible { Sichtbarkeit: versteckt; } // Verwendung als Mixins .element { .show(); } .another-element { .hidden(); } Inhalte für Screenreader Verwenden Sie .sr-only, um ein Element vor allen Geräten außer Bildschirmlesegeräten auszublenden. Diese Klasse kann auch als Mixin verwendet werden. Code kopieren Der Code lautet wie folgt: <a class="sr-only" href="#content">Zum Hauptinhalt springen</a> Code kopieren Der Code lautet wie folgt: // Verwendung als Mixin .skip-navigation { .sr-only(); } Bildersetzung Verwenden Sie .text-hideclass (auch als Mixin verfügbar), um den Textinhalt eines Seitenelements durch ein Hintergrundbild zu ersetzen. Code kopieren Der Code lautet wie folgt: <h1 class="text-hide">Benutzerdefinierte Überschrift</h1> Code kopieren Der Code lautet wie folgt: // Verwendung als Mixin .heading { .text-hide(); } Zusammenfassen In diesem Artikel geht es hauptsächlich um einige Spezialeffekte. Beispielsweise Anzeigen und Ausblenden, Entfernen von Schwebeelementen, Schließen-Schaltflächen usw. In einigen Fällen kann dies nützlich sein. |
>>: Eine kurze Analyse der Probleme mit JS-Originalwerten und Referenzwerten
Artikel empfehlen
Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?
Was sind :is und :where? :is() und :where() sind ...
Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst
Wenn Ihre MySQL-Datenbank auf einem CentOS7-Syste...
So beenden Sie den MySQL-Prozess ordnungsgemäß und sicher
Vorwort In diesem Artikel wird der Vorgang zum He...
Füllen Sie die Suchfunktion auf der HTML-Seite aus
Ich habe kürzlich an einem Framework gearbeitet, ...
Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen
Syntax: <marquee> …</marquee> Mithilfe...
Lösung für das Timeout-Problem der SNMP4J-Serververbindung
Als Verwaltungszentrale und Server dient dabei un...
So deaktivieren Sie die Eslint-Erkennung in Vue (mehrere Methoden)
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Vollständiges Tutorial zur Installation von Apache, MySQL, PHP, LAMP auf Ubuntu 18.04
1. Installieren Sie Apache $ sudo apt update &...
Welche Vorteile bietet die Verwendung von B+Tree als Index in MySQL?
Inhaltsverzeichnis Warum benötigen Datenbanken In...
Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke
Ich habe vor kurzem Porter gelernt. Ich habe das ...
Node.js versendet E-Mails basierend auf dem STMP-Protokoll und dem EWS-Protokoll
Inhaltsverzeichnis 1 Node.js-Methode zum Senden v...
Detaillierte Erläuterung der kombinierten MySQL-Indexmethode
Für jedes DBMS sind die Indizes der wichtigste Op...
So lösen Sie das Problem FileZilla_Server:425. Datenverbindung kann nicht geöffnet werden
Bei der Installation von FileZilla Server auf dem...
Lösungen für Websites mit hohem Datenverkehr
Erstens: Stellen Sie zunächst sicher, dass die Ser...
Diskussion über Standard-Rand- und Füllwerte allgemeiner Elemente
Heute haben wir die Frage besprochen, wie hoch de...