Ako vytvoriť Bootstrap 5 Breadcrumbs?

Vytváranie strúhanky je nevyhnutné na navigáciu v obsahu v logickej hierarchii. Bootstrap 5 poskytuje jednoduchý spôsob, ako to dosiahnuť pomocou prvkov `ol` a `li`. Tu je podrobný návod, ako vytvoriť strúhanku Bootstrap 5:

Krok 1:Vytvorte základnú štruktúru

Začnite vytvorením usporiadaného zoznamu (`

`) prvok. Každá položka v tomto zozname predstavuje odkaz v strúhanke.

```html

```

Krok 2:Pridajte odkazy na navigáciu

Vo vnútri „

`, pridajte `
1. ` prvky pre každý odkaz v strúhanke. Pomocou atribútu `class` priraďte triedu ,,breadcrumb-item" ku každému ``
2. ` prvok.

   Pre poslednú položku strúhanky pridajte ďalšiu triedu „active“.

   ```html

   1. Domov
   2. Knižnica
   3. Údaje

   ```

   Krok 3:Pridajte atribúty odkazu

   Ak by vaše odkazy v strúhanke mali presmerovať na iné stránky, môžete pridať potrebné atribúty HTML k značkám ukotvenia (`) v `

3. ` prvky. Ak chcete napríklad vytvoriť odkaz na domovskú stránku, môžete pridať atribút „href“ a zadať adresu URL odkazu.

   ```html

4. Domov

```

Krok 4:Prispôsobte si strúhanku

Bootstrap poskytuje niekoľko tried modifikátorov na prispôsobenie vzhľadu vašej strúhanky. Na ďalšie vylepšenie strúhanky môžete použiť nasledujúce triedy:

* `.breadcrumb-arrows`:Pridáva šípky medzi položky navigácie

* `.breadcrumb-dots`:Pridáva bodky medzi položky v strúhanke

* `.breadcrumb-slash`:Pridá lomky medzi položky v strúhanke

* `.breadcrumb-dashed`:Pridá prerušované podčiarknutie k aktívnej položke navigácie

Krok 5:Zobrazte strúhanku

Umiestnite svoje `

` s odkazmi na navigáciu v požadovanom umiestnení na vašej stránke. Bootstrap automaticky upraví štruktúru strúhanky na základe vášho prispôsobenia.

Príklad výstupu

Tu je príklad toho, ako môže vyzerať vaša strúhanka Bootstrap 5:

```html

1. Domov
2. Knižnica
3. Údaje

```

Podľa týchto krokov môžete jednoducho vytvoriť a prispôsobiť strúhanku Bootstrap 5, aby ste zlepšili používateľskú skúsenosť a poskytli jasnú navigáciu pre váš web alebo webovú aplikáciu.

• Predchádzajúca strana: Ako vytvoriť odznaky Bootstrap 5? 
• Ďalšia strana: Ako vytvoriť tlačidlá v Bootstrap 5?