Den här artikeln kommer att instruera dig:
- Hur gör man knappar i Bootstrap?
- Hur skapar man konturknappar i Bootstrap?
- Hur justerar man storleken på Bootstrap-knapparna?
- Hur man gör en blocknivåknapp i Bootstrap?
- Hur skapar man Active State-knappar i Bootstrap?
- Hur skapar man inaktiverade tillståndsknappar i Bootstrap?
Hur gör man knappar i Bootstrap?
The Bootstrap ' btn Klassen används för att skapa knappar. För att lägga till stiliserade knappar kan du använda ' btn ' klass med färgklassen, som ' btn-framgång ” för att skapa en grön knapp.
I HTML är '
För ett tydligt koncept, kolla in exemplet nedan.
Exempel
Följ stegen i HTML-filen för att skapa knappar med olika taggar:
- Lägg till '
' och ' 'element och tilldela dem' btn ' och ' btn-primär ' klasser. - Lägg sedan till ett '
' tagg med typen ' knapp ”. Tilldela den ' btn ' och ' btn-framgång ” för styling som de två första knapparna som blå och den tredje som gröna:
< a klass = 'btn btn-primär' href = '#' > Öppet < / a >
< inmatning typ = 'knapp' klass = 'btn btn-framgång' värde = 'Sök' >
Produktion
Hur skapar man konturknappar i Bootstrap?
För att lägga till knappkonturer, bootstrap ' btn-outline-* ” klass används. I sin syntax,' * ” representerar här konturfärgen. Till exempel, ' btn-outline-danger ' placerar den röda konturen, ' btn-outline-primary ” ställer in den blå konturen och mer.
Analysera koden nedan:
< knapp typ = 'knapp' klass = 'btn btn-outline-primary' >Nästa< / knapp >< knapp typ = 'knapp' klass = 'btn btn-outline-danger' >Avbryt< / knapp >
< knapp typ = 'knapp' klass = 'btn btn-outline-framgång' >Framgång< / knapp >
Det kan observeras att ' Nästa '-knappen har en blå kontur, ' Annullera '-knappen med röd kontur och ' Framgång knappen har en grön kontur:
Hur justerar man storleken på Bootstrap-knapparna?
Vissa Bootstrap-klasser används för att justera knappstorlekarna, till exempel:
- ' btn-lg ” klass tillämpas för att skapa en stor knapp. Denna klass kan öka teckenstorlek och utfyllnad.
- ' btn-md ” skapar en medelstor knapp.
- ' btn-sm ” skapar en liten knapp.
Exempel
Nu kommer vi att skapa tre knappar med olika storlekar och självförklarande namn:
< knapp typ = 'knapp' klass = 'btn btn-sekundär btn-lg' >Stor< / knapp >< knapp typ = 'knapp' klass = 'btn btn-varning btn-md' >medium< / knapp >
< knapp typ = 'knapp' klass = 'btn btn-fara btn-sm' >liten< / knapp >
Produktion
Hur man gör en blocknivåknapp i Bootstrap?
Knapparna på blocknivå är de som håller storleken i full bredd. För att skapa knapparna på blocknivå, ' btn-block ” klass används enligt följande
< knapp typ = 'knapp' klass = 'btn btn-varning btn-block' > knapp< / knapp >< knapp typ = 'knapp' klass = 'btn btn-sekundärt btn-block' >knapp< / knapp >
Produktion
Hur skapar man Active State-knappar i Bootstrap?
De aktiva tillståndsknapparna hänvisar till de knappar som för närvarande är aktiva. Dessa knappar är något mörkare än normalt. För att skapa sådana knappar, bootstrap ' aktiva ” klass används.
Exempel
Koden nedan skapar två knappar. Den första är i normalt tillstånd medan den andra appliceras med ' aktiva ' klass:
< knapp typ = 'knapp' klass = 'btn btn-framgång' >Framgång< / knapp >< knapp typ = 'knapp' klass = 'btn btn-framgång aktiv' >Framgång< / knapp >
Produktion
Hur skapar man inaktiverade tillståndsknappar i Bootstrap?
De inaktiverade tillståndsknapparna hänvisar till knapparna som är oklickbara och oanvändbara. I Bootstrap, ' Inaktiverad ” klass används för att skapa en inaktiverad statusknapp. den ' Inaktiverad ”-attributet kan också användas för detta ändamål.
Exempel
Kolla in exemplet nedan:
- Den första knappen är inte inaktiverad.
- Den andra använder ' Inaktiverad ” klass för att skapa en inaktiverad statusknapp.
- Den tredje använder ' Inaktiverad ' attribut:
< knapp typ = 'knapp' klass = 'btn btn-success inaktiverad' >Framgång< / knapp >
< knapp typ = 'knapp' klass = 'btn btn-framgång' inaktiverad>Framgång< / knapp >
Produktion
Vi har täckt olika aspekter relaterade till Bootstrap-knappar och deras stil i CSS.
Slutsats
den ' btn Klassen används för att skapa Bootstrap-knappar med en enkel design. För att skapa färgade knappar och konturer, ' btn-* ' och ' btn-outline-* ' klasser används där ' * ” symboliserar vilken färgklass som helst. Till exempel, ' btn-varning ' skapar en gul knapp, ' btn-outline-warning ” skapar en gul konturknapp och många fler. För att göra knapparna aktiva eller inaktiverade tillämpas klasserna 'aktiv' respektive 'inaktiverad'. Det här inlägget gav en omfattande guide om Bootstrap-knapparna.