Nɔnɔme
Na wò agbalẽviwo ƒe ɖoɖo aɖewo—tso fli me va ɖo tsia dzi va ɖo grid ƒe dɔwɔwɔ siwo wowɔ ɖe ɖoɖo nu dzi—kple míaƒe agbalẽviwo ƒe ɖoɖo ƒe tiatiawɔblɔɖewo.
Kpekpeɖeŋugbalẽviwo
Ele be nɔnɔmetata ƒe agblewo ƒe ƒuƒoƒo ɖesiaɖe nanɔ <form>
element aɖe me. Bootstrap menaa atsyã si woɖo ɖi na <form>
element la o, gake browser ƒe nɔnɔme sẽŋu aɖewo li siwo wona le gɔmedzedzea me.
- Nu yeye le browser ƒe agbalẽviwo mea? Bu MDN ƒe agbalẽvia ƒe nuŋlɔɖiwo me toto ŋu hena nɔnɔme siwo li ƒe wɔwɔfia kple xexlẽdzesi bliboa.
<button>
s within a<form>
default totype="submit"
, eyata dze agbagba nàgblɔ nya aɖe koŋ eye nàde atype
.- Àteŋu awɔ nuŋlɔɖi ƒe akpa ɖesiaɖe le nuŋlɔɖi me kple
disabled
nɔnɔme si le<form>
.
Esi wònye be Bootstrap wɔa dɔ display: block
eye wòzãa width: 100%
míaƒe agbalẽviwo ƒe dziɖuɖuwo katã kloe ta la, agbalẽviwo aƒo ƒu ɖe tsitrenu le gɔmedzedzea me. Woateŋu azã klass bubuwo atsɔ atrɔ asi le ɖoɖo sia ŋu le agbalẽvi ɖesiaɖe nu.
Dɔwɔnu Siwo Wozãna
Margin utilities nye mɔ bɔbɔetɔ kekeake si dzi woato atsɔ xɔtuɖoɖo aɖewo akpe ɖe agbalẽviwo ŋu. Wonaa ŋkɔwo ƒe ƒuƒoƒo veviwo, dziɖuɖuwo, agbalẽvi ƒe nuŋɔŋlɔ si woate ŋu atia, kple agbalẽvi ƒe kpeɖodzi gbedasiwo. Míele aɖaŋu ɖom be nàlé ɖe margin-bottom
utilities ŋu, eye nàzã mɔfiame ɖeka le agbalẽvia katã me hena ɖekawɔwɔ.
Miate ŋu atu miaƒe nɔnɔmetatawo alesi mielɔ̃e faa, kple <fieldset>
s, <div>
s, alo nu bubu ɖesiaɖe kloe.
<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>
Kpekpeɖeŋunamɔ̃ ƒe grid
Woateŋu atu agbalẽvi siwo sesẽ wu to míaƒe grid klasswo zazã me. Zã esiawo na nuŋlɔɖi ƒe ɖoɖo siwo hiã sɔti geɖe, kekeme vovovowo, kple ɖoɖowɔwɔ ƒe tiatia bubuwo. Ebia be woawɔ $enable-grid-classes
Sass ƒe tɔtrɔa ŋudɔ (aʋu le gɔmedzedzea me).
<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>
Tsiɖɔɖɔɖɔƒewo
By adding gutter modifier classes , àte ŋu akpɔ ŋusẽ ɖe gutter ƒe kekeme dzi le abe alesi wòle le fli me ene abe block mɔfiame ene. Azɔ hã, ebia be woawɔ $enable-grid-classes
Sass ƒe tɔtrɔa ŋudɔ (le dɔ wɔm le gɔmedzedzea me).
<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>
Woateŋu awɔ ɖoɖo siwo sesẽ wu hã kple grid ɖoɖoa.
<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>
Nɔnɔme si le tsia dzi
Wɔ nuŋlɔɖi siwo le tsia dzi kple grid la to .row
klass la tsɔtsɔ kpe ɖe ƒuƒoƒo ƒuƒoƒowo ŋu kple .col-*-*
klassawo zazã atsɔ agblɔ wò dzesiwo kple dziɖuɖuwo ƒe kekeme. Kpɔ egbɔ be yetsɔ kpe .col-form-label
ɖe wò <label>
s hã ŋu ale be woanɔ titina le tsitrenu kple woƒe nuŋlɔɖi ƒe dziɖuɖu siwo do ƒome kplii.
Ɣeaɖewoɣi la, ɖewohĩ ahiã be nàzã margin alo padding utilities atsɔ awɔ alignment deblibo ma si nèhiã. Le kpɔɖeŋu me, míeɖe padding-top
le míaƒe radio inputs ƒe dzeside si woƒo ƒu ɖe wo nɔewo dzi la ɖa be míawɔ nuŋɔŋlɔa ƒe gɔmedzedze nyuie wu.
<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>
Horizontal agbalẽvi ƒe dzeside ƒe lolome
Kpɔ egbɔ be yezã .col-form-label-sm
alo .col-form-label-lg
na wò <label>
s alo <legend>
s be nàwɔ ɖe kple ƒe lolome dzi .form-control-lg
nyuie .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>
Sɔtiwo ƒe lolome ɖoɖo
.col
Abe alesi woɖee fia le kpɔɖeŋu siwo do ŋgɔ me ene la, míaƒe grid ɖoɖoa na be nàte ŋu atsɔ s xexlẽme ɖesiaɖe ade .row
. Woama kekeme si li la ɖe wo dome sɔsɔe. Àteŋu atia wò sɔtiwo ƒe akpa sue aɖe hã be wòaxɔ teƒe geɖe alo sue aɖe, esime .col
s susɔeawo ma susɔeawo sɔsɔe, kple sɔtiwo ƒe hatsotso tɔxɛwo abe .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-sizing ƒe lolome
Kpɔɖeŋu si le ete zãa flexbox dɔwɔnu tsɔ ɖoa emenyawo titina le tsitrenu eye wòtrɔna .col
ɖe eŋu .col-auto
ale be wò sɔtiwo naxɔ teƒe geɖe ko alesi wòhiã. Ne míagblɔe bubui la, sɔtiawo ƒe lolome nɔa te ɖe emenyawo dzi.
<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>
Emegbe àteŋu agbugbɔ atsaka ema ake kple sɔti ƒe klass siwo ƒe lolome le koŋ.
<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>
Agbalẽvi siwo le fli me
Zã .row-cols-*
klassawo nàtsɔ awɔ ɖoɖo siwo le tsia dzi siwo ɖoa nya ŋu. By adding gutter modifier classes , míakpɔ gutters le mɔ siwo le tsia dzi kple esiwo le tsitrenu. Le asitelefon dzi nukpɔkpɔ kpuiwo dzi la, .col-12
kpena ɖe ame ŋu be woaƒo agbalẽvia dzi kpɔkpɔwo nu ƒu ɖekae kple bubuwo. The .align-items-center
la ɖoa nɔnɔme ƒe akpaawo ɖe titina, si wɔnɛ be .form-checkbox
woɖoa wo ɖe ɖoɖo nu nyuie.
<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>