Source

Formas

Ejemplokuna chaymanta llamkana kamachiykuna formulario kamachiy estilokuna, churana akllanakuna chaymanta sapanchasqa componentekuna achka imaymana formulariokuna ruwanapaq.

Hatun qhawariy

Bootstrap kaqpa formulario kamachiyninkuna mast'arinku Rebooted formulario estilokunaykupi clasekunawan. Kay clasekuna llamk'achiy sapanchasqa qhawayninkuman akllanapaq aswan sapanchasqa ruwaypaq tukuy maskaqkuna chaymanta dispositivokuna kaqpi.

Aswan musuq yaykuna kamachiykuna correo electrónico typechiqaqchay , yupay akllay chaymanta aswan hina llamk'achiy aswan musuq yaykuna kamachiykunamanta llamk'achiy.emailnumber

Kaypi huk utqaylla rikch'ana Bootstrap kaqpa formulario estilokuna rikuchinapaq. Ñawinchayta hinalla ruway documentokuna mañasqa clasekunamanta, formulario churaymanta, hukkunamantapas.

Mana hayk'aqpas huk runawanqa correo electrónico nisqaykitaqa rakisaqkuchu. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group 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>

Controles de forma

Textual forma controles —s <input>, <select>s, s hina— clasewan <textarea>estilochasqa kanku . .form-controlYapachisqa kanku estilokuna general rikchaypaq, enfoque estadopaq, sayayninpaq, chaymanta aswan.

Aseguray explorar nuestros formularios personalizados para más estilo <select>s.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

.form-controlWillañiqi yaykuchinapaq, for nisqawan t'ikray .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Tamaño

Alturakunata churay clasekuna hina .form-control-lgchaymanta .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Ñawinchaylla

Huk yaykusqapi boolean laya yapay, readonlyyaykusqapa chanin tikrayta harkananpaq. Ñawirinapaqlla yaykuykunaqa aswan llamp'u rikukun (mana llamk'achisqa yaykuna hina), ichaqa estándar kursuta waqaychay.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Ñawinchaylla llañu qillqasqa

Sichus <input readonly>formularioykipi elementokuna llañu qillqa hina estiloyuq kayta munanki, .form-control-plaintextclaseta llamk'achiy ñawpaqmanta formulario pampa estilota hurqunaykipaq chaymanta allin margen chaymanta rellenota waqaychaypaq.

<form>
  <div class="form-group 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="form-group 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" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Insumos de Rango

Horizontalmente desplazable rango yaykuykunata churay .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Cajas de verificación y radios

Ñawpaqmanta qhaway qutukuna chaymanta radiokuna yanapayninwan allinchasqa kanku .form-check, huk sapalla clase iskaynin yaykuna layakunapaq chaymanta HTML elementonkupa churayninta chaymanta ruwayninta allinchan . Chay cuadros nisqakunaqa huk listapi huk otaq askha akllanakunata akllanapaqmi, radiokunataq askhamanta huk akllanakunata akllanapaq.

Mana llamk'achisqa qhaway qutukuna chaymanta radiokuna yanapasqa kanku, ichaqa huk not-allowedkursuta tayta mamamanta hover kaqpi qunapaq, atributo kaqman <label>yapanayki tiyan . Mana atichisqa atributo aswan k'anchariq llimp'ita churanqa yanapakuypaq yaykusqapa kayninta rikuchinanpaq.disabled.form-check-input

Checkboxes chaymanta radiokuna llamk'achisqanku ruwasqa HTML-nisqa formulario chiqaqchay yanapakuypaq chaymanta conciso, yaykuy atikuq etiquetakuna quypaq. Chayhina kaptinqa, <input>s nisqanchikpas, s nisqanchikpas <label>wawqipura elementokunam, huk <input>ukhupi huk <label>. Kayqa aswan pisi rimayniyuqmi imaynachus idchaymanta foratributokuna chaymanta <input>chaymanta tinkinapaq ninayki tiyan <label>.

Ñawpaqmanta churasqa (pilasqa) .

