Bootstrap 4 -knoppies
Knoppie Styles
Bootstrap 4 bied verskillende style van knoppies:
Voorbeeld
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Die knoppie klasse kan gebruik word op <a>, <button>, of
<input>elemente:
Voorbeeld
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Waarom plaas ons 'n # in die href-kenmerk van die skakel?
Aangesien ons geen bladsy het om dit na te koppel nie, en ons nie 'n "404"-boodskap wil kry nie, plaas ons # as die skakel. In die werklike lewe moet dit natuurlik 'n regte URL na die "Soek"-bladsy wees.
Knoppie uiteensetting
Bootstrap 4 bied agt buitelyn-/omsoomknoppies:
Voorbeeld
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Knoppie Groottes
Gebruik die .btn-lgklas vir groot knoppies of .btn-smklas vir klein knoppies:
Voorbeeld
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Blokvlakknoppies
Voeg klas .btn-blockby om 'n blokvlakknoppie te skep wat oor die hele breedte van die ouerelement strek.
Voorbeeld
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Aktiewe/gedeaktiveerde knoppies
'n Knoppie kan ingestel word op 'n aktiewe (skyn gedruk) of 'n gedeaktiveerde (nie-klikbare) toestand:
Die klas .activelaat 'n knoppie gedruk lyk, en die disabledkenmerk maak 'n knoppie onklikbaar. Let daarop dat <a>-elemente nie die disabled-kenmerk ondersteun nie en dus die .disabledklas moet gebruik om dit visueel gestremd te laat lyk.
Voorbeeld
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Draaiknope
Jy kan ook "spinners" by 'n knoppie voeg, waaroor jy meer sal leer in ons BS4 Spinners Tutoriaal :
Voorbeeld
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>