in English

Daim ntawv tswj

Muab cov ntawv nyeem cov ntawv tswj xws li <input>s thiab <textarea>s ib qho kev hloov kho tshiab nrog cov qauv kev cai, qhov loj me, lub xeev tsom, thiab ntau dua.

Ntawm nplooj ntawv no

Piv txwv

Email chaw nyob

Piv txwv textarea

html

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Qhov loj me

Teeb qhov siab siv cov chav kawm zoo li .form-control-lgthiab .form-control-sm.

html

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

Neeg tsis taus

Ntxiv tus disabledcwj pwm boolean ntawm ib qho kev tawm tswv yim kom muab nws lub ntsej muag greyed, tshem tawm cov xwm txheej pointer, thiab tiv thaiv kev tsom.

html

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

Nyeem nkaus xwb

Ntxiv tus readonlycwj pwm boolean ntawm ib qho kev tawm tswv yim los tiv thaiv kev hloov pauv ntawm cov tswv yim tus nqi. readonlyinputs tseem tuaj yeem tsom thiab xaiv, thaum disabledcov khoom siv tsis tuaj yeem.

html

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

Nyeem nkaus xwb

Yog tias koj xav kom muaj <input readonly>cov ntsiab lus hauv koj daim ntawv styled raws li cov ntawv nyeem, hloov .form-controlnrog .form-control-plaintextkom tshem tawm cov ntawv sau ua ntej styling thiab khaws qhov tseeb marginthiab padding.

Tus password

html

  <div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>

html

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

Cov ntaub ntawv nkag

Default file input piv txwv

Ntau cov ntaub ntawv input piv txwv

Disabled file input piv txwv

Cov ntaub ntawv me me input piv txwv

Loj cov ntaub ntawv input piv txwv

html

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Xim

Teem lub type="color"thiab ntxiv .form-control-colorrau lub <input>. Peb siv cov chav kawm hloov kho los teeb tsa heights ruaj thiab hla qee qhov tsis sib xws ntawm browsers.

Xim xaiv

html

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Cov ntaub ntawv

Datalists tso cai rau koj los tsim ib pawg ntawm <option>s uas tuaj yeem nkag mus tau (thiab autocompleted) los ntawm hauv ib qho <input>. Cov no zoo ib yam li <select>cov ntsiab lus, tab sis tuaj nrog ntau cov zaub mov styling txwv thiab qhov sib txawv. Txawm hais tias feem ntau ntawm cov browsers thiab cov tshuab ua haujlwm suav nrog qee qhov kev txhawb nqa rau <datalist>cov ntsiab lus, lawv cov styling tsis sib haum ntawm qhov zoo tshaj plaws.

Kawm paub ntxiv txog kev txhawb nqa rau cov ntaub ntawv teev npe .

Datalist piv txwv

html

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

Sass

Hloov pauv

$input-*tau qhia thoob plaws feem ntau ntawm peb daim ntawv tswj hwm (thiab tsis yog khawm).

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              $body-bg;
$input-disabled-color:                  null;
$input-disabled-bg:                     $gray-200;
$input-disabled-border-color:           null;

$input-color:                           $body-color;
$input-border-color:                    $gray-400;
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      $box-shadow-inset;

$input-border-radius:                   $border-radius;
$input-border-radius-sm:                $border-radius-sm;
$input-border-radius-lg:                $border-radius-lg;

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               $gray-600;
$input-plaintext-color:                 $body-color;

$input-height-border:                   $input-border-width * 2;

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-color-width:                      3rem;

$form-label-*thiab $form-text-*yog rau peb <label>s thiab .form-texttivthaiv.

$form-label-margin-bottom:              .5rem;
$form-label-font-size:                  null;
$form-label-font-style:                 null;
$form-label-font-weight:                null;
$form-label-color:                      null;

$form-text-margin-top:                  .25rem;
$form-text-font-size:                   $small-font-size;
$form-text-font-style:                  null;
$form-text-font-weight:                 null;
$form-text-color:                       $text-muted;

$form-file-*yog rau cov ntaub ntawv nkag.

$form-file-button-color:          $input-color;
$form-file-button-bg:             $input-group-addon-bg;
$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%);