Grenzklassen in Bootstrap 5 | Erklärt

Borders werden verwendet, um das Element oder das Bild anzugeben, mit dem der Benutzer die Dinge besser verstehen kann. Grenzen werden von Bildern, Textareas und verschiedenen Feldern verwendet, um sie gemäß den Benutzeranforderungen zu stylen.

In diesem Artikel erhalten Sie detaillierte Kenntnisse über Bootstrap 5 -Klassen für

• Rand hinzufügen
• Rand entfernen
• Grenzfarben
• Rahmenbreite
• Grenzgrößen
• Radiusgrößen

Grenzklassen in Bootstrap 5

In Bootstrap 5 Grenzen werden durch Hinzufügen erstellt .Grenze Klasse zu einem DIV- oder Bild -Tag oder einer Form oder Textbereich.

Klassen zur Anwendung von Grenze

Bootstrap 5 enthält einige Klassen, um Rand für jedes HTML -Element anzugeben, das unten erläutert wird:

Grenze

.Grenze Die Klasse wird verwendet, um Grenzen auf allen vier Seiten der Box anzuwenden.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So erstellen Sie Grenzen für alle vier Seiten.

Grenze

.Grenze Die Klasse wird verwendet, um den Rand auf der Oberseite der Box anzuwenden.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So erstellen Sie einen Rand für die Oberseite.

Grenzboden

.Grenzboden Die Klasse wird verwendet, um den Rand auf der unteren Seite der Box anzuwenden.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So erstellen Sie einen Rand für die untere Seite.

Grenzstart

.Grenzstart Die Klasse wird verwendet, um den Rand auf der linken Seite der Box anzuwenden.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So erstellen Sie einen Rand für die linke Seite.

Grenzende

.Border-End Die Klasse wird verwendet, um den Rand auf der rechten Seite der Box anzuwenden.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So erstellen Sie einen Rand für die rechte Seite.

Klassen, um den Rand zu entfernen

Um den Rand von jeder Seite zu entfernen, fügen Sie einfach hinzu -0 zu einer beliebigen Grenze hinzufügen Klasse hinzuzufügen

Von oben

Um den Rand von oben zu entfernen .Grenztop-0 mit .Grenze Klasse.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So entfernen Sie den Rand von oben.

Vom Boden

Um den Rand vom Boden zu entfernen .Grenzboden-0 mit .Grenze Klasse.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So entfernen Sie den Rand von unten.

Von links

Um den Rand von links zu entfernen .Grenzstart-0 mit .Grenze Klasse.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So entfernen Sie den Rand von der linken Seite.

Aus rechts

Um den Rand nach rechts zu entfernen .Border-End-0 mit .Grenze Klasse.

Code

Grenzklassen

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Ausnahme von Ipsum Culpa NEque Commodi Modi Eaque?

So entfernen Sie den Rand von der rechten Seite.

Grenze Farbkurse

Um Grenzfarben hinzuzufügen, fügen Sie einfach hinzu .Grenz-Primary/Info/Erfolg/Gefahr/Warnung/Dunkelheit mit .Grenze Klasse.

Code

Grenzklassen

So verleihen Sie Ihren Grenzen Farbe.

Grenzbreite Klassen

Um Ihrem Randverbrauch eine Dicke zu verleihen .Grenze-1/2/3/4/5 Klasse mit .Grenze Klasse.

Code

Grenzklassen

So geben Sie Ihrem Rand eine Dicke.

Grenzradius

Um den Radius des Randes anzugeben, verwenden Sie .gerundet, .abgerundetem/Ende/unten/Start/Kreis/Pille Klassen.

Code

Grenzklassen

Ausgang

Um einen abgerundeten Kreis und abgerundete Pille zu schaffen:

Code

Grenzklassen

So geben Sie den Grenzradius an.

Radiusgrößen

Um die Radiusgröße des Randes anzugeben, fügen Sie einfach hinzu .Abgerundet-0/1/2/3 Klassen.

Code

Grenzklassen

Ausgang

So geben Sie die Grenzgröße an.

Abschluss

Um einem Div oder Element einen Rand zu geben, fügen Sie a hinzu .Grenze Klasse. Um einen Seitenrand hinzuzufügen, fügen Sie hinzu .Border-Top/Bottom/End/Start Klasse zusammen mit .Grenze Klasse und um den Rand von einer Seite zu entfernen, nur hinzufügen -0. So geben Sie die Grenzfarbe an .Grenz-Primary/Erfolg/Gefahr/Info/Warnung/Dunkel/Licht Klasse.
Um den Rand eine Dicke zu verleihen, fügen Sie hinzu .Grenze-1/2/3/4/5, Um den Grenzradius anzugeben, fügen Sie hinzu .gerundet, .abgerundetem/unten/Ende/Start/Kreis/Pille Klasse. Um die Größe des Randradius anzugeben, fügen Sie hinzu .Abgerundet-0/1/2/3 Klasse.