Kobongisa
Pesa ba formulaire na yo mwa structure —kobanda na inline tii na horizontal tii na ba implémentations ya grille personnalisé —na ba options na biso ya layout ya formulaire.
Baformilɛrɛ
Lisanga nyonso ya bisika ya formulaire esengeli kofanda na kati ya <form>
eleman moko. Bootstrap epesaka styling ya défaut te mpo na <form>
élément, kasi ezali na mwa ba fonctionnalités ya navigateur ya makasi oyo epesami na ndenge ya défaut.
- Ya sika na ba formulaire ya navigateur? Tala kotala lisusu ba docs ya formulaire ya MDN pona botali ya mozindo pe liste mobimba ya ba attributs oyo ezali.
<button>
s na kati ya<form>
default totype="submit"
, yango wana sala makasi ozala spécifique mpe otia ntango nyonso atype
.- Okoki ko désactiver élément nionso ya formulaire na kati ya formulaire na
disabled
attribut na<form>
.
Lokola Bootstrap esalemaka display: block
mpe width: 100%
na presque ba contrôles na biso nionso ya formulaire, ba formulaire ekozala par défaut empiler verticalement. Ba kelasi ya kobakisa ekoki kosalelama mpo na kobongola lolenge oyo na kotalela formulaire moko.
Ba utilités
Ba utilitaires ya marge ezali lolenge ya pete ya kobakisa mwa structure na ba formulaire. Bazali kopesa groupement ya base ya ba étiquettes, ba contrôles, texte ya formulaire optionnel, mpe messagerie ya validation ya formulaire. Tosengi kokangama na margin-bottom
ba utilités, mpe kosalela direction moko na formulaire mobimba mpo na boyokani.
Bozala na bonsomi ya kotonga baformilɛrɛ na bino ndenge nini bolingi, na <fieldset>
s, <div>
s, to pene na eloko mosusu nyonso.
<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>
Formulaire ya grille
Ba formulaire ya complexe mingi ekoki kotongama na kosalelaka ba classes na biso ya grille. Salelá yango mpo na mabongisi ya baformilɛrɛ oyo esɛngaka makonzí mingi, bonene ndenge na ndenge, mpe banzela mosusu ya kosala boyokani. Esengaka $enable-grid-classes
variable ya Sass ezala activé (on par défaut).
<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>
Ba gouttières
Na kobakisa ba classes ya modificateur ya gouttière , okoki kozala na contrôle ya largeur ya gouttière na ndenge moko na direction ya inline lokola bloc. Esengi pe $enable-grid-classes
variable Sass ezala activé (on par défaut).
<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>
Ba layouts ya complexe mingi ekoki pe kosalama na système ya grille.
<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>
Forme horizontale
Bosala ba formulaire horizontal na grille na kobakisa .row
classe na ba groupes ya ba formes mpe kosalela ba .col-*-*
classes mpo na kolakisa largeur ya ba étiquettes mpe ba contrôles na yo. Bozala sûr ya kobakisa .col-form-label
na s na bino <label>
lokola po bazala verticalement centré na ba contrôles ya formulaire na bango associé.
Na bantango mosusu, mbala mosusu osengeli kosalela ba utilitaires ya marge to ya padding mpo na kosala alignment wana ya kokoka oyo osengeli na yango. Ndakisa, tolongoli padding-top
na étiquette na biso ya ba entrées ya radio oyo etandami mpo na ko aligner malamu baseline ya texte.
<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>
Taille ya étiquette ya formulaire horizontale
Kobosana te kosalela .col-form-label-sm
to .col-form-label-lg
na <label>
s to <legend>
s na yo mpo na kolanda malamu bonene ya .form-control-lg
mpe .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>
Kosala bonene ya makonzí
Ndenge emonisami na bandakisa oyo eleki, système na biso ya grille epesaka yo nzela ya kotya motango nyonso ya .col
s na kati ya .row
. Bako kabola largeur oyo ezali également entre bango. Okoki mpe kopona mwa ndambo ya makonzí na yo mpo na kozwa esika mingi to moke, nzokande .col
s oyo etikali ekabolaka ndenge moko oyo etikali, na bakelasi ya makonzí ya sikisiki lokola .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>
Kosala bonene na yango moko
Ndakisa oyo ezali awa na nse esaleli utilitaire flexbox mpo na ko centrer verticalement makambo oyo ezali na kati mpe ebongwanaka .col
mpo .col-auto
ete ba colonne na yo ezwa kaka esika mingi ndenge esengeli. Soki tolobeli yango na ndenge mosusu, makonzí yango ekómaka na bonene na kotalela makambo oyo ezali na kati.
<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>
Na sima okoki ko remixer yango mbala moko lisusu na ba classes ya colonne spécifique ya taille.
<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>
Baformilɛrɛ oyo ezali na kati ya molɔngɔ
Salelá .row-cols-*
bakelasi mpo na kosala ba layouts horizontales oyo ekoki koyanola. By adding gutter modifier classes , tokozala na ba gouttières na ba direction horizontale na verticale. Na ba portes de vue mobile étroit, ba .col-12
aides empiler ba contrôles ya formulaire et plus. The .align-items-center
aligner ba éléments ya forme na kati, kosala .form-checkbox
alignment malamu.
<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>