Pallay
Formularioykikunaman wakin estructurata quy —inline kaqmanta horizontal kaqman sapanchasqa rejilla implementacionkunaman— formulario churana akllanaykuwan.
Formas
Sapa huñu formulario pampakuna huk <form>
elementopi tiyanan tiyan. Bootstrap mana elementopaq ñawpaqmanta ruwasqa estilota qunchu <form>
, ichaqa wakin kallpasapa maskaq ruwanakuna kanku chaymanta ñawpaqmanta qusqa.
- ¿Musuq maskaq formulariokunaman? Yuyaykuy MDN formulario documentokuna qhawayta huk qhawaypaq chaymanta hunt'asqa lista kaqpaq atributos kaqkunamanta.
<button>
s dentro de un<form>
default atype="submit"
, chayrayku kallpachakuy específico kanaykipaq chaymanta sapa kuti huktype
.- Huk formulario ukhupi sapa formulario elementota mana llamk'achiyta atinki chaymanta
disabled
atributo kaqwan<form>
.
Bootstrap ruwasqa display: block
chaymanta width: 100%
yaqa llapa formulario kamachiyniykuman, formulariokuna ñawpaqmanta sayaqpi pila kanqa. Yapa clasekuna llamk'achiy atikunman kay churayta sapa formulario kaqpi tikranapaq.
Utilidades
Margen utilidadkuna aswan facil ñan wakin estructura formulariokunaman yapanapaq. Paykunaqa etiquetakuna, kamachiykuna, akllana formulario qillqa chaymanta formulario chiqaqchay willakuypa sapsi huñuyta qunku. Utilidades kaqman k'askanayta yuyaychayku margin-bottom
, chaymanta huk chiqan ñanta tukuy formulario kaqpi llamk'achiyta huklla kananpaq.
Ama hina kaspa formularioykikunata imayna munasqaykiman hina ruway, <fieldset>
s, <div>
s utaq yaqa mayqin elementowanpas.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
Formulario de rejilla
Aswan sasachakuyniyuq formulariokuna ruwakunman rejilla claseykuwan. Kaykunata llamk'achiy formulario churanapaq mayqinkunachus achka columnakuna, imaymana anchokuna chaymanta yapasqa chiqanchay akllanakuna mañanku. Sass $enable-grid-classes
tikraq atichisqa kananta munan (ñawpaqmanta llamk'achisqa).
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Canales
By adding gutter modifier classes , atikunki controlta canal ancho kaqpi chaymanta inline kaqpi hinallataq bloque dirección kaqpi. Hinallataq $enable-grid-classes
Sass tikraq atichisqa kananta munan (kanchasqa ñawpaqmanta).
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Aswan sasachakuyniyuq churaykunapas ruwakunmanmi chay sistema de rejilla nisqawan.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-12">
<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>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
Forma horizontal nisqa
Rejillawan horizontal formulariokunata ruway, .row
claseta huñukuna ruwanapaq yapaspa chaymanta .col-*-*
clasekunata llamk'achispa etiquetakunaykipa chaymanta controlkunaykipa anchunta willanaykipaq. Aswan allinta sniykiman yapay .col-form-label
chaymanta <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-top
on our pilasqa radio yaykuykuna etiquetata hurqurqayku aswan allin qillqa base linea chiqanchaypaq.
<form>
<div class="row mb-3">
<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">
</div>
</div>
<div class="row mb-3">
<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">
</div>
</div>
<fieldset class="row mb-3">
<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>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<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>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Dimensionamiento de etiqueta de forma horizontal nisqa
Aseguray .col-form-label-sm
utaq s utaq sniykiman .col-form-label-lg
allinta qatipanaykipaq chaymanta .<label>
<legend>
.form-control-lg
.form-control-sm
<div class="row mb-3">
<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="row mb-3">
<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="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>
Dimensionamiento de columna
Ñawpaq rikch'anakunapi rikuchisqa hina, rejilla sistemaykuqa mayqin yupay .col
s kaqtapas huk ukhupi churayta atikun .row
. Paykunaqa chay tarikuq anchota kaqllata paykunapura rakinqaku. Hinallataq huk huch'uy huñu columnakunaykimanta akllayta atikunki aswan utaq aswan espaciota hap'inaykipaq, puchuq .col
s kaqlla puchuqninta rakin, sapanchasqa columna clasekuna hina .col-sm-7
.
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
Auto-dimensionamiento
Uraypi ejemplo huk flexbox yanapakuyta llamk'achin verticalmente chawpichaypaq contenidokunata chaymanta tikran .col
chaymanta .col-auto
columnakunayki necesitasqanmanhinalla espaciota hap'in. Huk rimaypiqa, columnaqa kikinpa sayayninmi imakuna kasqanmanta.
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<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">
<div class="form-check">
<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">Submit</button>
</div>
</form>
Chaymanta chayta huk kutitawan chaqruyta atikunki sayay-específica columna clasekunawan.
<form class="row gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<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">
<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">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Formularios en línea
Yachaykunata llamk'achiy .row-cols-*
kutichiq horizontal churaykunata ruwanapaq. Canal modificador clasekunata yapaspa , canalkunayuq kasunchik horizontal chaymanta vertical direccionkunapi. K'iti kuyuchina qhawaykunapi, chay .col-12
yanapakuykuna formulario kamachiykunata pila chaymanta aswan. Theqa .align-items-center
forma elementokunata chawpiman chiqanchan, .form-checkbox
allinta chiqanchayta ruwaspa.
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>