✅ Den Umgang mit dem Bootstrap Grid erlernen

Inhaltsverzeichnis

Spalte a
Spalte B
Spalte C
Spalte a
Spalte B
Spalte C

Bootstrap verwaltet eine rasterbasierte Struktur oder auch bekannt als Netz, das nichts anderes ist als ein Layout auf dem Bildschirm, das uns hilft, unsere Elemente zu organisieren, es ist, als ob wir den Bildschirm in Zeilen und Spalten aufteilen und wie eine große Tabelle behandeln.
Diese Art der Manipulation führt uns dazu, über Designs auf "einzigartige" Weise nachzudenken und in dem Moment, in dem wir ein wenig mehr Erfahrung mit der Verwendung haben Bootstrap Wir werden anfangen, alles auf diese Weise zu sehen und dadurch an Beständigkeit und Geschwindigkeit in unserer Arbeitsweise zu gewinnen.
Das erste, was Sie wissen müssen, ist, dass dieses Design des Netz ermöglicht es uns, so zu arbeiten, dass wir mobile Ansichten nativ implementieren können, dies natürlich ab Version 3 von Bootstrap, dank der Tatsache, dass diese Version mit Blick auf mobiles Design entwickelt wurde.
In früheren Versionen des Frameworks mussten die Klassen direkt angegeben werden, damit sich unser Design an die Auflösungen mobiler Geräte anpassen konnte, jetzt die verschiedenen Klassen der Netz sie tun es automatisch.
Um diese Funktion zu nutzen, müssen wir von klein nach groß denken, d. h. die angewendeten Klassen müssen immer als die kleinsten betrachtet werden und dann wird sie auf andere Auflösungen skaliert, d. h. wenn wir a . definieren sm klasse (klein oder klein), automatisch Bootstrap es nimmt an, dass dies der minimale Ausdruck ist und dass er dann skaliert werden kann auf md (Median) oder to lg (groß).
Bevor wir zu praktischeren Beispielen übergehen, müssen wir verstehen, welche Klassen wir in den Spalten von a . verwenden können Netz Und wir müssen auch wissen, für welchen Fall jeder zutrifft. Auf diese Weise können wir bei der Gestaltung unserer Website das kleinste Gerät berücksichtigen, das wir erreichen möchten.
Mit diesem Ansatz können wir Websites erstellen Mobilfreundlich, wie wichtig sie heute für Suchmaschinen und deren Ergebnisse werden und uns so helfen, neben der Erstellung guter Websites einige Punkte in unserem Ruf zu verdienen SEO, natürlich mit dem gleichen Job.
TelefonbildschirmeEs ist das kleinste Gerät, das theoretisch in unserem Design navigieren kann, obwohl die Auflösungen der Telefone nach und nach auf Full HD umgestellt wurden, ist dies im Allgemeinen für die Spitzenklasse, während die Mittelklasse und die Reichweite niedrig sind, was theoretisch ist die meisten behalten viel niedrigere Auflösungen bei. Die Art Netz für diesen Fall gilt: col-xs- und gilt für Lösungen kleiner als width 768 Pixel.
Tablet-BildschirmeSie sind theoretisch das zweitkleinste Gerät, das Tablet bietet dank seines größeren Größenanteils eine größere Navigationsfläche, sodass wir etwas mehr Inhalte nutzen können als mit einem Telefonbildschirm, außerdem erfolgt die Navigation auf Tablets in der Regel horizontal. Die für dieses Gerät geltende Klasse ist kol-sm- und gilt für Auflösungen mit Breiten größer als 768 Pixel und unter 992 Pixel.
KleinbildgeräteDies sind im Allgemeinen diejenigen, die zu den niedrigen Kategorien von Desktops und Laptops gehören, sie können Geräte mit Bildschirmen sein, die kleiner als 15 Zoll sind oder die eine Lebensdauer von mehr als 10 Jahren haben, sie sind auch die Laptops, die für Studenten und den Sektor mit niedrigen Kaufkraft, dies ist der Mehrheitssektor. Für diesen Fall gilt die Klasse col-md- und die Grenzauflösungen für die Breite sind größer als 992 Pixel und weniger als 1200 Pixel.
GroßbildgeräteHier können wir die modernsten Geräte in eine Schublade stecken, und auch die Bildschirme von mehr als 15 Zoll, in dieser Kategorie betreten die neuen Geräte wie ultraportabel, 4K-Auflösung oder QHD auch dort, wo wir Oberflächen sehen, die größer sind als 1080p. Indem wir die Breiten ausschließen, die wir hier behandeln, sind solche größer als 1200 Pixel, dies während die nächste Version von Bootstrap wahrscheinlich.
Da wir die Theorie hinter dem System kennen Netz von Bootstrap, Es ist gut, mit der praktischen Anwendung zu beginnen, aber bevor wir den Code sehen, müssen wir noch ein paar weitere Konzepte verstehen, wir müssen immer nach Konvention und Best Practices ein Element mit der Klasse verwenden Container, da dadurch der Container so erstellt wird, wie sein Name es angibt, um unsere verschiedenen Spalten beizubehalten. Das andere Konzept, das wir kennen müssen, ist, dass es immer 12 Spalten geben wird, sodass die verschiedenen Kombinationen, die wir vornehmen, diese Zahl berücksichtigen müssen.
Im folgenden Beispiel erstellen wir einen Code für ein Layout mit 3 großen Spalten, wir verwenden die Klasse col-md- und da wir 3 gleiche Spalten haben wollen, wenn wir 12 durch 3 teilen, erhalten wir die Zahl 4, so dass dies die Größe jeder unserer resultierenden Spalten ist.
Schauen wir uns den Code ohne weiteres an:

