Detaillierte Erklärung der vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters

Detaillierte Erklärung der vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters

1. Bootstrap-Rasterlayout

Im vorherigen Abschnitt haben wir das Raster in Bootstrap vorgestellt. Das Raster ist ein wichtiger Punkt und eine Schwierigkeit beim Layout von Webseiten. Das Layout ist der Ausgangspunkt und die Grundlage des Webdesigns. Sie müssen sich Zeit nehmen, um es zu verstehen. Verstehen Sie zumindest die Inhalte, die in dem von mir verfassten Tutorial vorgestellt wurden, denn das, was ich geschrieben habe, sind die am häufigsten verwendeten und grundlegendsten. Ich glaube natürlich, dass ein Webdesigner mit einer gewissen Grundlage diese Inhalte auf einen Blick verstehen kann. Heute werden wir mehr über das Rasterlayout erfahren.

Dieser Abschnitt behandelt einige der Funktionen der allgemeinen Klasse Flex.

2. Vertikale Ausrichtung

2.1 Vertikale Ausrichtung im Zeilen-Tag festlegen

Durch Hinzufügen von align-items-start, align-items-center und align-items-end zum Zeilentag können Sie die vertikale Ausrichtung der Zeile im Container ändern. Die obigen drei Tags sind jeweils Ausrichtung oben, Ausrichtung zentriert und Ausrichtung unten. Nachfolgend finden Sie einen Demonstrationscode und ein Effektdiagramm. Der CSS-Code im Code legt die Hintergrundfarbe und den Abstand fest, um die Anzeige des Effekts zu erleichtern.

<!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="externes Nofollow" rel="externes Nofollow" rel="stylesheet">
    <Stil>
      .row{Hintergrundfarbe: rgba(0, 0, 255, 0,178);Höhe: 260px;Rand:30px;}
      .col{Hintergrundfarbe: rgba(101, 101, 161, 0,842);Höhe: 80px;Polsterung: 30px;Rand: 10px;}
    </Stil>
    <title>Demo zur vertikalen Ausrichtung</title>
  </Kopf>
  <Text>
        <div Klasse="Container">

          <div Klasse="Zeile ausrichten-Elemente-Start">
            <div Klasse="col"> </div>
            <div Klasse="col"></div>
            <div Klasse="col"></div>
          </div>

          <div Klasse="Zeile ausrichten-Elemente-Mitte">
            <div Klasse="col"> </div>
            <div Klasse="col"></div>
            <div Klasse="col"></div>
          </div>

          <div Klasse="Zeile ausrichten-Elemente-Ende">
            <div Klasse="col"> </div>
            <div Klasse="col"></div>
            <div Klasse="col"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2.2 Vertikale Ausrichtung im Col-Tag festlegen

Sie können die vertikale Ausrichtung der Spalte in der Zeile ändern, indem Sie dem Tag „col“ die Tags „align-self-start“, „align-self-center“ und „align-self-end“ hinzufügen. Die drei oben genannten Tags sind jeweils „oben ausgerichtet“, „mittig ausgerichtet“ und „unten ausgerichtet“. Nachfolgend finden Sie einen Demonstrationscode und ein Effektdiagramm. Der CSS-Code im Code legt die Hintergrundfarbe und den Abstand fest, um die Anzeige des Effekts zu erleichtern.

<!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="externes Nofollow" rel="externes Nofollow" rel="stylesheet">
    <Stil>
      .row{Hintergrundfarbe: rgba(0, 0, 255, 0,178);Höhe: 260px;Rand:30px;}
      .col{Hintergrundfarbe: rgba(101, 101, 161, 0,842);Höhe: 80px;Polsterung: 30px;Rand: 10px;}
    </Stil>
    <title>Demo zur vertikalen Ausrichtung</title>
  </Kopf>
  <Text>
        <div Klasse="Container">

          <div Klasse="Zeile ausrichten-Elemente-Start">
            <div class="col align-self-start"> </div>
            <div Klasse = "col align-self-center"></div>
            <div Klasse = "col align-self-end"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3. Horizontale Ausrichtung

3.1 Vertikale Ausrichtung im Zeilen-Tag festlegen

Sie können die horizontale Ausrichtung von Spalten in einer Zeile ändern, indem Sie dem Zeilentag „justify-content-start“, „justify-content-center“, „justify-content-end“, „justify-content-around“, „justify-content-between“ und „justify-content-evenly“ hinzufügen. Nachfolgend finden Sie einen Demonstrationscode und ein Effektdiagramm. Der CSS-Code im Code legt die Hintergrundfarbe und den Abstand fest, um die Anzeige des Effekts zu erleichtern.

