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

js verwendet Canvas, um mehrere Bilder in einem Implementierungscode zusammenzuführen

Lösung Funktion mergeImgs(Liste) { const imgDom =...

Kennen Sie die Bedeutung von Sonderzeichen in URLs?

1.# # stellt eine Position auf einer Webseite dar...

Lösen Sie das Problem des Vergessens von Passwörtern in MySQL 5.7 unter Linux

1. Problem Passwort für mysql5.7 unter Linux verg...

In einem Artikel erfahren Sie, wie Sie mit js den Sperrfeuereffekt erzielen

Inhaltsverzeichnis Erstellen Sie eine neue HTML-D...

Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12

In diesem Artikel finden Sie das Installations-Tu...

Antd + vue realisiert die Idee der dynamischen Überprüfung kreisförmiger Attributformen

Ich hoffe, einige Eigenschaften des Abfrageformul...

Eine umfassende Analyse der Möglichkeiten von Nginx

Vorwort Dieser Artikel konzentriert sich nur dara...

Vue implementiert eine Echtzeitaktualisierung der Zeitanzeige in der oberen rechten Ecke

In diesem Artikelbeispiel wird der spezifische Co...

Syntax-Alias-Problem basierend auf Löschen in MySQL

Inhaltsverzeichnis MySQL-Löschsyntax-Aliasproblem...

Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

Installieren Sie Jenkins über Yum 1. Installation...

Umfassendes Verständnis der Node-Ereignisschleife

Inhaltsverzeichnis Knoten-Ereignisschleife Ereign...

Perfekte Lösung für keine rc.local-Datei in Linux

Neuere Linux-Distributionen verfügen nicht mehr ü...

HTML + CSS + JS realisiert, dass die Leinwand dem Quellcode für Spezialeffekte des kleinen Kreises der Maus folgt

Wirkung (Quellcode am Ende): erreichen: 1. Tags d...

Detaillierte Erläuterung des Prozesses zur Bereitstellung von Tomcat und zur Erstellung des ersten Webprojekts in IDEA 2020.3.1

Inhaltsverzeichnis Tomcat-Einführung Tomcat-Berei...

So drücken Sie relative Pfade in Linux aus

Wenn Ihr aktueller Pfad beispielsweise /var/log i...