Nā palapala

Nānā nui

Hoʻonui ka mana ʻano o Bootstrap i kā mākou ʻano ʻano Rebooted me nā papa. E hoʻohana i kēia mau papa no ke koho ʻana i kā lākou mau hōʻike maʻamau no ka hāʻawi like ʻana ma waena o nā polokalamu kele pūnaewele a me nā polokalamu.

E ʻoluʻolu e hoʻohana i kahi ʻano kūpono typema nā mea hoʻokomo a pau (e laʻa, emailno ka leka uila a i ʻole numberno ka ʻike helu) e hoʻohana i nā mana hoʻokomo hou e like me ka hōʻoia leka uila, koho helu, a me nā mea hou aʻe.

Eia kahi laʻana wikiwiki e hōʻike i nā ʻano ʻano o Bootstrap. E hoʻomau i ka heluhelu ʻana no nā palapala e pili ana i nā papa i koi ʻia, ka hoʻolālā palapala, a me nā mea hou aku.

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

Palapala kikokiko

Hiki ke hana ʻia ke kikokikona ma ka pae poloka a i ʻole ka pae laina me ka .form-text.

Hiki ke kapa ʻia nā kikokikona ma lalo o nā mea hoʻokomo me .form-text. Inā hoʻohana ʻia kahi ʻāpana pae poloka, hoʻohui ʻia kahi palena luna no ka maʻalahi o ka hoʻokaʻawale ʻana mai nā mea hoʻokomo ma luna.

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

Hiki ke hoʻohana i ka kikokikona i loko o ka laina HTML maʻamau (he <span>, <small>, a i ʻole kekahi mea ʻē aʻe) me ka .form-textpapa.

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

Nā palapala hoʻopale

E hoʻohui i ke disabledʻano boolean ma kahi mea hoʻokomo e pale i ka launa pū ʻana o nā mea hoʻohana a hoʻomāmā.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

E hoʻohui i ka disabledʻano i a <fieldset>e hoʻopau i nā mana āpau i loko. Mālama nā mea hoʻokele i nā mana ʻano ʻōiwi āpau ( <input>, <select>, a me <button>nā mea ʻeleʻele) i loko o kahi <fieldset disabled>me he mea kīnā ʻole, e pale ana i ka launa pū ʻana o ka keyboard a me ka ʻiole ma luna o lākou.

Eia nō naʻe, inā loaʻa i kāu ʻano nā mea e like me ke pihi maʻamau e like me <a class="btn btn-*">...</a>, e hāʻawi wale ʻia kēia i ke ʻano o pointer-events: none, ʻo ia hoʻi, hiki ke nānā pono a hiki ke hoʻohana ʻia me ka hoʻohana ʻana i ka keyboard. I kēia hihia, pono ʻoe e hoʻololi lima i kēia mau mana ma ka hoʻohui tabindex="-1"ʻana i mea e pale ai iā lākou mai ka loaʻa ʻana o ka manaʻo a aria-disabled="disabled"e hōʻailona i ko lākou mokuʻāina i nā ʻenehana kōkua.

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

Hiki ke komo

E hōʻoia i ka loaʻa ʻana o ka inoa kūpono i hiki ke hoʻohana ʻia i nā mea hoʻohana i nā ʻenehana kōkua. ʻO ke ala maʻalahi loa e hoʻokō ai i kēia, ʻo ia ka hoʻohana ʻana i kahi <label>mea, a i ʻole—ma ke ʻano o nā pihi—e hoʻokomo i nā kikokikona wehewehe kūpono ma ke ʻano o ka <button>...</button>ʻike.

No nā kūlana i hiki ʻole ke hoʻokomo i kahi <label>kikokikona ʻike ʻia a kūpono paha, aia nā ala ʻē aʻe e hāʻawi ai i kahi inoa hiki ke ʻike ʻia, e like me:

• <label>nā mea huna e hoʻohana ana i ka .visually-hiddenpapa
• Ke kuhikuhi ʻana i kahi mea i loaʻa i hiki ke hana ma ke ʻano he lepili me ka hoʻohana ʻanaaria-labelledby
• Hāʻawi i kahi titleʻano
• Ka hoʻonohonoho pono ʻana i ka inoa hiki ke loaʻa ma kahi mea e hoʻohana anaaria-label

Inā ʻaʻohe o kēia mau mea, hiki i nā ʻenehana kōkua ke hoʻohana i ke placeholderʻano ma ke ʻano he hāʻule no ka inoa hiki ke loaʻa <input>a me <textarea>nā mea. Hāʻawi nā hiʻohiʻona i kēia ʻāpana i kekahi mau ʻano i manaʻo ʻia, nā hiʻohiʻona kikoʻī.

ʻOiai e hoʻohana ana i ka ʻike huna huna ( .visually-hidden, aria-label, a me ka placeholdermaʻiʻo, e nalowale ana i ka wā e loaʻa ai ka maʻiʻo o ke kahua puka) e pōmaikaʻi i nā mea hoʻohana ʻenehana kōkua, pilikia paha ka nele o nā kikokikona ʻike ʻia no kekahi mau mea hoʻohana. ʻO kekahi ʻano o ka lepili ʻike ʻia ʻo ia ke ala maikaʻi loa, no ka hiki a me ka hoʻohana.

Sass

Hoʻonohonoho ʻia nā ʻano hoʻololi he nui i ka pae maʻamau e hoʻohana hou ʻia a hoʻonui ʻia e nā ʻāpana ʻano pākahi. E ʻike pinepine ʻoe i kēia mau ʻano like $btn-input-*a me $input-*nā loli.

Nā mea hoʻololi

$btn-input-*ua kaʻana like nā ʻano like ʻole ma waena o kā mākou mau pihi a me kā mākou ʻano ʻāpana. E ʻike ʻoe i kēia mau mea i hoʻololi pinepine ʻia ma ke ʻano he mau waiwai i nā mea hoʻololi kikoʻī kikoʻī ʻē aʻe.

$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;