Polster- und Randklassen in Bootstrap 5

Rand und Polsterung sind einzigartige Eigenschaften von CSS, die Räume zwischen dem Container und seinem Inhalt hinzufügen. Für ein einfaches Verständnis fügt die Margin -Eigenschaft Leerzeichen außerhalb der Box hinzu, während die Polsterung Räume innerhalb der Box hinzufügt.

In diesem Artikel erfahren Sie etwas über

Rand-Auto-Klassen
Randklassen mit Größen
Polsterklassen mit Größen

Begriffe, die zum Auftragen von Margen und Polsterung in Bootstrap 5 verwendet werden

Ränder und Polsterung können mit den Bootsrap -Klassen auf die HTML -Elemente angewendet werden und die richtige Klasse bereitstellen, die Sie verstehen müssen, um die folgenden Begriffe zu verstehen:

M als Rand bezeichnen
P als Polsterung bezeichnen
T siehe oben
B beziehen sich auf unten
S als Start beziehen
e als Ende bezeichnen

Um diese Begriffe besser zu verstehen, schauen Sie sich die folgenden Beispiele an.

Rand-Auto-Klassen

Die folgenden Randklassen werden verwendet, um automatisch Räume zwischen den Elementen des Containers hinzuzufügen.

M-Auto

.M-Auto Die Klasse gibt einen Rand von allen Seiten rechts, links, oben und unten.

Code

In diesem Artikel handelt es sich.

Im obigen Beispiel haben wir die angewendet M-Auto Klasse auf Orange Div, die den gleichen Raum von der gesamten Seite des Divs hinzufügen.

MS-Auto

.MS-Auto Klasse fügt Platz von der linken Seite des Divs hinzu und MS steht für Margin-Start.

Code

In diesem Artikel handelt es sich.

Im obigen Beispiel haben wir die angewendet MS-Auto Klasse auf Orange Div, die Platz von der linken Seite des Divs hinzufügen.

me-auto

.me-auto Klasse fügt Platz von der rechten Seite des Divs hinzu und Mich steht für Margin-End.

Code

In diesem Artikel handelt es sich.

Im obigen Beispiel haben wir die angewendet M-Auto Klasse auf Orange Div, die Raum von der rechten Seite des Divs hinzufügen.

Randklassen mit Größen

Die folgenden Randklassen werden verwendet, um Räume zwischen den Elementen des Containers gemäß den Benutzeranforderungen hinzuzufügen.

Rand

.MT-Größe Die Klasse gibt Rand von der Oberseite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

Im obigen Beispiel

Orange Box verwendet .MT-0 Das bedeutet kein Vorsprung von oben
Pink Box verwendet .MT-1 was bedeutet, dass der Rand von oben 0 ist.25
Blue Box verwendet .MT-2 was bedeutet, dass der Rand von oben 0 ist.5
Green Box verwendet .MT-3 was bedeutet, dass der Rand von oben 1 ist 1
Hautbox Verwendung .MT-4 was bedeutet, dass der Rand von oben 1 ist 1.5
Aqua Box verwendet .MT-5 was bedeutet, dass der Rand von oben 3 ist 3

Randboden

.MB-Größe Die Klasse gibt den Rand von der unteren Seite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

Randstart

.Me-Größe Die Klasse gibt den Rand von der linken Seite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

Margin-End

.Me-Größe Die Klasse gibt Rand von der rechten Seite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

In diesem Artikel handelt es sich.

Benutzen .MT-0/1/2/3/4/5 Klasse für verschiedene Bildschirme einfach verwenden .MT-XXL/LG/MD/SM-0/1/2/3/4/5.

Polsterklassen mit Größen

Die folgenden Padding -Klassen werden verwendet, um Leerzeichen zwischen dem Inhalt und dem Container gemäß den Benutzeranforderungen hinzuzufügen.

Polsterung

.Pt-Größe Die Klasse gibt Polsterung von der Oberseite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

Im obigen Beispiel

Orange Box verwendet .PT-0 was bedeutet keine Polsterung von oben
Pink Box verwendet .Pt-1 Das bedeutet, dass die Polsterung von oben 0 ist.25
Blue Box verwendet .Pt-2 Das bedeutet, dass die Polsterung von oben 0 ist.5
Green Box verwendet .PT-3 Das bedeutet, dass die Polsterung von oben 1 ist
Hautbox Verwendung .PT-4 Das bedeutet, dass die Polsterung von oben 1 ist.5
Aqua Box verwendet .PT-5 Das bedeutet, dass die Polsterung von oben 3 ist

Padding-Bottom

.PB-Größe Die Klasse gibt Polsterung von der unteren Seite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

Polsterstart

.PS-Größe Die Klasse gibt Polsterung von der linken Seite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

Polsterung

.PE-Größe Die Klasse gibt Polsterung von der rechten Seite, die Größe kann durch 0/1/2/3/4/5 ersetzt werden.

Code

Benutzen .PT-0/1/2/3/4/5 Klasse für verschiedene Bildschirme einfach verwenden .PT-XXL/LG/MD/SM-0/1/2/3/4/5.

Abschluss

Um automatische Margen zu verwenden .MT-Auto, .MS-Auto, .me-auto Klassen, um die Marge entsprechend der Größe zu verleihen, .MT/B/E/S-0/1/2/3/4/5,und Randklassen mit Größen auf unterschiedlichem Bildschirm hinzufügen .mt // b/e/s-xxl/lg/md/sm-0/1/2/3/4/5. Für die Polsterung gemäß den Gebrauchsgrößen .pt/b/e/s-0/1/2/3/4/5 oder wenn Sie Polsterung gemäß verschiedenen Bildschirmgrößen geben möchten .pt // b/e/s-xxl/lg/md/sm-0/1/2/3/4/5.

Power Shell

Wie funktioniert der Befehl „Get-Process“ in Powershell?

Das CMDLET „Get-Process“ in PowerShell erhält den laufenden Prozess sowohl auf Remote- als auch auf ...

Jean Dengler

Java

Beispiele für Java Treemap

Praktisches Tutorial über die Methoden zum Einfügen, Entfernen und Drucken der Elemente des Java -Tr...

Stephan Harms

Oracle -Datenbank

Was ist Oracle Apex?

Oracle Apex ist eine webbasierte IDE zum Erstellen und Bereitstellen von Web- und mobilen Anwendunge...

Jean Dengler