Bootstrap- knoppies
Knoppie Styles
Bootstrap bied verskillende style van knoppies:
Om die knoppiestyle hierbo te bereik, het Bootstrap die volgende klasse:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Die volgende voorbeeld wys die kode vir die verskillende knoppiestyle:
Voorbeeld
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
Die knoppieklasse kan op 'n <a>, <button>, of
<input>element gebruik word:
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 ons voorbeelde. Dit moet 'n regte URL na 'n spesifieke bladsy wees.
Knoppie Groottes
Bootstrap bied vier knoppiegroottes:
Die klasse wat die verskillende groottes definieer, is:
.btn-lg.btn-sm.btn-xs
Die volgende voorbeeld toon die kode vir verskillende knoppiegroottes:
Voorbeeld
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Blokvlakknoppies
'n Blokvlakknoppie strek oor die hele breedte van die ouerelement.
Voeg klas .btn-blockby om 'n blokvlakknoppie te skep:
Voorbeeld
<button type="button" class="btn btn-primary btn-block">Button 1</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 klas
.disabled
maak 'n knoppie onklikbaar:
Voorbeeld
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Voltooi Bootstrap Button Reference
Vir 'n volledige verwysing van alle knoppie-klasse, gaan na ons volledige Bootstrap Button Reference .