Einführung in Bootstrap 4 Cheatsheet
Bootstrap 4-Spickzettel enthält eine grundlegende Überarbeitung von Bootstrap 3. Viele Änderungen wurden an den meisten Komponenten vorgenommen, darunter Tabellen, Formulare, Dropdowns, Raster, Navigationsleisten usw. Die wichtigsten Vorteile von Frameworks wie Bootstrap sind, dass sie schneller werden können Entwicklungszeiten, auch wenn die Qualität und Konsistenz der Anwendung auf der gesamten Site erhalten bleibt. Bootstrap 4 Cheat Sheet funktioniert auf allen modernen Browsern oberhalb von Internet Explorer 9.
Bootstrap 4
Bootstrap 4 ist die neueste und fortschrittlichste Version von Bootstrap. Es ist das beliebteste Framework für HTML, CSS und JavaScript, mit dem reaktionsschnelle und mobile Anwendungen entwickelt werden. Bootstrap 4 ist wie frühere Versionen kostenlos und Open Source. Wir müssen nicht mehr alles von Grund auf neu schreiben und für die verschiedenen Gerätesätze neu entwerfen. Außerdem müssen wir nicht mehrere Stunden warten, um alles zu reparieren und sicherzustellen, dass es in verschiedenen Browsern, auf unterschiedlichen Plattformen und auf unterschiedlichen Geräten funktioniert.
Befehle und Beschreibung auf dem Bootstrap 4 Cheatsheet
Einige wichtige Bootstrap 4-Befehle und ihre Beschreibung finden Sie unten:
| Befehle | Beschreibung |
| Feste Container | Ein fester Container hat eine feste Breite. Wenn die Größe des Browsers geändert wird, bleibt seine Breite gleich, bis der Haltepunkt gefunden wird. |
| Flüssigkeitsbehälter | Ein Flüssigkeitsbehälter erstreckt sich über die gesamte Breite des verfügbaren Ansichtsfensters. Es wird fließend erweitert und verkleinert, was bedeutet, dass es sich ändert, wenn die Größe des Browsers geändert wird. |
| .Col- | Es ist für extra kleine Geräte gedacht - die Bildschirmbreite beträgt weniger als 576px |
| .Col-sm- | Dies gilt für kleine Geräte - die Bildschirmbreite bleibt mindestens 576px |
| .Col-md- | Dies gilt für mittelgroße Geräte. Die Bildschirmbreite bleibt mindestens 768px |
| .Col-lg- | Dies gilt für große Geräte. Die Bildschirmbreite beträgt mindestens 992px |
| .Col-xl- | Dies gilt für xlarge-Geräte. Die Bildschirmbreite beträgt mindestens 1200px |
- | h1 Überschrift der Bootstrap-Größe mit 2.5rem = 40px h2 Überschrift der Bootstrap-Größe mit 2rem = 32px h3 Überschrift für die Bootstrap-Größe mit 1, 75 rem = 28 Pixel h4 Überschrift für die Bootstrap-Größe mit 1.5rem = 24px h5 Überschrift der Bootstrap-Größe mit 1.25rem = 20px h6 Überschrift für die Bootstrap-Größe mit 1 Rem = 16 Pixel |
| Dieses HTML-Tag-Element bietet eine gelbe Hintergrundfarbe mit etwas Abstand | |
| Dieses HTML-Tag-Element bietet einen gepunkteten Rand unten. | |
|
| Die Klasse hinzufügen mit
wird zum Zitieren von Inhaltsblöcken aus Quellen verwendet, die von außerhalb stammen. |
| .Schriftdicke: fett | Für fetten Text |
| .schrift kursiv | Für kursiven Text |
| .font-weight-light | Für leichten Text |
| .font-weight-normal | Für normalen Text |
| .führen | Es hebt einen Absatz sichtbar hervor |
| .klein | Zeigt kleineren Text an, dh die Schriftgröße wird auf 85% der Größe des übergeordneten Elements reduziert. |
| .text-links | Es zeigt an, dass der Text linksbündig ist. |
| .text - * - left | Es zeigt an, dass der Text auf allen Bildschirmen linksbündig ausgerichtet ist |
| .text-center | Es gibt für zentrierten Text an |
| .text - * - zentrum | Es zeigt zentrierten Text auf allen Bildschirmen an |
| .text-rechts | Zeigt rechtsbündigen Text an |
| .text - * - richtig | Es zeigt rechtsbündigen Text auf allen Bildschirmen an |
| .text-rechtfertigen | Zeigt an, dass der Text richtig ausgerichtet ist |
| .text-monospace | Es hat Monospaced Text |
| .text-nowrap | Es zeigt an, dass kein Umbruchstext vorhanden ist |
| .text-Kleinbuchstaben | Zeigt an, dass Text in Kleinbuchstaben geschrieben ist |
| .text-Großbuchstaben | Zeigt an, dass Text in Großbuchstaben geschrieben wird |
| .text-groß schreiben | Es zeigt für großgeschriebenen Text an |
| .initialism | Es zeigt den Text in einem HTML-Tag-Element in einer kleineren Schriftgröße an. Es entfernt den verfügbaren Standard-Listenstil und den linken Rand von verschachtelten Listen mit Listenelementen |
| .Tabelle | Die Klasse fügt der Tabelle grundlegende Stile hinzu. |
| .table-striped | Die Klasse fügt der Tabelle Zebrastreifen hinzu. |
| .table-bordered | Die Klasse fügt Ränder an allen Seiten einer Tabelle und von Zellen hinzu. |
| .table-Hover | Die Klasse fügt einen Hover-Effekt hinzu, dh eine graue Hintergrundfarbe für verfügbare Tabellenzeilen. |
| .table-dark | Die Klasse fügt einer Tabelle einen schwarzen Hintergrund hinzu. |
Kostenlose Tipps und Tricks zur Verwendung von Bootstrap 4 Spickzettel: -
In diesem Abschnitt finden Sie einige coole Tipps und Tricks, mit denen Sie die Funktionen von Bootstrap 4-Spickzettel schnell hacken und eine fantastische App für Mobilgeräte erstellen können:
- Mit der Verwendung. col- (Haltepunkt) -push- (Nummer) oder bei der Verwendung. col- (breakpoint) -pull- (number) Klassen zu den Spalten kann die Reihenfolge der angegebenen Spalten geändert werden.
- Um ein Element schnell und einfach nur auf xs-Geräten auszublenden, gibt es eine. Die Klasse hidden-xs kann zum Ausblenden verwendet werden.
- . Die Klasse hidden- (breakpoint) kann auch für die übrigen Haltepunkte verwendet werden. In Kombination kann der oben erwähnte verborgene Bereich erreicht werden. Bsp .: - Klassen .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap wird mit 5 standardmäßig verfügbaren Schaltflächenstilen geliefert: Standard, Primär, Erfolg und Gefahr. Wenn eine Schaltfläche geändert werden muss, um den Rahmenradius oder den Abstand zu verringern, können Sie dies am besten erreichen, indem Sie die .btn-Datei überschreiben
- Um Radios und Kontrollkästchen zu deaktivieren, muss eine deaktivierte Klasse zu einem übergeordneten .checkbox- oder to.radio-Element hinzugefügt werden. Fügen Sie dann das deaktivierte Attribut zu der spezifischen Eingabe hinzu
- Fügen Sie zum Deaktivieren von Schaltflächen den HTML-Tag-Schaltflächen das Attribut disabled hinzu
Das Gleiche kann auch durch Hinzufügen einer deaktivierten Klasse zu Schaltflächen geschehen.
- Um ein Blockelement einfach horizontal zu zentrieren, muss wie in eine Center-Block-Klasse hinzugefügt werden.
- Wenn Inline-Inhalte schnell zentriert werden sollen oder Inline-Block-Elemente in einem div ausgeführt werden sollen, fügen Sie dem übergeordneten Element die Klasse .text-center hinzu.
- Sie können YouTube-Videos auch ganz einfach mit der eingebetteten Klasse von Bootstrap einbetten, die ein Hilfsmittel für Klassen ist. Die Klasse embed-responsive-16by9 oder embed-responsive-4by3 muss basierend auf dem Seitenverhältnis des Videos ausgewählt werden
Bootstrap 4 Spickzettel - Fazit
Über dem Bootstrap 4-Spickzettel sehen Sie, was mit dem Bootstrap 4 möglich ist. Es steht jedoch eine umfassendere Anleitung mit Tausenden anderer Parameter und Tags zur Verfügung. Es ist offensichtlich, dass nicht alle Informationen in einem einzigen Artikel bereitgestellt werden können, und ein Entwickler muss sich alle Tags und Klassen merken, um die Entwicklung durchführen zu können. Der beste und am meisten empfohlene Ansatz besteht darin, solche Spickzettel griffbereit zu halten, und der Benutzer sollte sich bei Bedarf auf solche Blätter beziehen. Dadurch wird sichergestellt, dass die gesamte Arbeit zum gewünschten Zeitpunkt erledigt wird, und das Verständnis und die Kenntnisse des Benutzers über Bootstrap 4 werden über einen bestimmten Zeitraum hinweg verbessert.
Empfohlener Artikel
Dies ist eine Anleitung zum Bootstrap 4-Spickzettel. Hier haben wir den Inhalt und den Befehl sowie kostenlose Tipps und Tricks zum Bootstrap 4-Spickzettel besprochen. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren.
- Spickzettel CSS
- Bootstrap vs JQuery Unterschiede
- Einfache und nützliche Anleitung zum Spickzettel SQL
- Ultimativer Spickzettel für die Programmiersprache C ++ (Grundlagen)