Ñawpaqmanta, mayqin yupay qutukuna chaymanta radiokuna chaylla wawqintin kanku sayaqmanta pilasqa chaymanta allinta espaciasqa kanqa .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline

.form-check-inlineHuñuy qutukunata icha radiokunata kikin sayaq filapi mayqinmanpas yapaspa .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Sin etiquetas

Mana ima etiqueta qillqayuq kaq .position-staticukhupi yaykusqakunaman yapay . .form-checkYuyariyraq wakin forma etiquetata quyta yanapaq tecnologiakunapaq (kayhina, llamk'achispa aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Pallay

Bootstrap ruwasqa display: blockchaymanta width: 100%yaqa llapa formulario kamachiyniykuman, formulariokuna ñawpaqmanta sayaqpi pila kanqa. Yapa clasekuna llamk'achiy atikunman kay churayta sapa formulario kaqpi tikranapaq.

Huñukunata ruway

Clase nisqa .form-groupaswan facilmi wakin estructurata formulariokunaman yapanapaq. Huk flexible claseta qun mayqinchus etiquetakuna, kamachiykuna, akllana yanapakuy qillqa chaymanta formulario chiqaqchay willayta allin huñuyta kallpachan. Por defecto solo aplica margin-bottom, ichaqa necesitasqanman hina yapa estilokunata hapin .form-inline. Chaytaqa <fieldset>s, <div>s utaq yaqa mayqin elementowanpas llamk’achiy.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Formulario de rejilla

Aswan sasachakuyniyuq formulariokunata ruwayta atikunman rejilla claseykuwan. Kaykunata llamk'achiy formulario churanapaq mayqinkunachus achka columnakuna, imaymana anchokuna chaymanta yapasqa chiqanchay akllanakuna mañanku.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Forma fila

Qampas , huk variación .rowñuqaykupa .form-rowestándar rejilla filamanta tikrayta atikunki chaymanta ñawpaqmanta columna canales kaqmanta aswan t'inkisqa chaymanta aswan compacto churanakuna kaqpaq llallichin.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Aswan sasachakuyniyuq churaykunapas ruwakunmanmi chay sistema de rejilla nisqawan.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Forma horizontal nisqa

Rejillawan horizontal formulariokunata ruway, .rowclaseta huñukuna ruwanapaq yapaspa chaymanta .col-*-*clasekunata llamk'achispa etiquetakunaykipa chaymanta controlkunaykipa anchunta willanaykipaq. Aswan allinta sniykiman yapay .col-form-labelchaymanta <label>chaymanta paykuna verticalmente chawpichasqa kanku paykunap asociado formulario kamachiyninkunawan.

Wakin kutikunapi, ichapas margen utaq relleno utilidadkuna llamk'achinayki tiyan chay allin alineación necesitasqaykita ruwanaykipaq. Ejemplopaq, chay padding-topon our pilasqa radio yaykuykuna etiquetata hurqurqayku aswan allin qillqa base linea chiqanchaypaq.

Radiokuna
Caja de verificación 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Dimensionamiento de etiqueta de forma horizontal nisqa

Aseguray .col-form-label-smutaq s utaq sniykiman .col-form-label-lgallinta qatipanaykipaq chaymanta .<label><legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Dimensionamiento de columna

Ñawpaq ejemplokunapi rikuchisqa hina, rejilla sistemaykuqa mayqin yupay .cols kaqtapas huk .rowutaq ukhupi churayta atikun .form-row. Paykunaqa chay tarikuq anchota kaqllata paykunapura rakinqaku. Hinallataq huk huch'uy huñu columnakunaykimanta akllayta atikunki aswan utaq aswan espaciota hap'inaykipaq, puchuq .cols kaqlla puchuqninta rakin, sapanchasqa columna clasekuna hina .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-dimensionamiento

Uraypi ejemplo huk flexbox yanapakuyta llamk'achin verticalmente chawpichaypaq contenidokunata chaymanta tikran .colchaymanta .col-autocolumnakunayki necesitasqanmanhinalla espaciota hap'in. Huk rimaypiqa, columnaqa kikinpa sayayninmi imakuna kasqanmanta.

@ . 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Chaymanta chayta huk kutitawan chaqruyta atikunki sayay-específica columna clasekunawan.

@ . 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Hinaspapas sut’inmi controles de formulario personalizado nisqakuna yanapasqa kanku.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Formularios en línea

Clasewan .form-inlinehuk serie etiquetakuna, formulario controlkuna chaymanta botones huk sapalla horizontal filapi rikuchinaykipaq. Formulario kamachiykuna chiru ukhupi formulariokuna ukhupi pisilla hukniray kanku ñawpaqmanta estadonkumanta.

  • Controles kanku display: flex, mayqin HTML yuraq espaciotapas urmachispa chaymanta alineación kamachiyta quyta atikunki espaciamiento kaqwan chaymanta flexbox yanapakuykunawan.
  • Kamachiykuna chaymanta yaykuna huñukuna chaskinku width: autoBootstrap ñawpaqmanta churasqa kaqta llallinanpaq width: 100%.
  • Kamachiykuna sapalla rikukunku chirullapi qhawanakunapi mayqinkunachus 576px anchoyuq kanku aswan pisi qhawanakuna kuyuchina dispositivokunapi yupaypaq.

Ichapas makiwan sapalla formulario kamachiykuna ancho kaqninta chaymanta chiqanchayta espaciamiento yanapakuykunawan (urapi rikuchisqa hina) allichanayki tiyan. Tukuyninpaq, ama hina kaspa sapa kuti huk <label>sapa formulario kamachiywan churay, mana pantalla ñawiriq watukuqkunamanta pakayta necesitanki chaypas .sr-only.

@ . 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Sapanchasqa formulario kamachiykuna chaymanta akllanakuna yanapasqallataq kanku.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Pakasqa etiquetakunap huk kaqnin

Yanapakuq tecnologiakuna pantalla ñawiriqkuna hina sasachakuyniyuq kanqa formulariokunaykiwan sichus mana sapa yaykuypaq etiquetata churankichu. Kay chiru ukhupi formulariokunapaq, .sr-onlyclaseta llamk'achispa etiquetakunata pakayta atinki. Yanapakuq tecnologiakuna kaqpaq huk etiqueta quypaq aswan huk ruwanakuna kanku, kayhina aria-label, aria-labelledbyutaq titleatributo kaqhina. Sichus mana mayqinpas kaykunamanta kanchu, yanapaq tecnologiakuna placeholderatributo llamk'achiyta atinku, sichus kan, ichaqa reparay kay llamk'achiyta placeholderhuk etiquetado ruwaykunapaq rantinpi hina mana yuyaychasqachu.

Yanapakuy qillqa

Bloque-nivel yanapakuy qillqa formulariokunapi ruwakunman llamk'achispa .form-text(awpaq riqsisqa .help-blockv3 kaqpi hina). Chiru ukhupi yanapakuy qillqaqa ima chiru HTML elementotapas chaymanta yanapakuy clasekunata hina llamk'achispa flexiblemente ruwakunman .text-muted.

Yanapakuy qillqata formulario kamachiykunawan tinkuchispa

Yanapakuy qillqaqa sut'imanta formulario kamachiywan tinkisqa kanan tiyan chaymanta aria-describedbyatributo llamk'achiyta tinkin. Kayqa yanapakuq tecnologiakuna —pantalla ñawiriqkuna hina— kay yanapakuy qillqata willanqa mayk'aq llamk'achiq kamachiyman enfocakun utaq yaykun.

Yanapakuy qillqa uraypi yaykuchiykuna nisqawanmi estilochasqa kanman .form-text. Kay clase display: blockwakin pata margenta yapan chaymanta yapan chaymanta mana sasa espaciamiento kaqpaq hawa yaykuykunamanta.

Contraseñayki 8-20 caracterkuna sayayniyuq kanan tiyan, letrakuna yupaykunayuq kanan tiyan, manataq espaciokuna, especial caracterkuna utaq emoji kananchu tiyan. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Chiru ukhupi qillqa mayqin típico chiru ukhupi HTML elementotapas llamk'achiyta atin (huk <small>, <span>, icha huk ima) mana imawan aswan huk yanapakuy clase kaqwan.

8-20 qillqayuqmi kanan. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Formularios para discapacitados

Huk yaykusqapi boolean laya yapay, disabledllamk'achiq tinkiykuna hark'ananpaq chaymanta aswan k'anchariq rikurinanpaq.

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

disabledHuk kaqman atributota yapay <fieldset>llapa kamachiykunata ukhupi mana llamk'achinapaq.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>
Advertencia con anclajes

Ñawpaqmanta, maskaqkuna llapa nativo formulario kamachiykunata ( <input>, <select>chaymanta <button>elementokuna) a ukhupi <fieldset disabled>mana llamk'achisqa hina qhawanqa, iskaynin teclado chaymanta sillu tinkiykuna paykunapi hark'aspa. Ichaqa, sichus formularioykipi <a ... class="btn btn-*">elementokunatapas churan chayqa, kaykunamanqa huk estilollatam qusqa kanqa pointer-events: none. Imaynatachus t'aqapi rikusqa mana atichisqa estadomanta botones kaqpaq (hinallataq específicamente huch'uy t'aqapi ancla elementokuna kaqpaq), kay CSS propiedad manaraq estandarizadachu chaymanta mana hunt'asqa yanapasqachu Internet Explorer 10 kaqpi, chaymanta mana teclado ruwaqkunata hark'anqachu kayta kay t’inkikunata qhawayta utaq llamk’achiyta atiq. Chaymi mana imamanta manchakuspa, JavaScript ruwasqa llamk'achiy chayhina t'inkikunata mana llamk'achinaykipaq.

Chawpi maskaqpa tupachiynin

Bootstrap kay estilokuna llapa maskaqkunapi ruwanqa chaypas, Internet Explorer 11 chaymanta uraypi mana hunt'asqatachu yanapanku disabledatributota huk kaqpi <fieldset>. Sapanchasqa JavaScript llamk'achiy kay maskaqkunapi chakra huñuta mana llamk'achinaykipaq.

Validación nisqa

Chanin, ruwanapaq yuyaychaykunata quy llamk'aqniykikunaman HTML5 formulario chiqaqchaywan– llapa yanapasqa maskaqniykupi tarikun . Akllay maskaq ñawpaqmanta chiqaqchay yuyaymanta, utaq sapanchasqa willakuykunata ruway ruwasqa claseykuwan chaymanta qallariq JavaScript kaqwan.

Kunan sapanchasqa chiqaqchay estilokuna llamk'achiyta yuyaychayku, imaynachus nativo maskaq ñawpaqmanta chiqaqchay willakuykunaqa mana sapa kuti yanapakuq tecnologiakuna llapa maskaqkunapi (aswan riqsisqa, Chrome mesapi chaymanta kuyuchinapi) rikuchisqachu.

Imayna llamkan

Kaypi imayna formulario chiqaqchay Bootstrap kaqwan llamk'an:

  • HTML formulario chiqaqchayqa CSS kaqpa iskay pseudo-clases kaqnintakama ruwakun, :invalidchaymanta :valid. <input>, <select>, <textarea>elementokunamanpas churakunmi .
  • Bootstrap alcance :invalidchaymanta :validestilokuna tayta .was-validatedclase kaqman, aswanta chaymanta <form>. Mana hina kaqtinqa, mayqin mañasqa pampapas mana chaniyuq p'anqa kargapi mana allin hinam rikuchin. Kayhina, akllayta atikunki mayk'aq chaykunata llamk'achiyta (tipicamente formulario apachiyta munasqa kaptin).
  • Formulariopa rikchayninta musuqmanta churanapaq (kayhina, AJAX llamk'achispa formulario dinámico apachiykunapi), .was-validatedclaseta chaymanta <form>yapamanta hurquymanta hurquy.
  • Huk kutichiy hina, .is-invalidchaymanta .is-validclasekuna llamk'achisqa kanman pseudo-clases rantipi sirwiq lado chiqaqchaypaq . Paykunaqa manan .was-validatedtayta mama clasetachu mañakunku.
  • Imayna CSS llamk'ayninpi harkaykunarayku, mana (kunan) estilokuna huk kaqman churayta atiykuchu <label>mayqinchus DOM kaqpi huk formulario kamachiypa ñawpaqninpi hamun mana ruwasqa JavaScript yanapakuywan.
  • Llapan kunan pacha maskaqkuna yanapakunku harkasqa chiqaqchay API kaqmanta , huk serie JavaScript ruwanakuna formulario kamachiykunata chiqaqchaypaq.
  • Willakuykuna maskaqpa ñawpaqmanta ruwasqakunata llamk'achinman (hukniray sapa maskaqpaq, chaymanta mana CSS kaqnintakama estiloyuq) utaq sapanchasqa yuyaychay estilokunayku HTML chaymanta CSS yapasqawan.
  • Sapanchasqa chiqap willaykunata setCustomValidityJavaScript kaqpi quyta atikunki.

Chayta yuyaypi, kay qatiq demostracionkunata qhaway sapanchasqa formulario chiqaqchay estilokunaykupaq, akllana servidor lado clasekuna chaymanta maskaq ñawpaqmanta ruwasqakuna.

Estilos personalizados

Sapanchasqa Bootstrap formulario chiqaqchay willakuykunapaq, novalidateboolean atributota yapanayki tiyan qampaq <form>. Kayqa maskaqpa ñawpaqmanta kutichiy yanapakuykunata mana llamk'achinchu, ichaqa JavaScript kaqpi formulario chiqaqchay APIkunaman yaykuyta qunraq. Uraypi kaq formulariota apachinaykipaq kallpanchakuy; JavaScriptykuqa apachiy ñit'inata hark'anqa chaymanta qamman yuyaykunata apachinqa. Kachayta munachkaspa, rikunki :invalidchaymanta :validestilokuna formulario kamachiyniykiman churasqa.

Sapanchasqa kutichiy estilokuna ruwasqa llimp'ikunata, fronterakunata, enfoque estilokunata chaymanta qhipa iconokuna aswan allin yuyaykunata willanapaq churanku. <select>s nisqapaq qhipa siq'ikunaqa , nisqawanllam kachkan .custom-select, manam .form-control.

Allinmi rikchakun!
Allinmi rikchakun!
@ .
Ama hina kaspa, huk ruraqpa sutinta akllay.
Ama hina kaspa, huk allin llaqtata quy.
Ama hina kaspa, huk allin estadota quy.
Ama hina kaspa, huk allin cremallerata quy.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Navegadorpa ñawpaqmanta churasqa

¿Manachu sapanchasqa chiqaqchay kutichiy willaykunapi utaq JavaScript qillqaypi formulario ruwaykunata tikranapaq interesasqa? Tukuy allin, maskaqpa ñawpaqmanta churasqakunata llamk'achiy atikunki. Uraypi kaq formulariota apachiyta kallpanchakuy. Navegadorniykimanta chaymanta OS kaqmanta, huk pisi hukniray estilo retroalimentación kaqmanta rikunki.

Kay yuyaychay estilokuna mana CSS kaqwan estilochasqa kaptinpas, JavaScript kaqnintakama kutichiy qillqata ruwayta atikunkiraq.

@ . 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Servidor lado

Cliente-ladopi chiqaqchayta llamk'achiyta yuyaychayku, ichaqa sichus sirwiq-ladopi chiqaqchayta munanki, mana allin chaymanta allin formulario pampakunata chaymanta kaqwan rikuchiyta .is-invalidatikunki .is-valid. Reparay .invalid-feedbackchaypas yanapakun kay clasekunawan.

Allinmi rikchakun!
Allinmi rikchakun!
@ .
Ama hina kaspa, huk ruraqpa sutinta akllay.
Ama hina kaspa, huk allin llaqtata quy.
Ama hina kaspa, huk allin estadota quy.
Ama hina kaspa, huk allin cremallerata quy.
Manaraq apachichkaspaqa ari ninaykichik tiyan. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Yanapasqa elementokuna

Ejemplo formularioykuqa nativo textual <input>s patamanta rikuchin, ichaqa formulario validación estilokuna <textarea>s kaqpaq chaymanta sapanchasqa formulario controles kaqpaqpas kanku.

Ama hina kaspa, qillqana pampapi huk willayta qillqay.
Mana allin kutichiy qillqamanta rikch'anachiy
Aswan rikch'ana mana allin kutichiy qillqa
Ejemplo mana allin sapanchasqa akllay kutichiy
Mana allin sapanchasqa willañiqi kutichiykunata rikch'anachiy 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Yanapakuykuna

Sichus formulario churasqayki saqin, .{valid|invalid}-feedbackclasekuna clasekunawan tikrayta atikunki .{valid|invalid}-tooltiphuk estiloyuq yanapakuypa yuyaychayninpi chiqaqchay yuyaykunata rikuchinaykipaq. Aseguray huk tayta mamawan position: relativechaypi herramientakuna churanapaq. Uraypi kaq ejemplopi, columna claseykuqa kaytayuqña kanku, ichaqa proyectoyki huk wak churayta mañakunman.

Looks good!
Looks good!
@ .
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Ama hina kaspa, huk allin cremallerata quy. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Formularios personalizados

Aswan ruwanapaq chaymanta chakana maskaqpa tupachiyninpaq, hunt'asqa ruwasqa formulario elementoykuta llamk'achiy maskaqpa ñawpaqmanta ruwasqakunata tikranapaq. Paykunaqa semántico chaymanta yaykuy atikuq markapa hawanpi ruwasqa kanku, chayrayku paykunaqa ima ñawpaqmanta ruwasqa formulario kamachiypaqpas takyasqa sustitutokuna kanku.

Cajas de verificación y radios

Sapa cuadro de verificación chaymanta radio <input>chaymanta <label>paris hukwan p'istuykusqa <div>control ruwasqayku ruwanapaq. Estructural nisqapiqa, kayqa kikin ruwaymi ñawpaqmanta ruwasqanchikwan .form-check.

Llapa estadoykupaq wawqikuna akllaq ( ~) llamk'achiyku <input>—hina :checked— allinta estilopaq ruwasqayku formulario rikuchiqniykupaq. Clasewan kuskachasqa kaptinqa , sapa imapaq qillqasqatapas 's estadoman .custom-control-labelhinam estilochayta atichwan .<input>

Pakayku ñawpaqmanta <input>kaqwan opacitychaymanta llamk'achiyku .custom-control-labelmusuq sapanchasqa formulario rikuchiqta ruwanapaq chaymanta ::beforechaymanta ::after. Llakikuypaq mana huk sapanchasqa ruwayta atiykuchu chaymanta chayllamanta <input>imaraykuchus CSS's contentmana chay elementopi llamk'anchu.

Riqsisqa suyukunapi, base64 churasqa SVG siq'ikunata Open Iconic kaqmanta llamk'achiyku . Kayqa aswan allin kamachiyta quwanchik estilo ruwanapaq chaymanta churanapaq tukuy maskaqkuna chaymanta dispositivokuna kaqpi.

Cajas de verificación

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Sapanchasqa qhaway qutukunapas pseudo claseta llamk'achiyta atinku :indeterminatemayk'aq makiwan JavaScript kaqnintakama churasqa (mana kanchu HTML atributo chayta willanapaq).

Sichus jQuery llamk'achkanki, kayhina imapas suficiente kanan tiyan:

$('.your-checkbox').prop('indeterminate', true)

Radiokuna

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inline

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Wañuchisqa

Sapanchasqa qhaway cuadrokuna chaymanta radiokuna mana llamk'achiy atikunkutaq. disabledBoolean atributo kaqman yapay <input>chaymanta sapanchasqa rikuchiq chaymanta etiqueta willakuy kikinmanta estilochasqa kanqa.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Interruptores

Huk tikray huk sapanchasqa qhaway qutumanta markayuq ichaqa .custom-switchhuk tikray tikrayta ruwanapaq claseta llamk'achin. Switches nisqakunapas disabledatributota yanapan.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Menú nisqapi akllay

Sapanchasqa <select>menúkuna huk sapanchasqa clasellata necesitanku, .custom-selectsapanchasqa estilokuna llamk'achinapaq. Sapanchasqa estilokuna <select>'s qallariy rikch'aypi limitasqa kanku chaymanta mana s tikrayta atinkuchu <option>maskaqpa harkayninrayku.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Huch'uy hatun sapanchasqa akllanakunamantapas akllayta atikunki kikin sayayniyuq qillqa yaykuyniykuwan tupananpaq.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Chay multipleatributupas yanapasqataqmi:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Imaynan sizeatributo kashan hina:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Aypasqan

Sapanchasqa <input type="range">kamachiykunata ruway .custom-range. Pista (qhipa kaq) chaymanta hatun maki (chani) iskayninku estiloyuq kanku kikin rikunankupaq tukuy maskaqkunapi. Imaynachus IE chaymanta Firefox sapalla yanapanku “hunt’ayta” paykunap pista paña utaq paña makimanta huk ñan hina rikuywan ñawpaqman puriyninta rikuchinapaq, kunan mana yanapaykuchu.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Rango yaykuykuna implícito chanikunayuq kanku minchaymanta max— 0chaymanta 100, chaymanta. Musuq chanikunata niyta atinki chaymanta minchaymanta maxlayakunata llamk'achiqkunapaq.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Ñawpaqmanta, rango yaykuykuna “snap” hunt'a yupay chanikunaman. Kayta tikranaykipaqqa, huk stepchanita niyta atinki. Uraypi kaq ejemplopiqa, iskay kutita ruwanchikmi step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Willayta maskaq

Sapanchasqa willañiqi yaykuyta kawsachinapaq yuyaychasqa plugin: bs-custom-file-input , chayta kunan kaypi docsniykupi llamk'achkayku.

Willañiqi yaykuchiyqa aswan gnarly qutumanta kachkan chaymanta yapasqa JavaScript mañan sichus chaykunata ruwanawan Akllay willañiqiwan... chaymanta akllasqa willañiqi suti qillqawan tinkiyta munanki.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Pakayku ñawpaqmanta willañiqita <input>vía nisqawan opacitychaymanta chaypa rantinpi estilota <label>. Chay ñit'inaqa ::after. Tukuyninpaq, huk widthchaymanta heightchaymanta <input>chaypaq allin espaciamiento kaqpaq muyuriq contenidopaq willayku.

SCSS kaqwan watiqakunata tikray utaq ruway

Chay :lang()pseudo-clase nisqawanmi “Browse” nisqa qelqata huk simikunaman t’ikrakunman. Sass tikraqman qillqakunata llalliy utaq yapay $custom-file-texttupaq simi etiquetawan chaymanta kitipi kaq watiqakunawan. Inglés simipi kaskaqkunapas chaynallatam ruwachwan. Ejemplopaq, kaypi imaynatas huk runa kastilla simipi t'ikrayta yapanman (kastilla simip codigonqa es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Kaypi lang(es)huk kastilla simipi t'ikranapaq sapanchasqa willañiqi yaykuchiypi ruwaypi kachkan:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Qillqaykip siminta (icha huch'uy sach'a) allinta churanayki tiyan, allin qillqa rikuchisqa kananpaq. Kayqa ruwakunman elemento kaqpi langatributo kaqwan <html>utaq Content-LanguageHTTP umalliq kaqpi , wak ruwanakuna ukhupi.

HTML nisqawan watiqakunata tikray utaq ruway

Bootstrap huk ñanta qun “Maskay” qillqata HTML kaqpi tikraypaq kay data-browseatributo kaqwan mayqinchus sapanchasqa yaykuna etiquetaman yapasqa kanman (holandés simipi ejemplo):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>