Puka

Tirohanga

Ko nga mana puka a Bootstrap ka whakawhānui ake i runga i o 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 typehuanga e tika ana mo nga whakaurunga katoa (hei tauira, emailmo te wahitau imeera, numbermo 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.

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-textakomanga.

<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 disabledhuanga 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 disabledhuanga 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-hiddenakomanga
• Te tohu ki tetahi huānga o naianei ka taea te whakamahi hei tapangaaria-labelledby
• Te whakarato titlehuanga
• Te tautuhi i te ingoa uru ki runga i tetahi huānga ma te whakamahiaria-label

Mena karekau tetahi o enei, ka taea e nga hangarau awhina te whakamahi i te placeholderhuanga 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.

Ahakoa te whakamahi i nga ihirangi huna ( .visually-hidden, aria-label, tae noa ki nga placeholderihirangi, 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;