in English

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.

Le axa sia dzi

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 to type="submit", eyata dze agbagba nàgblɔe tẽ eye nàde a type.

Esi Bootstrap wɔa dɔ display: blockeye 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-bottomutilities ŋu, eye nàzã mɔfiame ɖeka le agbalẽvia katã me hena nusiwo mewɔa tɔtrɔ o.

Miate ŋu atu miaƒe nɔnɔmetatawo alesi mielɔ̃e faa, kple <fieldset>s, <div>s, alo nu bubu ɖesiaɖe kloe.

Kpɔɖeŋu ƒe dzesideŋkɔ

Dzesidedenu bubu

html

<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-classesSass ƒe tɔtrɔa ŋudɔ (le dɔ wɔm le gɔmedzedzea me).

html

<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-classesSass ƒe tɔtrɔa ŋudɔ (le dɔ wɔm le gɔmedzedzea me).

html

<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.

html

<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 .rowklass 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-tople 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.

html

<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-smalo .col-form-label-lgna wò <label>s alo <legend>s be nàwɔ ɖe kple ƒe lolome dzi .form-control-lgnyuie .form-control-sm.

Email dzi

html

<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

.colAbe 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 .cols susɔeawo ma susɔeawo sɔsɔe, kple sɔtiwo ƒe hatsotso tɔxɛwo abe .col-sm-7.

html

<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-autoale 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.

html

<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ŋ.

html

<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-12kpena ɖe ame ŋu be woaƒo agbalẽvia dzi kpɔkpɔwo nu ƒu ɖekae kple bubuwo. The .align-items-centerla ɖoa nɔnɔme ƒe akpaawo ɖe titina, si wɔnɛ be .form-checkwoɖoa wo ɖe ɖoɖo nu nyuie.

html

<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>