Bootstrap -knapper | Forklart
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:
Å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:
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:
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
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:
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:
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.