* počítačové znalosti >> otázka >> PC Riešenie problémov >> .

Ako vytvoriť tlačidlá v Bootstrap 5?

Na vytvorenie tlačidiel v Bootstrap 5 môžete použiť prvok `

```

Tým sa vytvorí predvolené modré tlačidlo.

Vlastné farebné tlačidlá:

Na vytvorenie tlačidiel s rôznymi farbami môžete použiť triedy `btn-{color}`, kde `{color}` možno nahradiť jednou z nasledujúcich:

- primárny

- sekundárny

- úspech

- nebezpečenstvo

- POZOR

- info

- svetlo

- tmavý

Ak chcete napríklad vytvoriť červené tlačidlo:

```html

```

Tlačidlá obrysu:

Na vytvorenie tlačidiel osnovy použite triedy `btn-outline-{color}`. Ak chcete napríklad vytvoriť ohraničené červené tlačidlo:

```html

```

Zakázané tlačidlá:

Ak chcete tlačidlo zakázať, pridajte k nemu atribút „disabled“.

```html

```

Veľkosti tlačidiel:

Veľkosť tlačidiel môžete zmeniť aj pomocou tried `btn-{size}`, kde `{size}` môže byť jedna z nasledujúcich:

- sm (malý)

- lg (veľký)

Ak chcete napríklad vytvoriť malé tlačidlo:

```html

```

Vlastný štýl:

Vzhľad tlačidiel môžete ďalej prispôsobiť pridaním vlastných štýlov CSS.

Tu je tabuľka, ktorá sumarizuje triedy tlačidiel Bootstrap 5 a ich účinky:

| Trieda | Účinok |

|---|---|

| `btn` | Vytvorí základné tlačidlo. |

| `btn-primary` | Vytvorí modré tlačidlo. |

| `btn-sekundárne` | Vytvorí sivé tlačidlo. |

| "btn-úspech" | Vytvorí zelené tlačidlo. |

| `btn-nebezpečenstvo` | Vytvorí červené tlačidlo. |

| `btn-warning` | Vytvorí žlté tlačidlo. |

| `btn-info` | Vytvorí svetlomodré tlačidlo. |

| "btn-light" | Vytvorí biele tlačidlo. |

| `btn-dark` | Vytvorí čierne tlačidlo. |

| `btn-outline-{color}` | Vytvorí tlačidlo obrysu v zadanej farbe. |

| `btn-{veľkosť}` | Zmení veľkosť tlačidla. |

Môžete kombinovať viacero tried a vytvárať zložitejšie štýly tlačidiel. Napríklad nasledujúci kód vytvorí malé červené tlačidlo s obrysmi:

```html

```

Predchádzajúca strana: Ako vytvoriť Bootstrap 5 Breadcrumbs?
Ďalšia strana: Ako vytvoriť skupinu tlačidiel Bootstrap 5?

Ako vytvoriť tlačidlá v Bootstrap 5?

Odporúčané články

Najnovšie články

PC Riešenie problémov