in English
Fɔm kɔntrol dɛn
Gi tɛkstual fɔm kɔntrol dɛn lɛk <input>s ɛn <textarea>s wan ɔpgrɛd wit kɔstɔm stayl dɛn, sayzin, fɔs stet dɛn, ɛn mɔ.
Na dis pej
Ɛgzampul
<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>Sayz fɔ di sayz
Sɛt ayt dɛn yuz klas dɛn lɛk .form-control-lgɛn .form-control-sm.
<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">Disebul
Ad di disabledboolean atribyut pan wan input fɔ gi am wan greyed aut apinans, pul pɔynta ivin dɛn, ɛn mek i nɔ fos.
<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>Na fɔ rid nɔmɔ
Ad di readonlyboolean atribyut pan wan input fɔ mek dɛn nɔ chenj di input in valyu. readonlyinput dɛn kin stil de fɔs ɛn pik, we di disabledinput dɛn nɔ kin ebul.
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>Na wan klin tɛks nɔmɔ fɔ rid
If yu want fɔ gɛt <input readonly>ɛlimɛnt dɛn na yu fɔm we dɛn stayl lɛk plein tɛks, riples .form-controlwit .form-control-plaintextfɔ pul di difɔlt fɔm fil stayl ɛn kip di kɔrɛkt marginɛn padding.
<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><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>Fayl input
<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>Kɔlɔ
Set di type="color"ɛn ad .form-control-colorto di <input>. Wi de yuz di modifya klas fɔ sɛt fiks heights ɛn ɔvalayz sɔm tin dɛn we nɔ kɔrɛkt bitwin di brawza dɛn.
<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">Datalist dɛn
Datalist dɛn de alaw yu fɔ mek wan grup fɔ <option>s we yu kin akses (ɛn ɔtokɔmplit) frɔm insay wan <input>. Dɛn tin ya fiba di <select>ɛlimɛnt dɛn, bɔt dɛn kam wit mɔ meny stayl limiteshɔn ɛn difrɛns dɛn. Pan ɔl we bɔku pan di brawza ɛn ɔpreshɔn sistem dɛn gɛt sɔm sɔpɔt fɔ <datalist>ɛlimɛnt dɛn, di stayl we dɛn de mek nɔ kɔrɛkt if i fayn.
Lan mɔ bɔt sɔpɔt fɔ datalist ɛlimɛnt dɛn .
<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 bin de
Di tin dɛn we kin chenj
$input-*dɛn sheb dɛn akɔdin to bɔku pan wi fɔm kɔntrol dɛn (ɛn nɔto bɔtin dɛn).
$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-*ɛn $form-text-*na fɔ wi <label>s ɛn .form-textkɔmpɔnɛnt.
$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-*na fɔ fayl input.
$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%);