in English

Mpangilio

Ipe fomu zako muundo fulani—kutoka kwa mstari hadi ulalo hadi utekelezaji wa gridi maalum—kwa chaguo zetu za mpangilio wa fomu.

Katika ukurasa huu

Fomu

Kila kikundi cha sehemu za fomu kinapaswa kukaa katika <form>kipengele. Bootstrap haitoi mtindo chaguo-msingi kwa <form>kipengele, lakini kuna baadhi ya vipengele vikali vya kivinjari ambavyo vinatolewa na chaguo-msingi.

Je, ni mpya kwa fomu za kivinjari? Fikiria kukagua hati za fomu ya MDN kwa muhtasari na orodha kamili ya sifa zinazopatikana.
<button>s ndani ya <form>chaguo-msingi kwa type="submit", kwa hivyo jitahidi kuwa mahususi na kila wakati ujumuishe a type.

Kwa kuwa Bootstrap inatumika display: blockna width: 100%kwa karibu vidhibiti vyetu vyote vya fomu, fomu kwa chaguo-msingi zitapangwa kiwima. Madarasa ya ziada yanaweza kutumika kubadilisha mpangilio huu kwa misingi ya kila fomu.

Huduma

Huduma za ukingo ndio njia rahisi zaidi ya kuongeza muundo fulani kwenye fomu. Hutoa upangaji wa kimsingi wa lebo, vidhibiti, maandishi ya fomu ya hiari, na utumaji ujumbe wa uthibitishaji wa fomu. Tunapendekeza ushikamane na margin-bottomhuduma, na utumie mwelekeo mmoja katika fomu yote kwa uthabiti.

Jisikie huru kuunda fomu zako jinsi unavyopenda, na <fieldset>s, <div>s, au karibu kipengele kingine chochote.

Lebo ya mfano

Lebo nyingine

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>

Gridi ya fomu

Fomu ngumu zaidi zinaweza kujengwa kwa kutumia madarasa yetu ya gridi ya taifa. Tumia hizi kwa miundo ya fomu inayohitaji safu wima nyingi, upana tofauti, na chaguo za ziada za upatanishi. Inahitaji utofauti wa $enable-grid-classesSass kuwezeshwa (kuwashwa kwa chaguomsingi).

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>

Mifereji ya maji

Kwa kuongeza madarasa ya kurekebisha gutter , unaweza kuwa na udhibiti juu ya upana wa gutter pamoja na inline kama mwelekeo wa kuzuia. Pia inahitaji utofauti wa $enable-grid-classesSass kuwezeshwa (kuwashwa kwa chaguo-msingi).

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>

Mipangilio ngumu zaidi inaweza pia kuundwa kwa mfumo wa gridi ya taifa.

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>

Fomu ya usawa

Unda fomu za mlalo ukitumia gridi ya taifa kwa kuongeza .rowdarasa ili kuunda vikundi na kutumia .col-*-*madarasa kubainisha upana wa lebo na vidhibiti vyako. Hakikisha kuwa umeongeza .col-form-labelkwenye <label>s zako pia ili ziwe katikati wima na vidhibiti vyao vinavyohusiana vya fomu.

Wakati mwingine, labda utahitaji kutumia pambizo au huduma za kuweka pedi ili kuunda upatanishi bora unaohitaji. Kwa mfano, tumeondoa padding-toplebo ya pembejeo za redio zilizopangwa kwa rafu ili kupanga vyema msingi wa maandishi.

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>

Upimaji wa lebo ya fomu mlalo

Hakikisha unatumia .col-form-label-smau .col-form-label-lgkwa <label>s au <legend>s zako kufuata kwa usahihi saizi ya .form-control-lgna .form-control-sm.

Barua pepe

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>

Upimaji wa safu wima

Kama inavyoonyeshwa katika mifano iliyotangulia, mfumo wetu wa gridi ya taifa hukuruhusu kuweka nambari yoyote ya .cols ndani ya .row. Watagawanya upana unaopatikana kwa usawa kati yao. Unaweza pia kuchagua kikundi kidogo cha safu wima zako kuchukua nafasi zaidi au kidogo, huku .cols iliyobaki ikigawanya iliyosalia kwa usawa, na madarasa maalum ya safu kama .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>

Kuweka ukubwa kiotomatiki

Mfano ulio hapa chini hutumia matumizi ya flexbox kuweka kiwima maudhui na mabadiliko .colili .col-autosafu wima zako zichukue nafasi nyingi inavyohitajika. Weka njia nyingine, saizi ya safu yenyewe kulingana na yaliyomo.

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>

Kisha unaweza kuichanganya tena na madarasa ya safu wima ya saizi mahususi.

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>

Fomu za ndani

Tumia .row-cols-*madarasa kuunda mipangilio ya mlalo inayoitikia. Kwa kuongeza madarasa ya kurekebisha mifereji ya maji , tutakuwa na mifereji ya maji katika mwelekeo mlalo na wima. Kwenye tovuti finyu za kutazama za rununu, .col-12husaidia kuweka vidhibiti vya fomu na zaidi. Inalinganisha vipengele .align-items-centervya fomu hadi katikati, na kufanya .form-checkkulandanisha vizuri.

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>