Bootstrap 4 -Dienstprogramme

Bootstrap 4-Dienstprogramme

Bootstrap 4 verfügt über viele Hilfs-/Hilfsklassen, um Elemente schnell zu stylen, ohne CSS-Code zu verwenden.

Grenzen

Verwenden Sie die borderKlassen, um Rahmen zu einem Element hinzuzufügen oder daraus zu entfernen:

Randfarbe

Fügen Sie dem Rahmen eine Farbe mit einer der kontextbezogenen Rahmenfarbenklassen hinzu:

Grenzradius

Fügen Sie einem Element mit den roundedKlassen abgerundete Ecken hinzu:

Float und Clearfix

Bewegen Sie ein Element nach rechts mit der .float-rightKlasse oder nach links mit .float-left, und löschen Sie Floats mit der .clearfixKlasse:

Reaktionsschnelle Schwimmer

Lassen Sie ein Element abhängig von der Bildschirmbreite nach links oder rechts schweben, mit den responsiven Float-Klassen ( .float-*-left|right- wobei * sm(>=576px), md(>=768px), lg(>=992px) oder xl(>=1200px) ist):

Zentrieren

Zentrieren Sie ein Element mit der .mx-autoKlasse (addiert margin-left und margin-right: auto):

Breite

Legen Sie die Breite eines Elements mit den w-*-Klassen ( .w-25, .w-50, .w-75, .w-100, .mw-100) fest:

Höhe

Legen Sie die Höhe eines Elements mit den h-*-Klassen ( .h-25, .h-50, .h-75, .h-100, .mh-100) fest:

Abstand

Bootstrap 4 verfügt über eine große Auswahl an responsiven Margin- und Padding-Utility-Klassen. Sie funktionieren für alle Haltepunkte: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) oder xl(>=1200px)):

Die Klassen werden in folgendem Format verwendet: {property}{sides}-{size}for xsund {property}{sides}-{breakpoint}-{size}for sm, md, lg, und xl.

Wo Eigentum ist eines von:

• m - setzt margin
• p - setzt padding

Wobei Seiten eine ist von:

• t- setzt margin-topbzwpadding-top
• b- setzt margin-bottombzwpadding-bottom
• l- setzt margin-leftbzwpadding-left
• r- setzt margin-rightbzwpadding-right
• x- setzt sowohl padding-leftund padding-rightals auch margin-leftundmargin-right
• y- setzt sowohl padding-topund padding-bottomals auch margin-topundmargin-bottom
• leer - setzt ein marginoder paddingauf alle 4 Seiten des Elements

Wobei die Größe eine von ist:

• 0- setzt marginoder paddingzu0
• 1- setzt marginoder paddingauf .25rem(4px wenn die Schriftgröße 16px ist)
• 2- setzt marginoder paddingauf .5rem(8px wenn die Schriftgröße 16px ist)
• 3- setzt marginoder paddingauf 1rem(16px wenn die Schriftgröße 16px ist)
• 4- setzt marginoder paddingauf 1.5rem(24px wenn die Schriftgröße 16px ist)
• 5- setzt marginoder paddingauf 3rem(48px wenn die Schriftgröße 16px ist)
• auto- marginauf automatisch stellen

Hinweis: Ränder können auch negativ sein, indem Sie ein "n" vor size hinzufügen :

• n1- setzt marginauf -.25rem(-4px wenn die Schriftgröße 16px ist)
• n2- setzt marginauf -.5rem(-8px wenn die Schriftgröße 16px ist)
• n3- setzt marginauf -1rem(-16px wenn die Schriftgröße 16px ist)
• n4- setzt marginauf -1.5rem(-24px wenn die Schriftgröße 16px ist)
• n5- setzt marginauf -3rem(-48px wenn die Schriftgröße 16px ist)

Weitere Abstandsbeispiele

Schatten

Verwenden Sie die shadow-Klassen, um einem Element Schatten hinzuzufügen:

Vertikal ausrichten

Verwenden Sie die align-Klassen, um die Ausrichtung von Elementen zu ändern (funktioniert nur bei Inline-, Inline-Block-, Inline-Table- und Table-Cell-Elementen):

Responsive Einbettungen

Erstellen Sie responsive Video- oder Diashow-Einbettungen basierend auf der Breite des übergeordneten Elements.

Fügen Sie das .embed-responsive-itemzu allen eingebetteten Elementen (wie <iframe> oder <video>) in einem übergeordneten Element mit .embed-responsiveeinem Seitenverhältnis Ihrer Wahl hinzu:

Sichtweite

Verwenden Sie die Klassen .visibleoder .invisible, um die Sichtbarkeit von Elementen zu steuern. Hinweis: Diese Klassen ändern den CSS-Anzeigewert nicht. Sie fügen nur visibility:visibleoder hinzu visibility:hidden:

Position

Verwenden Sie die .fixed-topKlasse, um jedes Element zu fixieren/ oben auf der Seite zu bleiben:

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.