Bootstrap 4 Utility

Bootstrap 4 Utility

Bootstrap 4 má mnoho pomocných/utilitních tříd pro rychlé stylování prvků bez použití kódu CSS.

Hranice

Použijte bordertřídy k přidání nebo odstranění ohraničení z prvku:

Barva ohraničení

Přidejte barvu k ohraničení pomocí kterékoli z kontextových tříd barev ohraničení:

Poloměr okraje

Přidejte zaoblené rohy k prvku s roundedtřídami:

Float a Clearfix

Uvolněte prvek doprava pomocí .float-righttřídy nebo doleva pomocí .float-lefta vymažte plovoucí prvky pomocí .clearfixtřídy:

Responzivní plováky

Plovoucí prvek doleva nebo doprava v závislosti na šířce obrazovky pomocí responzivních plovoucích tříd ( .float-*-left|right- kde * je sm(>=576px), md(>=768px), lg(>=992px) nebo xl(>=1200px)):

Zarovnání na střed

Vycentrujte prvek s .mx-autotřídou (přidá margin-left a margin-right: auto):

Šířka

Nastavte šířku prvku pomocí tříd w-* ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Výška

Nastavte výšku prvku pomocí tříd h-* ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Vzdálenost

Bootstrap 4 má širokou škálu responzivních tříd marže a výplně. Fungují pro všechny body přerušení: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) nebo xl(>=1200px)):

Třídy se používají ve formátu: {property}{sides}-{size}for xsa {property}{sides}-{breakpoint}-{size}for sm, md, lga xl.

Kde nemovitost je jedna z:

• m - sady margin
• p - sady padding

Kde strany je jedna z:

• t- sady margin-toppopřpadding-top
• b- sady margin-bottompopřpadding-bottom
• l- sady margin-leftpopřpadding-left
• r- sady margin-rightpopřpadding-right
• x- nastaví obojí padding-lefta padding-rightnebo margin-leftamargin-right
• y- nastaví obojí padding-topa padding-bottomnebo margin-topamargin-bottom
• blank - nastaví a marginnebo paddingna všech 4 stranách prvku

Kde velikost je jedna z:

• 0- nastaví marginnebo paddingdo0
• 1- nastaví marginnebo paddingna .25rem(4px, pokud je velikost písma 16px)
• 2- nastaví marginnebo paddingna .5rem(8px, pokud je velikost písma 16px)
• 3- nastaví marginnebo paddingna 1rem(16px, pokud je velikost písma 16px)
• 4- nastaví marginnebo paddingna 1.5rem(24px, pokud je velikost písma 16px)
• 5- nastaví marginnebo paddingna 3rem(48 pixelů, pokud je velikost písma 16 pixelů)
• auto- nastaví marginna auto

Poznámka: okraje mohou být také záporné přidáním "n" před velikost :

• n1- nastaví marginna -.25rem(-4px, pokud je velikost písma 16px)
• n2- nastaví marginna -.5rem(-8px, pokud je velikost písma 16px)
• n3- nastaví marginna -1rem(-16px, pokud je velikost písma 16px)
• n4- nastaví marginna -1.5rem(-24px, pokud je velikost písma 16px)
• n5- nastaví marginna -3rem(-48px, pokud je velikost písma 16px)

Další příklady mezer

Stíny

Použijte shadow-třídy k přidání stínů do prvku:

Vertikální zarovnání

Pomocí align-tříd můžete změnit zarovnání prvků (funguje pouze u prvků inline, inline-block, inline-table a table cell):

Responzivní vložení

Vytvořte responzivní vložení videa nebo prezentace na základě šířky nadřazeného prvku.

Přidejte .embed-responsive-itemdo libovolného prvku vložení (jako je <iframe> nebo <video>) v nadřazeném prvku s .embed-responsivepoměrem stran podle vašeho výběru:

Viditelnost

Pomocí tříd .visiblenebo .invisiblemůžete ovládat viditelnost prvků. Poznámka: Tyto třídy nemění hodnotu zobrazení CSS. Pouze přidávají visibility:visiblenebo visibility:hidden:

Pozice

Použijte .fixed-toptřídu k tomu, aby byl jakýkoli prvek pevný/zůstal v horní části stránky:

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.