Bootstrap-Gitter

Beispiel für die Verwendung von Spalten in Bootstrap

Spalte a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue und laoreet aliquam. Aliquam erleichtert mein in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Spalte B

Spalte C

Die Struktur ist sehr einfach, wir haben ein div mit der Klasse erstellt Container, und in einem div mit der Klasse die Zeile innerhalb letzterer haben wir schließlich 3 divs mit der klasse erstellt col-md-4 Dies ist die Klasse für kleine Bildschirme für nicht tragbare Computer, und wir sehen, wie wir die Zahl 4 prägen, was anzeigt, dass jedes div von diesen 4 Spalten des entspricht Netz. Mal sehen, wie es aussieht, wenn wir in unserem Browser laufen:

VERGRÖSSERN

Wenn wir das bemerken, dann haben wir 3 große Spalten, aber was passiert, wenn wir die Größe auf eine Auflösung reduzieren, die niedriger ist als das Minimum der angewendeten Klasse, da die Spalten einfach übereinander gestapelt werden, wie wir in sehen folgendes Bild:

VERGRÖSSERN

Obwohl dies keine schlechte Sache ist, ist es manchmal nicht das Verhalten, das unser Design annehmen soll. Dazu können wir die Verhaltensweisen direkt in Klassen für die verschiedenen Auflösungen einbinden. Sehen wir uns im folgenden Code an, wie wir die Klassen der ändern verschiedene Spalten, um ein anderes Ergebnis zu erzielen:

Bootstrap-Gitter

Beispiel für die Verwendung von Spalten in Bootstrap

Spalte a

Spalte B

Spalte C

Wenn wir nun feststellen, dass in unserem Code alles gleich bleibt, außer unseren Klassen, wo wir für die Spalten A und B die Klasse hinzugefügt haben col-sm-6 und für Spalte C die Klasse col-sm-12, das heißt, wenn die Auflösung reduziert wird, werden die sm-Klassen regieren, wie wir in der folgenden Abbildung sehen:

VERGRÖSSERN

Wir sehen, dass in der gleichen Größe des ersten Beispiels die Spalten A und B nicht gestapelt sind, sondern in den gleichen Bereich fallen und Spalte C eine einzelne Zeile für sich beansprucht. Hier sehen wir den großen Nutzen von Netz insbesondere bei Designs, die darauf ausgerichtet sind, responsive und mobil zu sein.
Damit beenden wir dieses Tutorial, in dem wir gelernt haben, wie das System von Netz von BootstrapNatürlich ist dies nur die Spitze des Eisbergs, es gibt noch viel mehr Inhalte, die wir in anderen Tutorials erkunden können, aber mit diesem Grundwissen können wir beginnen zu sehen, wie wir unsere Designs logischer und mit weniger Aufwand vernetzen können dank der Rahmen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben