in English

Foroko kunkankow

Aw bɛ sɛbɛnni-sɛbɛnni-minɛnw kunkankow di i n’a fɔ <input>s ani <textarea>s ka sɛgɛsɛgɛli kɛ ni ladamu cogoyaw ye, hakɛw, sinsincogo cogoyaw, ani fɛn wɛrɛw.

Nin ɲɛ in kan

Misaliya

Email ladɛrɛsi

Misali la, sɛbɛnnikɛyɔrɔ

html ye

<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 (Sizing) kɛ

Aw bɛ sanfɛlanw sigi ni kalanw ye i n' a fɔ .form-control-lgani .form-control-sm.

html ye

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

A jɔ la

Aw bɛ disabledboolean fɛnsɛbɛn Fàra donnafɛn dɔ kan walasa k’a ɲɛda Kɛ nɛrɛmuguma ye, ka jiralan ko kɛlenw Bɔ, ani ka sinsinni bali.

html ye

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

Kalan dɔrɔn

A bɛ readonlyboolean attribut (boli) fara donnafɛn dɔ kan walasa ka donnafɛn nafa caman caman cili bali. readonlydonnakow bɛ se ka sinsin hali bi ani ka sugandi, k’a sɔrɔ disableddonnakow tɛ se.

html ye

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

Sɛbɛn gansan kalanni dɔrɔn

N’i b’a fɛ ka <input readonly>fɛn dɔw sɔrɔ i ka foroko kɔnɔ minnu bɛ kɛ cogo la i n’a fɔ sɛbɛnni gansan, i ka a bila a nɔ na .form-controlwalasa .form-control-plaintextka foroko foroko cogoya dafalen bɔ yen ani ka a ɲuman mara marginani padding.

Email fɛ

Kɔdi

html ye

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

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

Filen doncogo

Filen doncogo misali fɔlɔ

Filen caman doncogo misali

Filen doncogo misali balilen

Filen fitininw doncogo misali

Filen belebele doncogo misali

html ye

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

Ɲɛ

Set la type="color"ani ka fara .form-control-colora kan <input>. An bɛ baara Kɛ ni modifier class ye walasa ka fixed heights sigi ani ka bɛnbaliya dɔw Bɔ navigatɛriw ni ɲɔgɔn cɛ.

Kulɛriw tabaga

html ye

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

Datalists (Dɔnniyasɛbɛnw).

Datalists b’a To i bɛ se ka s kulu dɔ Dabɔ min <option>bɛ Se ka Sɔrɔ (ani ka a yɛrɛ Dafa) ka Bɔ <input>. Olu ni fɛnw bɛ tali kɛ ɲɔgɔn na <select>, nka u bɛ na ni menu cogoya dantigɛli caman ye ani danfara minnu bɛ u ni ɲɔgɔn cɛ. Hali ni navigatɛriw ni baarakɛminɛnw fanba bɛ dɛmɛ dɔw Kɛ <datalist>fɛn dɔw la, u cogoya tɛ Bɛn ɲɔgɔn ma a ka fisa.

Aw ye kunnafoni wɛrɛw sɔrɔ kunnafonisɛbɛnw kɔnɔfɛnw dɛmɛni kan .

Datalist misali

html ye

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

Yɛlɛma-yɛlɛmaw

$input-*bɛ tila an ka forobaciyɛn kunkankow fanba la (wa butɔni tɛ).

$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-*ani $form-text-*u ye an ka <label>s ni .form-textcomponent ye.

$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-*ye filen doncogo ye.

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