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

Detaillierte Erklärung, wie Sie den Speicherort der Nginx-Konfigurationsdatei finden

Wie lässt sich bei einem unbekannten Server oder ...

Eine kurze Diskussion über die Lösung des Problems der nativen Seitenkompatibilität mit IE9

Vorwort Vor Kurzem habe ich die native Seite eine...

Beispiel für die Verwendung von mycat zur Implementierung der Lese-/Schreibtrennung in MySQL-Datenbanken

Was ist MyCAT Ein vollständig Open Source-Großdat...

21 Best Practices zur MySQL-Standardisierung und -Optimierung!

Vorwort Jede gute Angewohnheit ist ein Schatz. Di...

Zusammenfassung der Tests für logische MySQL-Sicherungen und -Wiederherstellungen

Inhaltsverzeichnis 1. Was für eine Art von Backup...

Beispielcode mit SCSS in Uni-App

Aufgetroffene Fallstricke Ich habe den ganzen Nac...

So aktivieren Sie das langsame Abfrageprotokoll in MySQL

1.1 Einleitung Durch Aktivieren des Slow Query Lo...

Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments

1. Einführung in KVM Die Abkürzung für Kernel-bas...

Tiefgreifendes Verständnis des Javascript-Klassenarrays

js-Arrays sind wahrscheinlich jedem bekannt, da s...

Analysieren Sie das Auswahlproblem beim Speichern von Zeit- und Datumstypen in MySQL

In allgemeinen Anwendungen verwenden wir die Type...

Vue3+Vite+TS implementiert sekundäre Kapselung von Element-Plus-Geschäftskomponenten sfasga

Inhaltsverzeichnis 1. Strukturzeichenfolge 2. Tup...

Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite

Der Originalcode lautet: <div Klasse = "K...

So löschen Sie schnell alle Tabellen in MySQL, ohne die Datenbank zu löschen

Dieser Artikel beschreibt anhand eines Beispiels,...

Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps

1. Netzwerkoptimierung YSlow hat 23 Regeln. Diese...

Ausführliche Erläuterung der Mysql-Deadlock-Anzeige und Deadlock-Entfernung

Vorwort Vor einiger Zeit ist bei mir ein MySQL-De...