Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Uyilo

Nika iifomu zakho ulwakhiwo oluthile-ukusuka kumgca ukuya kuthi tyaba ukuya kuphunyezo lwegridi yesiko-ngokhetho lwethu loyilo lwefomu.

Kweli phepha

Iifom

Iqela ngalinye lemihlaba yefomu kufuneka lihlale kwindawo <form>ethile. I-Bootstrap ayiboneleli ngesitayile esingagqibekanga sento <form>, kodwa kukho iimpawu zebrawuza ezinamandla ezibonelelwa ngokungagqibekanga.

  • Intsha kwiifom zebrawuza? Cinga ngokujonga kwakhona amaxwebhu efom ye-MDN ukuze ufumane isishwankathelo kunye noluhlu olupheleleyo lweempawu ezikhoyo.
  • <button>s ngaphakathi <form>kokungagqibekanga ukuya type="submit", ngoko zama ukucacisa kwaye usoloko ubandakanya i type.
  • Uyakwazi ukukhubaza yonke ifom element ngaphakathi kwefomu kunye disablednophawu olukwi <form>.

Kuba iBootstrap isebenza display: blockkwaye width: 100%phantse kulo lonke uhlobo lwethu lolawulo, iifom ziya kuthi ngokungagqibekanga zipakishwe ngokuthe nkqo. Iiklasi ezongezelelweyo zingasetyenziselwa ukuhluka kolu yilo ngokwefom.

Izinto eziluncedo

Izixhobo zomda yeyona ndlela ilula yokongeza ulwakhiwo kwiifom. Banikezela ngokwamaqela okusisiseko kweelebhile, ulawulo, isicatshulwa esizikhethelayo sefomu, kunye nefomu yokuqinisekisa imiyalezo. Sincoma ukunamathela kwizinto margin-bottomeziluncedo, kwaye usebenzise isalathiso esinye kuyo yonke ifom ukuhambelana.

Zive ukhululekile ukwakha iifomu zakho nokuba uthanda kangakanani, nge <fieldset>s, <div>s, okanye phantse nayiphi na enye into.

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

Igridi yefom

Iifom ezinzima ngakumbi zinokukhiwa kusetyenziswa iiklasi zethu zegridi. Sebenzisa ezi kuyilo lweefom ezifuna iikholamu ezininzi, ububanzi obahlukeneyo, kunye nokhetho olongezelelweyo lolungelelwaniso. Ifuna uguqulo lwe- $enable-grid-classesSass ukuba luvulwe (ngokungagqibekanga).

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

Imijelo

Ngokudibanisa iiklasi zomguquli wegutter , unokuba nolawulo phezu kobubanzi bomjelo kunye nomgca ongaphakathi njengendlela yebhloko. Ikwafuna ukwahluka kwe- $enable-grid-classesSass ukuba kwenziwe (okungagqibekanga).

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

Uyilo oluntsonkothileyo lunokwenziwa kunye nenkqubo yegridi.

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

Ifom ethe tye

Yenza iifom ezithe tyaba ngegridi ngokudibanisa .rowiklasi ukwenza amaqela kunye nokusebenzisa .col-*-*iiklasi ukucacisa ububanzi beelebhile zakho kunye nolawulo. Qinisekisa ukuba ukongeza .col-form-labelkwi- <label>s yakho ngokunjalo ukuze babekwe ngokuthe nkqo embindini nolawulo lwefom enxulumeneyo.

Ngamanye amaxesha, kuya kufuneka usebenzise i-margin okanye i-padding eziluncedo ukwenza ulungelelwaniso olugqibeleleyo oludingayo. Umzekelo, siyisusile padding-topileyibhile kwirediyo yethu epakishweyo ukuze silungelelanise ngcono isiseko sombhalo.

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

Ubungakanani belebhile yefom ethe tye

Qinisekisa ukusebenzisa .col-form-label-smokanye .col-form-label-lgkwi- <label>s okanye <legend>kwi-s yakho ukulandela ngokuchanekileyo ubungakanani .form-control-lgkunye ne .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>

Ubungakanani bekholamu

Njengoko kubonisiwe kwimizekelo yangaphambili, inkqubo yethu yegridi ikuvumela ukuba ubeke naliphi na inani lika .cols ngaphakathi kwe .row. Baza kwahlula ububanzi obukhoyo ngokulinganayo phakathi kwabo. Ungaphinda ukhethe iseti esezantsi yeentsika zakho ukuthatha indawo eninzi okanye encinci, ngelixa u- .cols oseleyo wahlulahlula ngokulinganayo okunye, ngeeklasi ezithile zekholamu njenge .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>

Ukulinganisa okuzenzekelayo

Umzekelo ongezantsi usebenzisa into eluncedo ye-flexbox ukubeka embindini ngokuthe nkqo imixholo kunye notshintsho .colukuze .col-autoiikholomu zakho zithathe kuphela indawo eninzi njengoko kufuneka. Beka enye indlela, ubukhulu bekholamu ngokwayo ngokusekelwe kwimixholo.

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

Ungayixuba kwakhona loo nto kwakhona ngeeklasi zekholamu zobungakanani obuthile.

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

Iifom zangaphakathi

Sebenzisa .row-cols-*iiklasi ukwenza iziyilo eziphendulayo ezithe tye. Ngokudibanisa iiklasi zokulungisa umjelo wamanzi , siya kuba neegatha kumkhombandlela othe tye nothe nkqo. Kwiindawo zokujonga eziphathwayo ezimxinwa, .col-12inceda ukupakisha ulawulo lwefom kunye nokunye. Ukulungelelanisa .align-items-centerizinto zefom phakathi, ukwenza .form-checkboxukulungelelanisa ngokufanelekileyo.

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