Spezifische Verwendung von Bootstrap5-Haltepunkten und Containern

1. Bootstrap5-Haltepunkte

1.1 Mobile zuerst

Wenn es um Mobile First geht, müssen wir zuerst Responsive Design erwähnen. Eine responsive Schnittstelle dient dazu, eine Seite zu entwerfen, die sich an verschiedene Geräte anpassen kann. Responsive Design verwendet Technologien wie Medienabfragen, um eine Stilanpassung an verschiedene Geräte/Fenster zu erreichen. Mit anderen Worten: Es werden den Benutzern je nach den von Ihnen verwendeten Geräten unterschiedliche Seitenlayouts angezeigt.
Dies wird basierend auf der Media-Query-Technologie von HTML5 erreicht, die die Bildschirmbreite ermitteln und dann CSS verwenden kann, um bei unterschiedlichen Breiten unterschiedliche CSS-Effekte zu verwenden.
Mobile First bedeutet, zuerst eine für mobile Clients geeignete Benutzeroberfläche zu entwickeln und dann den entsprechenden Stil entsprechend der Situation auf der PC-Seite anzupassen. Die entgegengesetzte Designidee ist PC First. Die Wahl der Methode sollte auf Ihren Gewohnheiten und dem Anteil der Benutzer basieren. Heutzutage wird im Allgemeinen zuerst die mobile Nutzung bevorzugt.

1.2 Bootstrap-Haltepunkte

Der sogenannte Breakpoint bezeichnet den kritischen Punkt.
Diese Tabelle und deren Inhalt müssen gut im Gedächtnis behalten werden, insbesondere das Klasseninfix, da dieses häufig verwendet wird.
Dies wird im nächsten Layoutabschnitt ausführlich erläutert. Lesen Sie es hier einfach noch ein paar Mal. Es macht nichts, wenn Sie es sich nicht merken können. Sie können später immer noch zurückkommen, um es zu überprüfen.

Wie aus der obigen Tabelle ersichtlich ist, ist der Bildschirm durch 5 Haltepunkte in 6 Größen unterteilt. Die Leser müssen sie hier nur zuerst verstehen. Das Rastersystem wird im dritten Abschnitt weiter vorgestellt.

2. Behälter

2.1 Behälter dienen zur Aufbewahrung von Dingen

Container sind das grundlegendste Layoutelement in Bootstrap und sind beim Entwurf responsiver Websites mit dem Standardrastersystem erforderlich. Die maximale Breite eines Containers kann sich je nach Breite des Browsers ändern. Die Verwendung von Containern ist sehr einfach. Sie können das Container-Tag direkt in die innere Ebene des Hauptteils einfügen. Im Allgemeinen benötigt eine Seite nur ein Container-Tag, um alle anderen visuellen Inhalte zu umschließen. In dieser Demonstration werden jedoch mehrere Container auf einer Seite platziert, um die Auswirkungen verschiedener Container vergleichen zu können.

2.2 Klassifizierung von Bootstrap-Containern

Die Container von Bootstrap sind standardmäßig in drei Typen unterteilt:

1. .container, der Standardcontainer, dessen Breite der maximalen Breite des vorherigen Haltepunkts vor jedem reaktionsfähigen Haltepunkt entspricht.
2. .container-fluid, ein Fluid-Container, der immer 100 % der Browserbreite einnimmt.
3. .container-{breakpoint}, Haltepunktcontainer, vor Erreichen des Haltepunkts beträgt seine Breite immer 100 % der Browserbreite, nach Erreichen des Haltepunkts entspricht seine Breite immer der maximalen Breite des Haltepunkts. Die Breakpoint-Werte entsprechen den zuvor eingeführten Breakpoints.

Die folgende Tabelle zeigt die Containerbreite bei verschiedenen Auflösungen.

2.3 Containeränderungen mit Browserbreitenanalyse

2.3.1 Einfaches Beispiel

Einige von Ihnen verstehen die Tabelle in 2.2 möglicherweise nicht so gut. Ich gebe Ihnen ein paar Beispiele:
Am Beispiel von container-md: Wenn die Bildschirmbreite weniger als 768 Pixel beträgt, macht die Containerbreite 100 % der Bildschirmbreite aus. Wenn die Bildschirmbreite größer als 768 Pixel und kleiner als 992 Pixel ist, beträgt die Containerbreite immer 720 Pixel. Wenn die Bildschirmbreite größer als 992 Pixel und kleiner als 1200 Pixel ist, beträgt die Containerbreite immer 960 Pixel usw. Dasselbe gilt für andere Breakpoint-Container und Standardcontainer.

2.3.2 Mehrere Funktionen des Bootstrap-Containers (außer Flow-Container)

• Die Containerbreite ist sprunghaft, nicht gleichmäßig, und die Breite ist zwischen jeweils zwei Haltepunkten gleich.
• Der Container hat vor dem Haltepunkt keine Ränder und nach dem Haltepunkt Ränder. Bei einem 768-Pixel-Bildschirm beträgt die Containerbreite 720 Pixel.
• Aktuell sind der Standardcontainer (Container) und der kleine Container (Container-SM) noch gleichwertig, es ist jedoch nicht ausgeschlossen, dass es im nächsten Schritt zu Änderungen kommt.

2.4 Demonstrationscode zum Ändern des Containers mit der Browserbreite

Unten finden Sie den Demonstrationscode für verschiedene Browserbreiten sowie das GIF-Effektdiagramm. Wenn Sie ihn nicht verstehen, können Sie den Code herunterladen und selbst studieren. Der Stilteil wurde von mir geschrieben, um die Hintergrundfarbe des Containers und den Abstand zwischen den einzelnen Containern zur einfachen Unterscheidung und Anzeige festzulegen, und hat nichts mit dem Container selbst zu tun.

2.4.1 Demonstrationsanimation

2.4.2 Demonstrationsquellcode

<!doctype html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
    <meta name="Schlüsselwörter" content="">
    <meta name="Beschreibung" Inhalt="">
    <link href="bootstrap5/bootstrap.min.css" rel="externes Nofollow" rel="stylesheet">
 
    <title>Demonstration der Containerbreite bei unterschiedlichen Breiten</title>
    <Stil>
      div {Hintergrundfarbe: rgba (0, 0, 255, 0,178); Polsterung: 10px; Rand: 10px;}
    </Stil>
  </Kopf>
  <Text>
    <div class="container">Standardcontainer</div>
    <div class="container-sm">container-sm 100 % breit bis zum kleinen Haltepunkt</div>
    <div class="container-md">container-md 100 % breit bis zum mittleren Haltepunkt</div>
    <div class="container-lg">container-lg 100 % breit bis zum großen Haltepunkt</div>
    <div class="container-xl">container-xl 100 % breit bis zum extragroßen Haltepunkt</div>
    <div class="container-xxl">container-xxl 100 % breit bis zum extragroßen Haltepunkt</div>
    <div class="container-fluid"> Flüssigkeitsbehälter</div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Dies ist das Ende dieses Artikels über die spezifische Verwendung von Bootstrap5-Haltepunkten und -Containern. Weitere relevante Inhalte zu Bootstrap5-Haltepunkten und -Containern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!