Ako vytvoriť odznaky Bootstrap 5?

Vytváranie odznakov v Bootstrap 5 je jednoduché a pohodlné. Môžete to urobiť takto:

1. Zahrnúť Bootstrap CSS:

Uistite sa, že ste do dokumentu HTML vložili súbor CSS Bootstrap.

2. Použiť triedy odznakov:

Bootstrap 5 poskytuje niekoľko tried odznakov, ktoré môžete použiť na prvky na vytvorenie odznakov. Najbežnejšie používané triedy odznakov sú:

- `.badge`:Toto je základná trieda odznaku. Vytvára malý, štvorcový odznak.

- `.badge-pill`:Táto trieda vytvára zaoblený odznak.

- `.badge-primary`, `.badge-secondary`, `.badge-success`, `.badge-danger`, `.badge-warning`, `.badge-info`, `.badge-light`, a `.badge-dark`:Tieto triedy aplikujú na odznak rôzne farebné štýly.

3. Použiť triedu odznaku:

Ak chcete vytvoriť odznak, pridajte príslušnú triedu odznaku do prvku HTML, ktorý chcete previesť na odznak. Tu je príklad:

```html

Novinka

```

Tým sa vytvorí odznak v primárnom štýle s textom „Nový“.

4. Pridať textový obsah:

Umiestnite text alebo obsah, ktorý chcete zobraziť v rámci odznaku, medzi úvodnú a záverečnú značku prvku.

5. Prispôsobenie farieb odznaku:

Bootstrap 5 vám umožňuje prispôsobiť farbu pozadia odznaku pomocou ďalších tried. Napríklad:

```html

Úspech

```

Tým sa vytvorí odznak v štýle úspechu s textom „Úspech“. Podobne môžete použiť iné farebné triedy na prispôsobenie vzhľadu odznaku.

6. Odznaky pozícií:

Odznaky môžete umiestniť pomocou pomocných tried odznakov `.badge-top`, `.badge-bottom`, `.badge-start` a `.badge-end`. Tieto triedy vám umožňujú umiestniť odznaky na konkrétne pozície vzhľadom na prvok, ku ktorému sú pripojené.

7. Viaceré odznaky:

K prvku môžete pridať viacero odznakov použitím viacerých tried odznakov. Odznaky budú zobrazené vedľa seba.

8. Vlastné veľkosti odznakov:

Štandardne sú odznaky malé. Veľkosť odznakov si však môžete prispôsobiť pomocou tried `.badge-lg` a `.badge-sm` pre väčšie a menšie odznaky.

Pamätajte, že odznaky by ste mali používať s mierou a na informatívne účely alebo účely indikujúce stav, aby ste sa vyhli vizuálnemu neporiadku.

Pomocou týchto krokov môžete jednoducho vytvárať a prispôsobovať odznaky pomocou Bootstrap 5.

• Predchádzajúca strana: Ako vytvoriť tému Bootstrap od nuly? 
• Ďalšia strana: Ako vytvoriť tlačidlá v Bootstrap 5?