Denne artikel vil instruere dig:
- Hvordan laver man knapper i Bootstrap?
- Hvordan opretter man Outline-knapper i Bootstrap?
- Hvordan justerer man bootstrap-knapstørrelser?
- Hvordan laver man en blokniveauknap i Bootstrap?
- Hvordan oprettes aktive tilstandsknapper i Bootstrap?
- Hvordan oprettes deaktiverede tilstandsknapper i Bootstrap?
Hvordan laver man knapper i Bootstrap?
Bootstrap' btn ” klasse bruges til at oprette knapper. For at tilføje stylede knapper kan du bruge ' btn ' klasse med farveklassen, såsom ' btn-succes ” for at oprette en grøn knap.
I HTML er '
For et klart koncept, tjek eksemplet nedenfor.
Eksempel
I HTML-filen skal du følge trinene for at oprette knapper ved hjælp af forskellige tags:
- Tilføje '
' og ' ' elementer og tildel dem ' btn ' og ' btn-primær ” klasser. - Tilføj derefter en ' ' tag med typen ' knap '. Tildel den ' btn ' og ' btn-succes ” til styling som de første to knapper som blå, og den tredje som grøn:
< -en klasse = 'btn btn-primær' href = '#' > Åben < / -en >
< input type = 'knap' klasse = 'btn btn-succes' værdi = 'Søg' >
Produktion
Hvordan opretter man Outline-knapper i Bootstrap?
For at tilføje knapkonturer skal Bootstrap ' btn-outline-* ” klasse bruges. I sin syntaks,' * ” repræsenterer her omridsfarven. For eksempel, ' btn-outline-danger ' placerer den røde kontur, ' btn-outline-primary ” angiver den blå kontur og mere.
Analyser koden nedenfor:
< knap type = 'knap' klasse = 'btn btn-outline-primary' >Næste< / knap >< knap type = 'knap' klasse = 'btn btn-outline-danger' >Annuller< / knap >
< knap type = 'knap' klasse = 'btn btn-outline-succes' >Succes< / knap >
Det kan konstateres, at ' Næste knappen har en blå kontur, ' Afbestille knappen med rødt omrids, og ' Succes knappen er blevet stylet med en grøn kontur:
Hvordan justerer man bootstrap-knapstørrelser?
Nogle Bootstrap-klasser anvendes til at justere knapstørrelserne, såsom:
- “ btn-lg ” klasse anvendes til at oprette en stor knap. Denne klasse kan øge skriftstørrelse og udfyldning.
- “ btn-md ” skaber en mellemstor knap.
- “ btn-sm ” opretter en lille knap.
Eksempel
Nu vil vi oprette tre knapper med forskellige størrelser og selvforklarende navne:
< knap type = 'knap' klasse = 'btn btn-sekundær btn-lg' >Stor< / knap >< knap type = 'knap' klasse = 'btn btn-advarsel btn-md' >medium< / knap >
< knap type = 'knap' klasse = 'btn btn-fare btn-sm' >lille< / knap >
Produktion
Hvordan laver man en blokniveauknap i Bootstrap?
Blokniveauknapperne er dem, der holder størrelsen i fuld bredde. For at oprette knapperne på blokniveau skal ' btn-blok ” klasse bruges som følger
< knap type = 'knap' klasse = 'btn btn-advarsel btn-blok' > knap< / knap >< knap type = 'knap' klasse = 'btn btn-sekundær btn-blok' >knap< / knap >
Produktion
Hvordan oprettes aktive tilstandsknapper i Bootstrap?
De aktive tilstandsknapper refererer til de knapper, der aktuelt er aktive. Disse knapper er lidt mørkere end normalt. For at oprette sådanne knapper skal Bootstrap ' aktiv ” klasse udnyttes.
Eksempel
Nedenstående kode skaber to knapper. Den første er i normal tilstand, mens den anden anvendes med ' aktiv ' klasse:
< knap type = 'knap' klasse = 'btn btn-succes' >Succes< / knap >< knap type = 'knap' klasse = 'btn btn-succes aktiv' >Succes< / knap >
Produktion
Hvordan oprettes deaktiverede tilstandsknapper i Bootstrap?
De deaktiverede tilstandsknapper refererer til de knapper, der er uklikbare og ubrugelige. I Bootstrap er ' handicappet ” klasse bruges til at oprette en deaktiveret tilstandsknap. Det ' handicappet ”-attributten kan også bruges til dette formål.
Eksempel
Se eksemplet nedenfor:
- Den første knap er ikke i en deaktiveret tilstand.
- Den anden bruger ' handicappet ” klasse for at oprette en deaktiveret tilstandsknap.
- Den tredje bruger ' handicappet ' attribut:
< knap type = 'knap' klasse = 'btn btn-success deaktiveret' >Succes< / knap >
< knap type = 'knap' klasse = 'btn btn-succes' deaktiveret>Succes< / knap >
Produktion
Vi har dækket forskellige aspekter relateret til Bootstrap-knapper og deres stil i CSS.
Konklusion
Det ' btn ” klasse bruges til at skabe Bootstrap-knapper med et enkelt design. For at oprette farve- og konturknapper skal ' btn-* ' og ' btn-outline-* ” klasser bruges hvor ” * ” symboliserer enhver farveklasse. For eksempel, ' btn-advarsel ' opretter en gul knap, ' btn-outline-advarsel ” skaber en gul omridset knap og mange flere. For at gøre knapperne aktive eller deaktiverede, anvendes klasserne 'aktiv' og 'deaktiveret'. Dette indlæg gav en omfattende guide til Bootstrap-knapperne.