Twa kwan
Ma wo fom ahorow no nhyehyɛe bi —efi inline so kosi horizontal so kosi custom grid implementations so —ne yɛn fom nhyehyɛe nhyehyɛe ahorow no.
Nkyerɛwee ahorow
Ɛsɛ sɛ fom mfuw kuw biara tra <form>
element bi mu. Bootstrap mma default styling biara mma <form>
element no, nanso browser no mu nneɛma bi wɔ hɔ a ahoɔden wom a wɔde ama default.
- Woyɛ foforo wɔ browser nkrataa so? Susuw ho sɛ wobɛhwɛ MDN krataa docs no mu ama woanya nsɛm a wɔaka abom ne su ahorow a ɛwɔ hɔ no din a edi mũ.
<button>
s within a<form>
default totype="submit"
, enti bɔ mmɔden sɛ wobɛyɛ pɔtee na wode atype
.- Wubetumi asiw fom element biara ano wɔ fom bi mu a
disabled
su no wɔ<form>
.
Esiane sɛ Bootstrap di dwuma display: block
na width: 100%
ɛkame ayɛ sɛ ɛyɛ yɛn fom controls nyinaa nti, forms bɛ default stack vertically. Wobetumi de adesua foforo adi dwuma de ayɛ nsakrae wɔ nhyehyɛe yi mu wɔ krataa biara so.
Nneɛma a wɔde di dwuma
Margin utilities yɛ ɔkwan a ɛyɛ mmerɛw a wobɛfa so de nhyehyɛe bi aka nkrataa ahorow ho. Wɔde mfitiaseɛ akuo a ɛfa labels, controls, optional form text, ne form validation messaging ho ma. Yɛkamfo kyerɛ sɛ bata margin-bottom
utilities ho, na fa akwankyerɛ biako di dwuma wɔ kratasin no nyinaa mu ma ɛyɛ pɛpɛɛpɛ.
Fa ahofadi si wo nkrataa no sɛnea wopɛ biara, a <fieldset>
s, <div>
s, anaa ɛkame ayɛ sɛ element foforo biara ka ho.
<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>
Fom grid no
Wobetumi de yɛn grid adesua ahorow no akyekye nkrataa a ɛyɛ den kɛse. Fa eyinom di dwuma ma fom nhyehyɛe a ɛhwehwɛ sɛ wɔde nkyerɛwde ahorow pii, ntrɛwmu ahorow, ne nhyehyɛe afoforo a wobɛpaw. Ɛhwehwɛ sɛ wɔma $enable-grid-classes
Sass variable no yɛ adwuma (on by default).
<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>
Nsu a ɛkɔ nsu mu
By adding gutter modifier classes , wubetumi anya tumi wɔ gutter no trɛw mu wɔ sɛnea ɛte wɔ inline no mu sɛ block akwankyerɛ. Afei nso ɛhwehwɛ sɛ wɔma $enable-grid-classes
Sass variable no yɛ adwuma (on by default).
<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>
Wobetumi nso de grid nhyehyɛe no ayɛ nhyehyɛe ahorow a ɛyɛ den kɛse.
<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>
Ɔkwan a wɔfa so yɛ ade a ɛkɔ soro
Fa grid no yɛ horizontal forms denam .row
class no a wode bɛka form groups ho na wode .col-*-*
classes no adi dwuma de akyerɛ wo labels ne controls no trɛw. Hwɛ hu sɛ wode bɛka .col-form-label
wo <label>
s nso ho sɛnea ɛbɛyɛ a wɔbɛyɛ vertically centered ne wɔn a ɛbata ho form controls.
Ɛtɔ mmere bi a, ebia ɛho behia sɛ wode margin anaa padding utilities di dwuma de yɛ saa alignment a edi mũ a wuhia no. Sɛ nhwɛso no, yɛayi nea padding-top
ɛwɔ yɛn stacked radio inputs label no so na ama nsɛm no mfiase no ahyia yiye.
<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 kratasin label no kɛseyɛ
Hwɛ hu sɛ wode .col-form-label-sm
anaa .col-form-label-lg
wo <label>
s anaa s bedi dwuma de adi ne <legend>
kɛse no akyi yiye ..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>
Kɔla a wɔde yɛ kɛse
Sɛnea wɔakyerɛ wɔ nhwɛso ahorow a atwam no mu no, yɛn grid nhyehyɛe no ma wo kwan ma wode .col
s dodow biara gu a .row
. Wɔbɛkyekyɛ ntrɛwmu a ɛwɔ hɔ no mu pɛpɛɛpɛ wɔ wɔn ntam. Wubetumi nso apaw wo nkyerɛwde ahorow no fã ketewaa bi de agye baabi kɛse anaa kakraa bi, bere a .col
s a aka no kyekyɛ nkae no mu pɛpɛɛpɛ, a nkyerɛwde ahorow pɔtee bi te sɛ .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 a wɔde yɛ nneɛma
Nhwɛsoɔ a ɛwɔ aseɛ ha yi de flexbox utility di dwuma de hyɛ emu nsɛm no mfimfini gyina hɔ na ɛsesa .col
kɔ .col-auto
sɛdeɛ ɛbɛyɛ a wo columns no bɛgye baabi dodoɔ a ɛhia nko ara. Sɛ yɛbɛka no ɔkwan foforo so a, kɔla no kɛse gyina emu nsɛm so.
<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>
Afei wubetumi remix saa bio ne size-specific column classes.
<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>
Nkrataa a ɛwɔ intanɛt so
Fa .row-cols-*
adesua ahorow no yɛ nhyehyɛe ahorow a ɛwɔ soro a ɛyɛ mmuae. By adding gutter modifier classes , yɛbɛnya gutters wɔ horizontal ne vertical akwankyerɛ. Wɔ mobile viewports teateaa so no, na .col-12
ɛboa stack form controls ne nea ɛkeka ho. The .align-items-center
aligns form elements no kɔ mfinimfini, na ɛma .form-checkbox
align no yɛ pɛpɛɛpɛ.
<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>