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.

Wɔ kratafa yi so

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 to type="submit", enti bɔ mmɔden sɛ wobɛyɛ pɔtee na wode a type.
Wubetumi asiw fom element biara ano wɔ fom bi mu a disabledsu no wɔ <form>.

Esiane sɛ Bootstrap di dwuma display: blockna 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-bottomutilities 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.

Nhwɛso label

Nkyerɛwde foforo

<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-classesSass 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-classesSass 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 .rowclass 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-labelwo <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-smanaa .col-form-label-lgwo <label>s anaa s bedi dwuma de adi ne <legend>kɛse no akyi yiye ..form-control-lg.form-control-sm

Email a wɔde mena

<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 .cols 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 .cols 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 .colkɔ .col-autosɛ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-centeraligns form elements no kɔ mfinimfini, na ɛma .form-checkboxalign 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>