Cov ntawv

Txheej txheem cej luam

Bootstrap daim ntawv tswj tau nthuav dav ntawm peb Rebooted daim ntawv styles nrog cov chav kawm. Siv cov chav kawm no los xaiv rau hauv lawv cov kev qhia tshwj xeeb rau kev ua kom zoo sib xws thoob plaws browsers thiab khoom siv.

Nco ntsoov siv tus typecwj pwm tsim nyog ntawm tag nrho cov khoom siv (xws li, emailrau email chaw nyob lossis numbercov ntaub ntawv xov xwm) kom tau txais txiaj ntsig ntawm cov tswv yim tshiab xws li kev txheeb xyuas email, xaiv tus lej, thiab ntau dua.

Ntawm no yog ib qho piv txwv ceev los qhia txog Bootstrap cov qauv qauv. Khaws nyeem ntawv rau cov ntaub ntawv ntawm cov chav kawm xav tau, daim ntawv layout, thiab lwm yam.

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

Daim ntawv nyeem

Thaiv-theem lossis inline-theem daim ntawv ntawv tuaj yeem tsim siv .form-text.

Cov ntawv sau hauv qab no tuaj yeem tsim nrog .form-text. Yog tias qhov thaiv-theem yuav raug siv, cov npoo sab saum toj yog ntxiv rau qhov sib nrug yooj yim los ntawm cov khoom siv saum toj no.

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

Cov ntawv sau hauv kab tuaj yeem siv txhua yam hauv kab hauv HTML (xws li nws yog <span>, <small>, lossis lwm yam) tsis muaj dab tsi ntau dua li hauv .form-textchav kawm.

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

Cov ntaub ntawv xiam oob qhab

Ntxiv tus disabledcwj pwm boolean ntawm qhov kev tawm tswv yim los tiv thaiv cov neeg siv kev sib cuam tshuam thiab ua kom nws tshwm sim dua.

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

Ntxiv tus disabledcwj pwm rau ib qho <fieldset>kom lov tes taw tag nrho cov tswj hauv. Cov browsers kho txhua hom kev tswj hwm ib txwm muaj ( <input>, <select>, thiab <button>cov ntsiab lus) hauv cov <fieldset disabled>neeg xiam oob qhab, tiv thaiv ob qho tib si keyboard thiab nas cuam tshuam rau lawv.

Txawm li cas los xij, yog tias koj daim ntawv tseem suav nrog cov kev cai khawm zoo li cov ntsiab lus xws li <a class="btn btn-*">...</a>, cov no tsuas yog muab cov style ntawm pointer-events: none, txhais tau tias lawv tseem tsom tau thiab siv tau siv cov keyboard. Hauv qhov no, koj yuav tsum hloov kho cov kev tswj hwm no los ntawm kev ntxiv tabindex="-1"los tiv thaiv lawv kom tsis txhob tau txais kev tsom xam thiab aria-disabled="disabled"qhia lawv lub xeev rau cov cuab yeej pabcuam.

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

Kev siv tau

Xyuas kom meej tias txhua daim ntawv tswj hwm muaj lub npe tsim nyog siv tau kom lawv lub hom phiaj tuaj yeem xa mus rau cov neeg siv khoom siv thev naus laus zis. Txoj hauv kev yooj yim tshaj plaws kom ua tiav qhov no yog siv lub <label>ntsiab lus, lossis - nyob rau hauv rooj plaub ntawm cov nyees khawm - kom suav nrog cov lus piav qhia txaus ua ib feem ntawm cov <button>...</button>ntsiab lus.

Rau cov xwm txheej uas nws tsis tuaj yeem suav nrog <label>cov ntsiab lus pom lossis tsim nyog, muaj lwm txoj hauv kev tseem muab lub npe siv tau, xws li:

• <label>cov ntsiab lus zais siv cov .visually-hiddenchav kawm
• Taw tes rau cov khoom uas twb muaj lawm uas tuaj yeem ua raws li daim ntawv lo sivaria-labelledby
• Muab tus titlecwj pwm
• Qhia meej txog kev teeb tsa lub npe siv tau ntawm ib qho khoom sivaria-label

Yog tias tsis muaj ib qho ntawm cov no, cov thev naus laus zis tuaj yeem siv los siv tus placeholdercwj pwm ua ib qho kev poob rau lub npe siv tau rau ntawm <input>thiab <textarea>cov ntsiab lus. Cov piv txwv nyob rau hauv nqe lus no muab ob peb qhov kev pom zoo, cov xwm txheej tshwj xeeb.

Thaum siv cov ntsiab lus zais qhov muag ( .visually-hidden, aria-label, thiab txawm tias placeholdercov ntsiab lus, uas ploj mus ib zaug hauv daim ntawv teb muaj cov ntsiab lus) yuav muaj txiaj ntsig zoo rau cov neeg siv thev naus laus zis, qhov tsis pom cov ntawv nyeem tseem yuav muaj teeb meem rau qee cov neeg siv. Qee daim ntawv pom daim ntawv lo feem ntau yog txoj hauv kev zoo tshaj plaws, ob qho tib si rau kev siv tau thiab siv tau.

Sass

Ntau daim ntawv hloov pauv tau raug teeb tsa rau qib dav dav kom rov siv dua thiab txuas ntxiv los ntawm tus kheej daim ntawv. Koj yuav pom cov no feem ntau ua $input-btn-*thiab $input-*hloov pauv.

Hloov pauv

$input-btn-*variables yog qhia thoob ntiaj teb sib txawv ntawm peb cov nyees khawm thiab peb daim ntawv Cheebtsam. Koj yuav pom cov no nquag reassigned raws li qhov tseem ceeb rau lwm yam kev hloov pauv tshwj xeeb.

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