Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Kpeɖodzinyawo dzi kpɔkpɔ

Na nuŋɔŋlɔ ƒe nɔnɔme dzikpɔkpɔwo abe <input>s kple <textarea>s ene nanye ŋgɔyiyi kple atsyã tɔxɛwo, lolome, susu ƒe nɔnɔmewo, kple bubuwo.

Le axa sia dzi

Kpɔɖeŋu

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>

Sizing ƒe lolome

Ðo kɔkɔƒewo to klasswo abe .form-control-lgkple .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">

Si me woɖe dzo le

Tsɔ disabledboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be wòana wòadze abe ɣie ene, aɖe nufiamɔ̃ ƒe nudzɔdzɔwo ɖa, eye nàxe mɔ ɖe ŋkuléle ɖe nu ŋu nu.

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>

Nuxexlẽ ɖeɖeko

Tsɔ readonlyboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ ɖe nyawo tsɔtsɔ de eme ƒe asixɔxɔ ƒe tɔtrɔ nu. readonlywoate ŋu atsɔ susu aɖo nusiwo wotsɔ de eme ŋu ahatia wo kokoko, evɔ disablednusiwo wotsɔ de eme ya mate ŋui o.

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

Nuŋɔŋlɔ gbadzaa koe xexlẽ

Ne èdi be woawɔ <input readonly>nusiwo le wò nuŋlɔɖigbalẽvia me ƒe atsyã abe nuŋɔŋlɔ gbadzaa ene la, tsɔe ɖo eteƒe .form-controlbe .form-control-plaintextnàɖe nɔnɔmetata ƒe akpa ƒe nɔnɔme si woɖo ɖi la ɖa eye nàkpɔ esi sɔ marginkple padding.

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>

Faɛl ƒe nyawo tsɔtsɔ de eme

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>

Amadede

Ðo type="color"eye nàtsɔe akpe .form-control-colorɖe <input>. Míezãa modifier class la tsɔ ɖoa ​​fixed heights eye míeɖea masɔmasɔ aɖewo siwo le browserwo dome la ɖa.

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

Nyatakakadzraɖoƒewo

Nyatakakawo ƒe xexlẽdzesiwo ɖea mɔ na wò be nàwɔ <option>s ƒe ƒuƒoƒo si me nàte ŋu akpɔ (eye woawu enu le eɖokui si) tso <input>. Esiawo sɔ kple <select>nusiwo le eme, gake wova kple nuɖuɖu ƒe atsyã ƒe seɖoƒe kple vovototo geɖe wu. Togbɔ be nu aɖewo kpena ɖe web-browser kple dɔwɔɖoɖo akpa gãtɔ ŋu <datalist>hã la, woƒe atsyã mewɔa ɖeka le nyuitɔ kekeake me o.

Srɔ̃ nu geɖe tso kpekpeɖeŋunana nyatakakawo ƒe xexlẽdzesiwo ƒe akpawo ŋu .

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 ƒe nyawo

Nusiwo trɔna

$input-*woamae le míaƒe agbalẽviwo dzi kpɔkpɔ ƒe akpa gãtɔ me (eye menye abɔtawo o).

$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-*eye $form-text-*wole na míaƒe <label>s kple .form-textcomponent.

$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-*nye na faɛlwo tsɔtsɔ de eme.

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