Bullae
Utere Bootstrap more stylorum conjunctionum pro actionibus in formis, alternis, ac magis subsidio multiplicium magnitudinum, civitatum et plurium.
Exempla
Bootstrap plures stylos bullam praedefinitam comprehendit, unaquaeque inserviens suo semantico proposito, cum paucis extra- jectis pro more dominio.
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Deferre significatio technologiae adiuvandae
Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .sr-only
genere.
Inactivare textu involuti
Si textum bullam involvere non vis, .text-nowrap
genus globuli addere potes. $btn-white-space: nowrap
In Sass, textum inactivare pro singulis bullis involuere potes .
Button tags
Classes ad elementum .btn
adhibendum . Tamen his generibus vel elementis <button>
uti potes (quamvis nonnulli navigatores paulum diversam translationem adhibere possunt).<a>
<input>
Cum per conjunctionem classes in <a>
elementis quae in-pagina functionitatis felis (velut contenta cadens) adhibentur, potius quam cum novis paginis vel sectionibus in pagina pagina coniungantur, hi nexus dare debent ut role="button"
suum propositum apte deferat ad technologias adiuvandas sicut tegumentum legentium.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Adumbratio bullarum
Felis eget, at non tersos inferunt colores? Repone defaltam determinativam classes cum .btn-outline-*
ones ut omnes imagines background et colores in aliqua conjunctione removeant.
<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Magnitudines
Fac maiorem vel minorem globulis? Add .btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Faces angustos globulis gradu, quae plenam latitudinem parentis spatiant, addendo .btn-block
.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
Active civitate
Bullae pressae apparebunt, cum agentes color obscuriore, limbo obscuriore, et, cum umbrae fiunt, umbra incerta. Classem addere non opus est <button>
sicut pseudo-classis utuntur . Tamen eandem speciem activam cum .active
(et attributum includere aria-pressed=“true”
) adhuc opprimere debes, si statum programmatice replicare debes.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
Disabled statum
Fac tesserae otiosae spectant addendo disabled
attributum booleanum cuivis <button>
elementi.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Debilitatum bullarum utens <a>
elementum conversari paulum differt:
<a>
s non sustinentdisabled
attributum, ideo genus addere debes.disabled
ut debilis visibiliter appareat.- Quaedam styli amici futuri comprehenduntur ut omnes
pointer-events
globulis ancoris inactivandi. In navigatoribus qui hanc possessionem sustinent, cursorem debilem omnino non videbis. - Bullae debiles utentes
<a>
includuntaria-disabled="true"
attributum ad designandum statum elementi ad technologias adiuvandas. - Bullae utens
<a>
debilitatum non includithref
attributum.
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Link functionality caveat
Ad causas operiendas ubi href
attributum in vinculo debili servare debeas, .disabled
usus classium ut nexum functionis s pointer-events: none
inactivare conetur . <a>
Nota hanc possessionem CSS nondum pro HTML normatum esse, sed omnes recentiores navigatores eam confirmant. Praeterea, etiam in navigatoribus qui pointer-events: none
adiuvant, navigatio claviaturae serpit, id significat quod claviaturae usores et usores technologiarum adiuvantium adhuc has nexus movere poterunt. Ita tutus esse, praeter aria-disabled="true"
, etiam tabindex="-1"
attributum in his nexus includunt ne umbilicum claviaturae recipiant, et usu JavaScript ad functionem suam omnino disable utantur.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
Button plugin
Plus globulis. Button imperium civitatibus vel coetus globulis crea in pluribus componentibus sicut instrumentorum communicationis.
Toggle civitatibus
Add data-toggle="button"
to toggle a re active
publica puga. Si puga pyga prae-toggling es, oportet manually genus et.active
classi addere . aria-pressed="true"
<button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Checkbox et radio puga
styli Bootstrap .button
aliis elementis, ut s, applicari possunt <label>
, ut praebeant pyga toggling vel styli radiophonici. Adde data-toggle="buttons"
ad .btn-group
continentem tesserae illae modificatae ut mores suos toggling per JavaScript et addas .btn-group-toggle
stylum <input>
s intra globulis tuis. Nota quod singulas globulis vel coetibus earum input-potestatis creare potes.
Status sedatus harum bullarum solum per click
eventum in globulis renovatum est. Si alia methodo uteris ad renovandum input-eg, cum <input type="reset">
vel manualiter applicando proprietatem initus - opus erit manually checked
toggle ..active
<label>
Nota quod Bullae prae-pressae requirunt te ut manually .active
genus ad input's add <label>
.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
Methodi
Methodus | Descriptio |
---|---|
$().button('toggle') |
Toggles re publica dis. Dat speciem globuli quam in actum reducitur. |
$().button('dispose') |
Praesent nec elementum felis. |