Knappestiler i Bootstrap 5 | Forklart

Å sette inn vanlige knapper på websidene dine kan være kjedelig. Å gi dem en viss stil vil legge opp til forskjønnelsen av nettstedet ditt. Hvis du utvikler nettstedet ditt ved å bruke Bootstrap 5, er det ikke så stort. Ulike klasser er tilgjengelige i denne bootstrap -versjonen som kan utføre oppgaven med knappestyling i bare en enkelt kodelinje. For å lære forskjellige måter å style -knapper i Bootstrap 5, les artikkelen til slutten.

Legge til farger til knapper

Du kan legge til en bakgrunnsfarge til knapper som ikke bare legger skjønnhet til dem, men som også formidler formålet bak knappen. For å gjøre det kan du bruke noen av disse gitte klassene som er, .btn, .btn-primary, .BTN-suksess, .BTN-Info, .BTN-sekundær, .BTN-advarsel, .Btn-Danger, .btn-mørk, .BTN-lys.

Hvordan legge til farger i knappen ved hjelp av Bootstrap 5

I eksemplet nedenfor skal vi demonstrere noen av de ovennevnte klassene.

Html

Knapp
Knapp
Knapp

Ovennevnte kode genererer tre knapper, først med en grunnleggende styling, for det andre som har en grønn bakgrunnsfarge og indikerer en positiv handling og den siste som har en blå bakgrunnsfarge og representerer en viktig handling. Legg merke til at vi har brukt .BTN -klasse når du styler hver knapp fordi dette gir viss polstring til knappen sammen med en grunnleggende stil.

Produksjon

Du kan prøve andre klasser for å se hvordan de styler knappene.

Knapper som lenker

Du kan også koble andre websider eller kilder til knapper i Bootstrap 5.

Hvordan omdirigere en bruker til en annen kilde ved hjelp av knapp

Anta at du vil omdirigere brukerne dine til en annen kilde ved hjelp av en knapp.

Html

Lenke

Her kan du ganske enkelt gi koblingen til den andre kilden til Href -attributtet til ankerkoden. Dessuten vil knappen som er opprettet i ovennevnte kodebit ha en lyseblå farge og grunnleggende stil.

Produksjon

Slik kan du lage knapper som lenker.

Inngangsknapp

Bortsett fra ankerkodene kan du også bruke ovennevnte knappeklasser på innganger også. Som du vet kan taggen gjengi noen typer som å sende inn eller tilbakestille, kan du derfor bruke styling på noen av disse inngangstypene.

Hvordan bruke knappeklasser på innganger

Slik kan du bruke knappeklasser på innganger.

Ovennevnte vil generere tre typer inngangsknapper med hver knapp med en annen bakgrunnsfarge.

Produksjon

På denne måten kan du bruke klasser tilknyttet knapper på forskjellige inngangstyper.

Knappestørrelse

I noen scenarier ønsker vi å lage forstørrede knapper, i mellomtiden, i andre tilfeller, ønsker vi det motsatte. Ved å bruke klassene koblet til størrelsene på knapper kan vi oppnå denne oppgaven.

Hvordan du endrer knappestørrelser i bootstrap 5

Tenk på eksemplet nedenfor for å forstå hvordan du lager knapper i forskjellige størrelser.

Html

Liten
Medium
Stor

I koden ovenfor genererer vi tre knapper med henholdsvis små, mellomstore og store størrelser. Alle knappene har også fått en viss stil.

Produksjon

Dette er knapper i forskjellige størrelser.

Skissere knapper

Du kan også skissere knappene dine ved hjelp av .BTN-UTLINE klasse i kombinasjon med fargeklasser for å style knappene dine.

Hvordan gi oversikt til knapper i bootstrap 5

Anta at du vil skissere knappen din ved å bruke Bootstrap 5, følg deretter kodebiten nedenfor.

Sende inn

Ovennevnte vil generere en knapp med en grønn omriss, dessuten vil du bli brukt når du tar musen over knappen en sveveeffekt vil bli brukt som vil gi den en bakgrunnsfarge som tilsvarer fargeklassen som brukes hver gang musen blir brakt over den.

Produksjon

Knappen har fått en disposisjon sammen med en sveveeffekt.

Aktive og funksjonshemmede knapper

For å legge skjønnhet til knappen din kan du enten legge til tilstander som aktiv eller deaktivert på knappene eller style tilstandene på knappen.

Hvordan lage en knapp diabarert i bootstrap 5

La oss generere to knapper, den ene med en aktiv tilstand og den andre med funksjonshemmet tilstand.

Html

Aktiv
Funksjonshemmet

I koden ovenfor har den første knappen en grunnleggende styling sammen med en lyseblå bakgrunn og en aktiv tilstand, i mellomtiden har den andre blitt deaktivert og har samme stil som den første. Dessuten har begge knappene hvit tekstfarge.

Produksjon

Dette er knapper med de aktive og funksjonshemmede tilstandene.

Blokknivåknapper

For å lage knapper som tar opp hele det horisontale rommet, må du tilordne .D-grid Klasse til DIV som inneholder knappelementet, tilordner i mellomtiden .BTN-Block klasse til knappelementet.

Hvordan lage en blokknivå-knapp ved hjelp av Bootstrap 5

La oss opprette en blokknivå-knapp.

Html

Blokknivå-knapp

Her genererer vi en full bredde-knapp ved hjelp av .D-nettklasse på overordnede element som får det til å spenne over hele bredden på overordnet element.

Produksjon

Ovennevnte utgang viser en blokknivå-knapp.

Konklusjon

Knapper kan styles på flere måter ved å bruke de forskjellige bootstrap 5 -klassene tilknyttet knapper. For eksempel kan du legge til farger i knapper ved hjelp av klasser som .btn-primary, .BTN-suksess, .BTN-Info, etc. Videre kan du bruke andre klasser tilgjengelig for å lage knapper som lenker, gi dem en viss størrelse, en disposisjon eller gjøre dem blokknivå. Denne bloggen diskuterer forskjellige stiler som du kan gi til knapper ved hjelp av Bootstrap 5.