W3.CSS- knoppies
W3.CSS Knoppie Klasse
W3.CSS verskaf die volgende klasse vir knoppies:
| Klas | Definieer |
|---|---|
| w3-btn | 'n Reghoekige knoppie met 'n skaduwee-effek. Standaardkleur is swart. |
| w3-knoppie |
'n Reghoekige knoppie met 'n grys sweef-effek. Verstekkleur is liggrys in W3.CSS weergawe 3. Verstekkleur word van ouerelement in weergawe 4 geërf. |
| w3-maat |
'n Horisontale balk wat gebruik kan word om knoppies saam te groepeer. (Ideaal vir horisontale navigasie-spyskaarte) |
| w3-blok | Klas wat gebruik kan word om 'n volle breedte (100%) knoppie te definieer. |
| w3-sirkel | Kan gebruik word om 'n sirkelvormige knoppie te definieer. |
| w3-rimpel | Kan gebruik word om 'n rimpeleffek te skep. |
Knoppies
Beide die w3-knoppie- klas en die w3-btn- klas voeg knoppie-gedrag by enige HTML-elemente.
Die mees algemene elemente om te gebruik is <input type="button">, <button> en <a>:
Voorbeeld
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
Knoppie kleure
Al die w3- kleurklasse word gebruik om kleur by knoppies te voeg :
Voorbeeld
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
Beweeg kleure
Hover-effekte kom ook in alle kleure voor. Hier is 'n paar:
Die w3-sweef-kleurklasse word gebruik om sweefkleur by knoppies te voeg:
Voorbeeld
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
Knoppie vorms
Die w3-ronde- grootte klasse word gebruik om geronde rande by knoppies te voeg:
Voorbeeld
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
Knoppie Groottes
Die w3 -grootte klasse kan gebruik word om verskillende teksgroottes te definieer:
Voorbeeld
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
Knoppie grense
Die w3-grensklas kan gebruik word om rande by knoppies te voeg.
Die w3-grens-kleurklasse word gebruik om die kleur van die grens te definieer :
Voorbeeld
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
Wenk: Voeg die w3-ronde- grootte klas by om geronde grense by te voeg.
Knoppies met verskillende tekseffekte
Knoppies kan 'n wyer tekseffekte gebruik:
Die w3-wye klas voeg 'n wyer tekseffek by:
Voorbeeld
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Knoppies kan kursief en vet teks-effekte hê:
Gebruik standaard HTML-merkers (<i> en <b>) om kursief of vet effek by die knoppieteks te voeg:
Voorbeeld
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Knoppies Met Opvulling
Die w3-opvulling- grootte klasse word gebruik om ekstra opvulling rondom die knoppieteks by te voeg:
Voorbeeld
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
Volle breedte knoppies
Om 'n volwydte-knoppie te skep, voeg die w3-blokklas by die knoppie.
Volwydte-knoppies het 'n breedte van 100% en strek oor die hele breedte van die ouerelement:
Voorbeeld
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
Wenk: Belyn die knoppieteks met die w3-left-align- klas of die w3-regs-belyningsklas .
Die grootte van die a-blok kan gedefinieer word deur style="width:" .
Voorbeeld
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
Gedeaktiveerde knoppies
Knoppies staan uit met 'n skadu-effek en die wyser verander in 'n hand wanneer jy oor hulle beweeg.
Gedeaktiveerde knoppies is ondeursigtig (semi-deursigtig) en vertoon 'n "geen parkeerteken":
Die w3-gestremde klas word gebruik om 'n gedeaktiveerde knoppie te skep (as die element die standaard HTML-gestremde kenmerk ondersteun, kan jy eerder die gedeaktiveerde kenmerk gebruik):
Voorbeeld
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Knoppiebalke
Knoppies kan saam in 'n horisontale balk gegroepeer word deur die w3-balk klas te gebruik:
Voorbeeld
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
Die w3-bar klas is bekendgestel in W3.CSS weergawe 2.93 / 2.94.
Knoppies kan saam gegroepeer word sonder 'n spasie tussen hulle deur w3-bar-item klas te gebruik:
Voorbeeld
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
Knoppiesstawe kan gesentreer word deur die w3-sentrumklas te gebruik :
Voorbeeld
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
Om twee (of meer) knoppiebalke op dieselfde lyn te wys, voeg die w3-show-inline-block klas by:
Voorbeeld
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
Navigasiebalke
Knoppiestawe kan maklik as navigasiestawe gebruik word:
Voorbeeld
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
Die grootte van elke item kan gedefinieer word deur style="width:" te gebruik :
Voorbeeld
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
Jy sal later in hierdie tutoriaal meer oor navigasie leer.
Links en Regs knoppies
Gebruik die .w3-left- klas en die .w3-right- klas om knoppies na links of regs te laat dryf:
Word gebruik om "vorige/volgende"-knoppies te skep:
Voorbeeld
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Knoppies met rimpeleffekte
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>