Bootstrap -knapper | Forklart

Bootstrap er et CSS -ramme som hjelper til med å utvikle responsive webapplikasjoner. Den har forhåndsdefinerte klasser for enkle layoutvalg, for eksempel "kort”Klasse som brukes til å lage kort,“bord”Klasse som gir grunnleggende stiler til tabellelementet, og mange flere. Mer spesifikt, “btn”Klasse er en av dem som brukes til å lage knapper.

Denne artikkelen vil instruere deg:

• Hvordan lage knapper i bootstrap?
• Hvordan lage disposisjonsknapper i bootstrap?
• Hvordan justere bootstrap -knappestørrelser?
• Hvordan lage en blokknivå i Bootstrap?
• Hvordan lage aktive tilstandsknapper i bootstrap?
• Hvordan lage funksjonshemmede tilstandsknapper i bootstrap?

Hvordan lage knapper i bootstrap?

Bootstrap “btn”Klasse brukes til å lage knapper. For å legge til stilknapper, kan du bruke “btn”Klasse med fargeklassen, for eksempel“BTN-suksess”For å opprette en grønn knapp.

I HTML, “”,“”, Og“”Tagger med typen”knapp”Brukes til å lage knapper. “btn”Klasse har forhåndsdefinert styling som gir grunnleggende styling til knappelementene.

For et klart konsept, sjekk ut eksemplet nedenfor.

Eksempel

Følg trinnene i HTML -filen i trinnene for å lage knapper ved hjelp av forskjellige tagger:

• Legg til "”Og“”Elementer og tilordne dem”btn”Og“btn-primary”Klasser.
• Deretter legger du til en "”Tag med typen”knapp”. Tilordne det “btn”Og“BTN-suksess”For styling som de første to knappene som blå, og den tredje som grønn:

Sende inn
Åpen

Produksjon

Hvordan lage disposisjonsknapper i bootstrap?

For å legge til knappeskisser, bootstrap “BTN-UTLINE-*”Klasse brukes. I syntaks, “*”Her representerer disposisjonsfargen. For eksempel, "BTN-UTLINE-DANGER”Plasser den røde omrisset,”BTN-UTLINE-PRIMARI”Setter den blå omrisset, og mer.

Analyser koden gitt nedenfor:

NESTE
Avbryt
Suksess

Det kan observeres at "NESTE”-Knappen har en blå omriss,“Avbryt”-Knappen med rød disposisjon, og“Suksess”-Knappen er stylet med en grønn omriss:

Hvordan justere bootstrap -knappestørrelser?

Noen bootstrap -klasser blir brukt for å justere knappestørrelsene, for eksempel:

• “btn-lg”Klasse brukes for å opprette en stor knapp. Denne klassen kan øke skriftstørrelsen og polstringen.
• “BTN-MD”Oppretter en mellomstor knapp.
• “Btn-SM”Oppretter en liten knapp.

Eksempel

Nå lager vi tre knapper med forskjellige størrelser og selvforklarende navn:

Stor
medium
Liten

Produksjon

Hvordan lage en blokknivå i Bootstrap?

Blokknivåknappene er de som har full bredde størrelse. For å lage blokknivåknappene, “BTN-Block”Klasse brukes som følger

knapp
knapp

Produksjon

Hvordan lage aktive tilstandsknapper i bootstrap?

De aktive tilstandsknappene refererer til knappene som for tiden er aktive. Disse knappene er litt mørkere enn normalt. For å lage slike knapper, bootstrap “aktiv”Klasse brukes.

Eksempel

Nedenfor koden oppretter to knapper. Den første er i normal tilstand, mens den andre blir brukt med "aktiv”Klasse:

Suksess
Suksess

Produksjon

Hvordan lage funksjonshemmede tilstandsknapper i bootstrap?

De funksjonshemmede tilstandsknappene refererer til knappene som er uklikkelige og ubrukelige. I bootstrap, "funksjonshemmet”Klasse brukes til å opprette en funksjonshemmet tilstandsknapp. “funksjonshemmet”Attributt kan også brukes til dette formålet.

Eksempel

Sjekk ut eksemplet nedenfor:

• Den første knappen er ikke i funksjonshemmet tilstand.
• Den andre bruker "funksjonshemmet”Klasse for å opprette en funksjonshemmet tilstandsknapp.
• Den tredje bruker “funksjonshemmet" Egenskap:

Avbryt
Suksess
Suksess

Produksjon

Vi har dekket forskjellige aspekter relatert til bootstrap -knapper og deres styling i CSS.

Konklusjon

“btn”Klasse brukes til å lage bootstrap -knapper med en enkel design. For å lage fargede og disposisjonsknapper, "btn-*”Og“BTN-UTLINE-*”Klasser brukes der“*”Symboliserer enhver fargeklasse. For eksempel, "BTN-advarsel”Oppretter en gul knapp,”BTN-UTLINE-WARNING”Oppretter en gul skissert knapp, og mange flere. For å gjøre knappene aktive eller deaktivert, brukes henholdsvis "aktive" og "deaktiverte" henholdsvis. Dette innlegget ga en omfattende guide til bootstrap -knappene.