TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage knapper i Bootstrap 5?

14

Knapper er et av grunnelementene i ethvert UI -rammeverk. I vår andre artikkel har vi sett mange eksempler på Bootstrap 3 -knapper. I Bootstrap 4 er det mindre endringer i knappeklassene for å forbedre brukeropplevelsen. For eksempel blir standardknappklassen ".btn-dafault" endret til en sekundær knapp med klassen ".btn-sekundær" og den ekstra lille knappeklassen ".btn-xs" blir droppet. Det er ikke mye endringer til knapper i Bootstrap 5. I denne opplæringen, la oss utforske mer om hvordan du lager forskjellige typer knapper med Bootstrap 5.

Grunnleggende om Bootstrap -knapper

Husk følgende punkter før du oppretter knapper:

  • For å identifisere et element som en knapp, må du inkludere ".btn" -klassen som minimum.
  • Ytterligere klasser bestemmer bare ytterligere styling av knappen i tillegg til klassen ".btn".
  • ".Btn" -klassen kan legges til HTML -elementer som
  • Du trenger bare Bootstrap -skriptfilene for delen "Bootstrap -plugins" for å lage vekslingseffekt, andre knapper fungerer ganske enkelt med CSS. Se startmalen Bootstrap 5 for mer informasjon.

Grunnleggende standardknapper

Du kan lage forskjellige farger på knapper ved å bruke bakgrunnsverktøysklasser til ".btn" -klassen.

  • Primær – dette er den primære eller hovedknappen som brukes med blå farge.
  • Sekundær – den hvite fargeknappen er en sekundær eller alternativ knapp.
  • Suksess – grønn knapp som brukes til positive handlinger.
  • Info – Lyseblå knapp som brukes til å vise informasjon.
  • Advarsel – gul knapp brukes til advarselhandlinger.
  • Fare – Rød knapp brukes for feilhandlinger.
  • Lys – Knapp med lys grå farge.
  • Mørk – Knapp med mørk bakgrunn.
  • Link – I tillegg til bakgrunnsfarger, kan du også lage en lenkknapp uten bakgrunn.

Den primære knappekoden skal 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 forklart identifiserer ".btn" -klassen elementet som en knapp, og ".btn-primær" -klasse brukes til å lage knappen med primær (blå) farge. På samme måte er andre knappekoder gitt nedenfor:

<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 siste elementet er en lenkknapp som vil se ut som en tekstkobling på skjermen, men fungere som en knapp når den klikkes på eller sveves over. Standardknappene vil se ut som nedenfor i nettleseren:

Hvordan lage knapper i Bootstrap 5?

Knappemerker – Bruke knappklasser med forskjellige tagger

Knappklasser støttes i

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon