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
Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64
Aktuelle Erfahrungen mit der Installation der kos...
Docker installiert Redis 5.0.7 und behebt externe Konfigurations- und Datenprobleme
Redis ist eine Open-Source-NoSQL-Datenbank, die i...
Detailliertes Tutorial zum Bereitstellen eines Hadoop-Clusters mit Docker
Ich möchte in meinem Unternehmen kürzlich einen H...
CSS Zurück zum Anfang Codebeispiel
Die meisten Websites haben heutzutage lange Seite...
Vollständige Liste der CentOS7-Firewall-Betriebsbefehle
Inhaltsverzeichnis Installieren: 1. Grundlegende ...
Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen
In diesem Artikel wird ein JS-Spezialeffekt vorge...
Eine detaillierte Diskussion der Auswertungsstrategien in JavaScript
Inhaltsverzeichnis Eine Kastanie zum Abdecken Par...
Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen
Vorwort Mit der Entwicklung großer Frontends tauc...
HTML-Code für Multiheader-Tabellen
1. Code der Multiheader-Tabelle Code kopieren Der ...
Zusammenfassung der Entwicklung benutzerdefinierter Vue 3-Richtlinien
Was ist eine Richtlinie? Sowohl Angular als auch ...
Detaillierte Erläuterung des Mechanismus und der Implementierung der Accept-Sperre in Nginx
Vorwort nginx verwendet ein Multiprozessmodell. W...
Lösen Sie das Problem der verstümmelten Zeichen im Tomcat10 Catalina-Protokoll
Laufumgebung, Idea2020-Version, Tomcat10, beim Au...
Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet
Effektbild: 1. Einleitung Ihr eigenes Applet muss...
JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen
In diesem Artikel wird der spezifische JavaScript...
CentOS 7.6 Installation der MySQL 5.7 GA-Version Tutorial-Diagramm
Inhaltsverzeichnis Umgebungsvorbereitung Umgebung...