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
Bei der Installation von mysql8.0.15 winx64 unter Win10 und der Verbindung zum Server sind Probleme aufgetreten
1. Laden Sie mysql-8.0.15 herunter, installieren ...
Informieren Sie sich, wie HTML und Ressourcen geladen werden
Der gesamte Inhalt dieses Blogs ist unter Creativ...
Vue implementiert eine einfache Produktion von Zählern
In diesem Artikelbeispiel wird der einfache Imple...
Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten
beschreiben: Wenn die Tabs-Komponente hin- und he...
Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt
Beim Überprüfen der langsamen Abfrage stellte ich...
CentOS7-Konfiguration Alibaba Cloud Yum-Quellmethodencode
Öffnen Sie den Centos Yum-Ordner Geben Sie den Be...
Beispiel-Tutorial für geplante MySQL-Aufgaben
Vorwort Seit MySQL 5.1.6 wurde eine einzigartige ...
Detaillierte Erklärung zur Lösung des Problems zu langer Inhalte in CSS
Wenn wir CSS schreiben, vergessen wir manchmal di...
So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet
Finden Sie das Problem Schauen wir uns zunächst d...
Tutorial zum Herunterladen und Installieren der komprimierten Version von MySQL 8.0.16 unter dem Win10-System
Download von der offiziellen Website: https://www...
Ubuntu 20.04: Beispiel zum Ändern der IP-Adresse
veranschaulichen: Als ich heute das letzte Experi...
Detaillierte Erläuterung des Aufbaus und der Schnittstellenverwaltung des Docker Private Warehouse
1. Über die Registrierung Der offizielle Docker-H...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine temporären Dateien erstellt werden können
Problembeschreibung Ich hatte kürzlich ein Proble...
HTML-Lernhinweise – Detaillierte Erklärung der HTML-Syntax (unbedingt lesen)
1. Was ist die HTML-Auszeichnungssprache? HTML is...
Zwei Möglichkeiten zum Verwalten von Volumes in Docker
Im vorherigen Artikel habe ich die Grundkenntniss...