Puka
Ko nga tauira me nga aratohu whakamahi mo nga momo mana whakahaere, nga whiringa tahora, me nga waahanga ritenga mo te hanga i nga momo momo momo.
Tirohanga
Ko nga mana puka a Bootstrap ka whakawhānui ake i runga i a maatau momo ahua kua Whakahoutia me nga karaehe. Whakamahia enei karaehe ki te whakauru ki o raatau whakaaturanga kia rite tonu te whakaputa puta noa i nga kaitirotiro me nga taputapu.
Me mohio ki te whakamahi i tetahi type
huanga e tika ana mo nga whakaurunga katoa (hei tauira, email
mo te wahitau imeeranumber
mo nga korero nama ranei) hei whakamahi i nga mana whakauru hou penei i te manatoko imeera, te kowhiringa nama, me etahi atu.
Anei he tauira tere hei whakaatu i nga momo ahua o Bootstrap. Kia mau ki te panui mo nga tuhinga mo nga karaehe e hiahiatia ana, te whakatakotoranga puka, me etahi atu.
<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>
Kuputuhi puka
Ka taea te hanga kuputuhi puka taumata-poraka, taumata-raina ranei ma te whakamahi .form-text
.
Te hono i te kuputuhi puka me nga mana puka
Me tino hono te tuhinga puka ki te mana puka e pa ana ki te whakamahi i te aria-describedby
huanga. Ma tenei ka whakarite ko nga hangarau awhina—penei i nga kaipanui mata—ka panui i tenei puka tuhinga ina ka aro te kaiwhakamahi, ka uru ranei ki te mana whakahaere.
Puka kuputuhi i raro i nga whakaurunga ka taea te whakaahua ki te .form-text
. Mena ka whakamahia he huānga taumata-paraka, ka taapirihia he tawhē runga kia ngawari te mokowhiti mai i nga whakaurunga o runga.
<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>
Ka taea e te kuputuhi roraina te whakamahi i tetahi huānga HTML rōraina (he <span>
, <small>
, he aha atu ranei) kaore he mea ke atu i te .form-text
akomanga.
<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>
Puka monokia
Tāpirihia te disabled
huanga boolean ki runga i te whakaurunga hei aukati i nga taunekeneke a nga kaiwhakamahi me te ahua mama ake.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Tāpirihia te disabled
huanga ki a <fieldset>
hei mono i nga mana katoa o roto. Ka tukuna e nga kaitirotiro nga mana ahua taketake katoa ( <input>
, <select>
, me <button>
nga huānga) i roto i te he <fieldset disabled>
kua monokia, hei aukati i nga pahekoheko papapātuhi me te kiore ki runga.
Heoi, mena kei roto ano i to puka nga huānga rite ki te patene penei i te <a class="btn btn-*">...</a>
, ka hoatu he ahua o te pointer-events: none
, ko te tikanga kei te arotahi tonu me te mahi ma te whakamahi i te papapātuhi. I tenei keehi, me whakarereke a-ringa koe i enei mana ma te taapiri tabindex="-1"
kia kore ai e whiwhi arotahi me aria-disabled="disabled"
te tohu i o raatau ahuatanga ki nga hangarau awhina.
<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>
Te urunga
Me whakarite he ingoa e tika ana te uru atu o nga mana puka katoa kia taea ai te kawe atu o raatau kaupapa ki nga kaiwhakamahi o nga hangarau awhina. Ko te huarahi ngawari ki te whakatutuki i tenei ko te whakamahi i tetahi <label>
huānga, he—he patene ranei—ki te whakauru i nga tuhinga whakamaarama tika hei waahanga o te <button>...</button>
ihirangi.
Mo nga ahuatanga kaore e taea te whakauru i tetahi <label>
ihirangi kuputuhi e kitea ana, e tika ana ranei, tera ano etahi atu huarahi mo te tuku ingoa waatea, penei:
<label>
huānga huna mā te.visually-hidden
akomanga- Te tohu ki tetahi huānga o naianei ka taea te whakamahi hei tapanga
aria-labelledby
- Te whakarato
title
huanga - Te tautuhi i te ingoa uru ki runga i tetahi huānga ma te whakamahi
aria-label
Mena karekau tetahi o enei, ka taea e nga hangarau awhina te whakamahi i te placeholder
huanga hei whakamuri mo te ingoa uru <input>
me <textarea>
nga huānga. Ko nga tauira i roto i tenei waahanga e whakarato ana i etahi huarahi e whakaarohia ana, mo nga keehi-motuhake.
I a koe e whakamahi ana i nga ihirangi huna ( .visually-hidden
, aria-label
, me te araplaceholder
ihirangi, ka ngaro i te wa e whai kiko ana te puka puka) ka whai hua ki nga kaiwhakamahi hangarau awhina, ko te kore o te tuhinga tapanga e kitea ana ka raru tonu mo etahi kaiwhakamahi. Ko etahi ahua o te tapanga kitea te huarahi pai rawa atu, mo te uru me te whakamahi.
Sass
He maha nga momo taurangi kua whakaritea ki te taumata whanui hei whakamahi ano me te whakaroahia e nga waahanga ahua takitahi. Ka kite koe i enei mea he $btn-input-*
me nga $input-*
taurangi.
Taurangi
$btn-input-*
Ko nga taurangi ka tohatohahia nga taurangi o te ao i waenga i a tatou paatene me o tatou waahanga ahua. Ka kitea e koe enei mea ka tukuna ano hei uara ki etahi atu taurangi-waahanga motuhake.
$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;