<!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="externes Nofollow" rel="externes Nofollow" rel="stylesheet">
    <Stil>
     .row{Hintergrundfarbe: rgba(0, 0, 255, 0,178);Höhe: 120px;Rand:10px;}
      .col-4{Hintergrundfarbe: rgba(101, 101, 161, 0,842);Höhe: 30px;Polsterung: 10px;Rand: 10px;}
    </Stil>
    <title>Demo zur vertikalen Ausrichtung</title>
  </Kopf>
  <Text>
        <div Klasse="Container">

          <div Klasse = "Zeile ausrichten-Inhalt-Start">
            <div Klasse="col-4"> </div>
            <div Klasse="col-4"></div>
            <div Klasse="col-4"></div>
          </div>

          <div Klasse = "Zeile ausrichten-Inhalt-Mitte">
            <div Klasse="col-4"> </div>
            <div Klasse="col-4"></div>
            <div Klasse="col-4"></div>
          </div>

          <div Klasse = "Zeile ausrichten-Inhalt-Ende">
            <div Klasse="col-4"> </div>
## <div Klasse="col-4"></div>
            <div Klasse="col-4"></div>
          </div>

          <div Klasse = "Zeile ausrichten-Inhalt-um">
            <div Klasse="col-4"> </div>
            <div Klasse="col-4"></div>
            <div Klasse="col-4"></div>
          </div>

          <div Klasse = "Zeile ausrichten-Inhalt-zwischen">
            <div Klasse="col-4"> </div>
            <div Klasse="col-4"></div>
            <div Klasse="col-4"></div>
          </div>

          <div Klasse = "Zeile ausrichten-Inhalt-gleichmäßig">
            <div Klasse="col-4"> </div>
            <div Klasse="col-4"></div>
            <div Klasse="col-4"></div>
          </div>
        </div>

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters. Weitere relevante Inhalte zur vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters 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!

Das könnte Sie auch interessieren:
  • Implementierung eines Bootstrap-Webseiten-Layoutrasters
  • Detaillierte Erklärung des Layouts des Bootstrap-Rastersystems
  • Analyse der Verwendung des Bootstrap-Rastersystems
  • Erster Kontakt mit dem magischen Bootstrap-Grid-System
  • Kapitel 4: Bootstrap Grid System - Offset-Spalten und verschachtelte Spalten
  • Kapitel 3 Bootstrap Grid-Grundlagen
  • BootStrap3 Studiennotizen (I) Rastersystem
  • Die Ähnlichkeiten und Unterschiede zwischen Bootstrap 3- und Foundation 5-Rastersystemen
  • Bootstrap Grid System erklärt

<<:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 unter Windows

>>:  Docker installiert Redis 5.0.7 und behebt externe Konfigurations- und Datenprobleme

Artikel empfehlen

Das WeChat-Applet realisiert den Effekt des Siebschüttelns

In diesem Artikel wird der spezifische Code des W...

Detaillierter Prozessbericht der Nginx-Installation und -Konfiguration

Inhaltsverzeichnis 1 Einführung in nginx 1 Was is...

Zwei Möglichkeiten zum Löschen von Tabellendaten in MySQL und ihre Unterschiede

Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...

Eine kurze Diskussion über die Optimierung von MySQL-Paging für Milliarden von Daten

Inhaltsverzeichnis Hintergrund analysieren Datens...

Eine kurze Diskussion über den Linux-Signalmechanismus

Inhaltsverzeichnis 1. Signalliste 1.1. Echtzeitsi...

Detaillierte Schritte zur Installation von Docker in 5 Minuten

Für die Installation von Docker auf CentOS muss d...

Beispielerklärung für Ausführungskontext und Ausführungsstapel in JavaScript

JavaScript - Prinzipienreihe Wenn wir in der tägl...

Vue-Statusverwaltung: Verwendung von Pinia statt Vuex

Inhaltsverzeichnis 1. Was ist Pinia? 2. Pinia ist...

Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Vorwort In der täglichen Entwicklung stoßen wir h...

Beispielcode zum Installieren der ASPNET.Core3.0-Runtime unter Linux

# Die folgenden Beispiele gelten für die x64-Bit-...

Installieren Sie die Befehlsfunktionen „Zip“ und „Unzip“ unter Linux und CentOS (Server).

Installieren Sie die Zip-Dekomprimierungsfunktion...

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

<Text> <div id="Wurzel"> &l...

Web-Kenntnisse: Lösung für die Koexistenz mehrerer IE-Versionen IETester

Meine Empfehlung Lösung für die Koexistenz mehrer...

Codebeispiele für allgemeine Vorgänge bei der Docker-Image-Verwaltung

Spiegelung ist auch eine der Kernkomponenten von ...

Wie viele Ports kann ein Linux-Server maximal öffnen?

Inhaltsverzeichnis Hafenbezogene Konzepte: Bezieh...