Bootstrap 5 ist die neueste Version des Bootstrap-Frameworks, mit der seine Benutzer reaktionsschnelle Websites mit einem mobilen Ansatz erstellen können. Bootstrap 5 verfügt über viele Unterscheidungsmerkmale wie es hat schnelle Stylesheets und eine verbesserte Reaktionsfähigkeit. Eine grundlegende Notwendigkeit dieses Frameworks ist ein Container, um die Elemente auf einer Website zu wickeln. Ein Container ist das grundlegendste Layout von Bootstrap 5, das wir in diesem Artikel eingehend diskutieren werden.

Lass uns anfangen.

Was sind Container

Wie bereits erwähnt, gelten Container als das grundlegendste Layout von Bootstrap 5. Diese Entitäten wickeln Elemente von ihnen zusammen mit bestimmten Polsterung und Rand ein. Darüber hinaus sind diese für den Bau eines Netzlayouts von entscheidender Bedeutung.

In Bootstrap 5 gibt es insgesamt drei Container -Typen, die wir unten eingetragen haben.

1. Behälter mit fester Breite
2. Behälter mit voller Breite
3. Container mit reaktionsschnellen Haltepunkten

Lassen Sie uns sie ausführlich besprechen.

Behälter mit fester Breite

Sie können einen reaktionsschnellen Container mit fester Breite mit dem erstellen .Containerklasse. Diese Breite ändert sich je nach Gerätetyp und Bildschirmgröße. Erforschen wir nun diesen Containertyp mit einem Beispiel.

Beispiel

Hier wickeln wir Inhalte mit dem Container mit fester Breite ein.

Html

Hier sind wir vor allem Bootstrap 5, indem wir CDN für CSS und JavaScript in das Tag unserer HTML -Datei hinzufügen.

Html

Hallo Welt

Bootstrap 5 ist unglaublich.

Wir lernen Arten von Containern in Bootstrap 5.

Dies ist eine Demonstration des Behälters mit fester Breite, der das verwendet .Containerklasse.

Jetzt erstellen wir einen Div -Container und haben ihm den Klassenbehälter zugeordnet. Dann haben wir einen verschachtelt

, und drei

Elemente in diesem Div -Behälter.

Ausgang

Wir werden die Ausgabe in zufälligen Bildschirmgrößen zeigen. Zum Beispiel ist der Ausgang bei 699px und höher unten gezeigt.

Bei 351px und weniger.

Der .Container Die Klasse wurde erfolgreich implementiert.

Behälter mit voller Breite

Um Container mit voller Breite zu erstellen, verwenden Sie die .Containerfluid Klasse. Die Breite des Behälters beträgt 100%, unabhängig von der Bildschirmgröße. Das unten dargestellte Beispiel zeigt einen Container mit voller Breite.

Html

Hallo Welt

Bootstrap 5 ist unglaublich.

Wir lernen Arten von Containern in Bootstrap 5.

Dies ist eine Demonstration des Fixed-Breiten-Containers, der verwendet .Containerklasse.

Hier verwenden wir .Container-Fluid-Klasse, um ein Divelelement zu erstellen und eine Überschrift zu nisten, und einige Absätze in diesem Div.

Ausgang

Wir werden die Ausgabe in zufälligen Bildschirmgrößen zeigen. Die erste Ausgabe ist für die Bildschirmbreite 700px und höher.

Bei 355px und darunter.

Der .Containerfluid Die Klasse funktioniert ordnungsgemäß.

Container mit reaktionsschnellen Haltepunkten

Sie können auch Container erstellen, die eine Breite von 100% behalten, bis ein Haltepunkt angegeben ist. Dies bedeutet, dass sich die Breite nach diesem bestimmten Haltepunkt sich ändern wird. Für ein besseres Verständnis haben wir hier ein Beispiel gezeigt.

Beispiel

Hier haben wir alle oben genannten Haltepunkte demonstriert.

Sie können auch Container erstellen, die eine Breite von 100% behalten, bis ein Haltepunkt angegeben ist. Dies bedeutet, dass sich die Breite nach diesem bestimmten Haltepunkt sich ändern wird. Für ein besseres Verständnis haben wir hier ein Beispiel gezeigt.
Beispiel
Hier haben wir alle oben genannten Haltepunkte demonstriert.
[cce_html width = "100%" height = "100%" entkommen = "True" thema = "Blackboard" nowrap = "0"]
Klein
Mittel
Groß
Extra groß
Extra groß

Im obigen Code haben wir fünf Div -Container erstellt und jeder wurde eine bestimmte Klasse zugewiesen, die einem bestimmten Haltepunkt entspricht.

Ausgang

Haltepunkte wurden erfolgreich implementiert.

Notiz: Besuchen Sie die offizielle Website von Bootstrap 5, um die Breite verschiedener Container in Bootstrap 5 über bestimmte Haltepunkte zu lesen.

Abschluss

Behälter gelten als das grundlegendste Layout von Bootstrap 5, mit dem Elemente zusammen mit bestimmten Polsterung und Margin eingewickelt werden können. Darüber hinaus sind diese für den Bau eines Netzlayouts von entscheidender Bedeutung. Es gibt insgesamt drei Behältertypen; Container mit fester Breite, Behälter mit voller Breite und Container mit reaktionsschnellen Haltepunkten. Es gibt bestimmte integrierte Klassen, die mit diesen Behältern verbunden sind. Alle diese Containertypen werden im Artikel zusammen mit geeigneten Beispielen erläutert.