TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag knappar i Bootstrap 5?

2

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:

Hur skapar jag knappar i Bootstrap 5?

Knapptaggar – Använda knappklasser med olika taggar

Knappklasser stöds i

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer