Dit artikel zal u instrueren:
- Hoe maak je knoppen in Bootstrap?
- Hoe maak je overzichtsknoppen in Bootstrap?
- Hoe bootstrap-knopgroottes aanpassen?
- Hoe maak je een knop op blokniveau in Bootstrap?
- Hoe Active State-knoppen in Bootstrap te maken?
- Hoe maak ik uitgeschakelde statusknoppen in Bootstrap?
Hoe maak je knoppen in Bootstrap?
De bootstrap ' btn ” klasse wordt gebruikt om knoppen te maken. Om gestileerde knoppen toe te voegen, kunt u de ' btn ” klasse met de kleurklasse, zoals “ btn-succes ” om een groene knop te maken.
In HTML is de '
Bekijk onderstaand voorbeeld voor een duidelijk concept.
Voorbeeld
Volg in het HTML-bestand de stappen om knoppen te maken met verschillende tags:
- Toevoegen '
' en ' 'elementen en wijs ze toe' btn ' en ' btn-primair ' klassen. - Voeg dan een '
' tag met het type ' knop ”. Wijs het toe aan de ' btn ' en ' btn-succes ” voor styling als eerste twee knoppen als blauw en de derde als groen:
< a klas = 'btn btn-primair' href = '#' > Open < / a >
< invoer type = 'knop' klas = 'btn btn-succes' waarde = 'Zoeken' >
Uitgang
Hoe maak je overzichtsknoppen in Bootstrap?
Om knopcontouren toe te voegen, de Bootstrap ' btn-overzicht-* ” klasse wordt gebruikt. In zijn syntaxis,“ * ” vertegenwoordigt hier de omtrekkleur. Bijvoorbeeld, ' btn-outline-gevaar ” plaatst de rode omtrek, “ btn-overzicht-primair ” stelt de blauwe omtrek in, en meer.
Analyseer de onderstaande code:
< knop type = 'knop' klas = 'btn btn-overzicht-primair' >Volgende< / knop >< knop type = 'knop' klas = 'btn btn-omtrek-gevaar' >Annuleren< / knop >
< knop type = 'knop' klas = 'btn btn-overzicht-succes' >Succes< / knop >
Men kan constateren dat de “ Volgende ” knop heeft een blauwe omtrek, de “ Annuleren ” knop met rode omtrek, en de “ Succes ”-knop is gestileerd met een groene omtrek:
Hoe bootstrap-knopgroottes aanpassen?
Sommige Bootstrap-klassen worden toegepast om de knopgroottes aan te passen, zoals:
- “ btn-lg ” klasse wordt toegepast om een grote knop te maken. Deze klasse kan de lettergrootte en opvulling vergroten.
- “ btn-md ” creëert een middelgrote knop.
- “ btn-sm ” creëert een kleine knop.
Voorbeeld
Nu gaan we drie knoppen maken met verschillende formaten en zelfverklarende namen:
< knop type = 'knop' klas = 'btn btn-secundaire btn-lg' >Groot< / knop >< knop type = 'knop' klas = 'btn btn-waarschuwing btn-md' >middel< / knop >
< knop type = 'knop' klas = 'btn btn-gevaar btn-sm' >Klein< / knop >
Uitgang
Hoe maak je een knop op blokniveau in Bootstrap?
De knoppen op blokniveau zijn degenen die de volledige breedte bevatten. Om de knoppen op blokniveau te maken, de ' btn-blok ” klasse wordt als volgt gebruikt
< knop type = 'knop' klas = 'btn btn-waarschuwing btn-blok' > knop< / knop >< knop type = 'knop' klas = 'btn btn-secundair btn-blok' >knop< / knop >
Uitgang
Hoe Active State-knoppen in Bootstrap te maken?
De actieve statusknoppen verwijzen naar de knoppen die momenteel actief zijn. Deze knoppen zijn iets donkerder dan normaal. Om dergelijke knoppen te maken, moet de Bootstrap “ actief 'klasse wordt gebruikt.
Voorbeeld
De onderstaande code maakt twee knoppen. De eerste bevindt zich in de normale toestand terwijl de andere wordt toegepast met de ' actief ' klas:
< knop type = 'knop' klas = 'btn btn-succes ' >Succes< / knop >< knop type = 'knop' klas = 'btn btn-succes actief' >Succes< / knop >
Uitgang
Hoe maak ik uitgeschakelde statusknoppen in Bootstrap?
De uitgeschakelde statusknoppen verwijzen naar de knoppen waarop niet kan worden geklikt en die onbruikbaar zijn. In Bootstrap, de ' gehandicapt ” klasse wordt gebruikt om een uitgeschakelde statusknop te maken. De ' gehandicapt ” attribuut kan ook voor dit doel worden gebruikt.
Voorbeeld
Bekijk het onderstaande voorbeeld:
- De eerste knop is niet uitgeschakeld.
- De tweede maakt gebruik van de ' gehandicapt ” class om een uitgeschakelde statusknop te maken.
- De derde gebruikt de ' gehandicapt ” attribuut:
< knop type = 'knop' klas = 'btn btn-succes uitgeschakeld' >Succes< / knop >
< knop type = 'knop' klas = 'btn btn-succes ' uitgeschakeld>Succes< / knop >
Uitgang
We hebben verschillende aspecten behandeld met betrekking tot Bootstrap-knoppen en hun styling in CSS.
Gevolgtrekking
De ' btn ” class wordt gebruikt om Bootstrap-knoppen te maken met een eenvoudig ontwerp. Om gekleurde en omlijnde knoppen te maken, de ' btn-* ' en ' btn-overzicht-* ” klassen worden gebruikt waar de “ * ” symboliseert elke kleurklasse. Bijvoorbeeld, ' btn-waarschuwing ” creëert een gele knop, “ btn-outline-waarschuwing ” creëert een geel omlijnde knop en nog veel meer. Om de knoppen actief of uitgeschakeld te maken, worden respectievelijk de klassen 'active' en 'disabled' toegepast. Dit bericht bevatte een uitgebreide gids over de Bootstrap-knoppen.