Formae
Exempla et usus guidelines ad formas moderandas rationes, optiones layout optiones, et consuetudines componentium ad varias formas creandas.
Overview
Forma Bootstrap controllata dilatat formam styli nostri Rebooted cum generibus. His generibus utere ut optiones suas nativus ostensionibus magis constantioribus per navigatores et machinas reddendo optet.
Vide ut aptum type
attributum in omnibus initibus (exempli gratia email
electronica inscriptio vel number
numerica notitia) uteretur recentioribus initus moderantibus ut inscriptio verificationis, numerus lectionis et plus.
Hic exemplum velox est ut formas styles demonstraret Bootstrap. Lege documenta in classibus requisitis, forma extensionis, et plura.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Forma text
Truncus gradus vel inlinei gradus forma texti usus creari potest .form-text
.
Forma iungens textum cum forma controls
Formae textus explicite coniungi debet cum forma temperantiae quod pertinet ad usus aria-describedby
attributi. Hoc efficiet ut technologiae adiutrices - sicut lectores tegumentum - hanc formam textum annuntient cum usor se fundit vel imperium intrat.
Forma textus infra initibus dici potest cum .form-text
. Si elementum impedimentum planum adhibebitur, margini top adicietur pro facili spatio ab inputibus supra.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
Inline textus uti potest quodlibet elementum typicum inline HTML (sit a <span>
, <small>
vel aliquid aliud) cum genere nihil amplius .form-text
.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
Debilitatum formae
Boolean disabled
attributum addere in initus ad impediendum interationes usoris ne leviores appareant.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Adde quod omne imperium intus inactivandi disabled
attributum est . <fieldset>
Navigatores omnes nativa forma moderamina (,, et elementa) intus quasi debiles tractant <input>
, <select>
impediens <button>
tam <fieldset disabled>
claviaturas quam mus interationes.
Attamen si forma tua etiam morem globulorum qualitatum elementorum comprehendit quae <a class="btn btn-*">...</a>
, haec tantum styli tradenda sunt pointer-events: none
, significantes adhuc sunt focusbiles et operabiles utendo claviaturae. Hoc in casu, manually has potestates mutare debetis addendo tabindex="-1"
ne umbilicum recipiant et aria-disabled="disabled"
statum suum technologiae adiuvandae designent.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Accessibility
Ut omnes formae potestates habeant nomen accessibile congruum, ut propositum suum technologiarum adiuvantium utentibus deferri possit. Simplicissimus modus hoc assequendi est ut <label>
elementum vel - in casu globuli - textum satis describit ac partem <button>...</button>
contenti includere.
Cum adiunctis in quibus includere non potest contentum visibile <label>
vel conveniens textum, aliae sunt modi praebendi nomen accessibile, ut sunt:
<label>
elementa occultantur per.visually-hidden
classium- Demonstratio elementi exsistenti qui potest agere ut pittacium utens
aria-labelledby
- Providemus
title
attributum - Expresse profecta sunt in elementum utens nomine accessibilem
aria-label
Si nullae ex his adsint, technologiae adiutrices uti possunt, uti placeholder
attributum tamquam fallax ad nomen accessibile in <input>
et <textarea>
elementis. Exempla in hac sectione pauca suggerunt, casus speciales aditus.
Dum utens contento visibiliter abscondito ( .visually-hidden
,, aria-label
atque etiam placeholder
contenta, quae semel evanescit forma campi contenta habet) adiuvat utentes technologias adiuvat, defectus textus visibilis visibilis adhuc pro quibusdam usoribus problematicus potest esse. Forma quaedam titulus visibilis plerumque optima est aditus, tum ad accessibilitatem et usability.
Sass
Multae variabiles formae in gradu generali positae sunt ut a singulis componentibus rursus adhibeantur et extendantur. Has saepissime videbis $btn-input-*
et $input-*
variabiles.
Variabilium
$btn-input-*
variabiles communes variabiles globales inter globuli et formas nostras componuntur. Haec frequenter reponenda ut valores aliis variabilibus particularibus componentibus invenies.
$input-btn-padding-y: .375rem;
$input-btn-padding-x: .75rem;
$input-btn-font-family: null;
$input-btn-font-size: $font-size-base;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur: 0;
$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: .25rem;
$input-btn-padding-x-sm: .5rem;
$input-btn-font-size-sm: $font-size-sm;
$input-btn-padding-y-lg: .5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-font-size-lg: $font-size-lg;
$input-btn-border-width: $border-width;