Hur skapar jag knappar i Bootstrap 5?
Knappar är en av grundelementen i alla UI -ramar. I vår andra artikel har vi sett många exempel på Bootstrap 3 -knappar. I Bootstrap 4 finns det mindre ändringar i knappklasserna för att förbättra användarupplevelsen. Till exempel ändras standardknappklassen ".btn-dafault" till en sekundär knapp med klassen ".btn-sekundär" och den extra små knappklassen ".btn-xs" tappas. Det är inte så många ändringar till knappar i Bootstrap 5. I den här självstudien, låt oss utforska mer om hur du skapar olika typer av knappar med Bootstrap 5.
Grunderna i Bootstrap -knappar
Kom ihåg följande punkter innan du skapar knappar:
- För att identifiera något element som knapp måste du inkludera ".btn" -klassen som minimum.
- Ytterligare klasser avgör bara ytterligare styling av knappen utöver klassen ".btn".
- Klassen ".btn" kan läggas till HTML -element som
- Du behöver bara Bootstrap -skriptfilerna för avsnittet "Bootstrap -plugins" för att skapa växlingseffekt, andra knappar fungerar helt enkelt med CSS. Se startmallen Bootstrap 5 för mer information.
Grundläggande standardknappar
Du kan skapa olika färger på knappar med hjälp av bakgrundsklasser till ".btn" -klass.
- Primär – det här är den primära eller huvudknappen som används med blå färg.
- Sekundär – den vita färgknappen är en sekundär eller alternativ knapp.
- Framgång – grön knapp som används för positiva åtgärder.
- Info – Ljusblå knapp som används för att visa information.
- Varning – gul knapp används för varningsåtgärder.
- Fara – Röd knapp används för felåtgärder.
- Ljus – Knapp med ljusgrå färg.
- Mörk – Knapp med mörk bakgrund.
- Länk – Förutom bakgrundsfärger kan du också skapa en länkknapp utan bakgrund.
Den primära knappkoden ska se ut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- End of Button -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Som förklarats identifierar ".btn" -klassen elementet som en knapp och ".btn-primär" -klass används för att skapa knappen med primär (blå) färg. På samma sätt ges andra knappkoder nedan:
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-link">Link</button>Det sista objektet är en länkknapp som kommer att se ut som en textlänk på displayen men fungera som en knapp när den klickas på eller svävar över. Standardknapparna kommer att se ut nedan i webbläsaren:
Knapptaggar – Använda knappklasser med olika taggar
Knappklasser stöds i
Inspelningskälla: www.webnots.com