Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Layout

Hatagi ang imong mga porma og pipila ka estraktura—gikan sa inline ngadto sa pinahigda ngadto sa custom nga mga pagpatuman sa grid—uban sa among mga opsyon sa layout sa porma.

Niini nga panid

Mga porma

Ang matag grupo sa mga natad sa porma kinahanglan nga magpuyo sa usa ka <form>elemento. Ang Bootstrap walay gihatag nga default nga estilo para sa <form>elemento, apan adunay pipila ka gamhanan nga mga feature sa browser nga gihatag pinaagi sa default.

  • Bag-o sa mga porma sa browser? Ikonsiderar ang pagribyu sa MDN nga mga dokumento sa porma alang sa usa ka kinatibuk-an ug kompleto nga listahan sa mga anaa nga mga hiyas.
  • <button>s sulod sa usa ka <form>default sa type="submit", busa paningkamuti nga mahimong espesipiko ug kanunay naglakip sa usa ka type.

Tungod kay ang Bootstrap magamit display: blockug width: 100%sa halos tanan namong mga kontrol sa porma, ang mga porma pinaagi sa default stack nga patindog. Ang dugang nga mga klase mahimong magamit aron usbon kini nga layout sa per-form nga basehan.

Mga gamit

Ang mga margin utilities mao ang pinakasayon ​​nga paagi sa pagdugang sa pipila ka istruktura sa mga porma. Naghatag sila og sukaranan nga paggrupo sa mga label, kontrol, opsyonal nga porma nga teksto, ug pag-validate sa porma sa mensahe. Among girekomendar ang pagpabilin sa mga margin-bottomutilities, ug paggamit sa usa ka direksyon sa tibuok porma para sa pagkamakanunayon.

Mobati nga gawasnon sa paghimo sa imong mga porma bisan unsa ang imong gusto, nga adunay <fieldset>s, <div>s, o halos bisan unsang elemento.

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>

Porma nga grid

Ang mas komplikado nga mga porma mahimong matukod gamit ang among mga klase sa grid. Gamita kini alang sa mga porma nga layout nga nanginahanglan daghang mga kolum, lainlain nga gilapdon, ug dugang nga mga kapilian sa pag-align. Nagkinahanglan sa $enable-grid-classesSass variable nga mahimo (sa default).

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>

Mga kanal

Pinaagi sa pagdugang sa mga klase sa gutter modifier , mahimo nimong kontrolon ang gilapdon sa gutter ingon man ang inline ingon nga direksyon sa block. Nanginahanglan usab nga ma-enable ang variable sa $enable-grid-classesSass (sa default).

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>

Ang mas komplikado nga mga layout mahimo usab nga mahimo gamit ang grid system.

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>

Horizontal nga porma

Paghimo og pinahigda nga mga porma nga adunay grid pinaagi sa pagdugang sa .rowklase aron maporma ang mga grupo ug gamit ang mga .col-*-*klase aron itakda ang gilapdon sa imong mga label ug kontrol. Siguruha nga idugang .col-form-labelusab ang imong <label>mga s aron kini patindog nga nakasentro sa ilang kauban nga mga kontrol sa porma.

Usahay, kinahanglan nimo nga gamiton ang mga gamit sa margin o padding aron mahimo ang hingpit nga pag-align nga kinahanglan nimo. Pananglitan, gitangtang namo ang padding-toplabel sa among stacked radio inputs aron mas maayo nga i-align ang text baseline.

Mga radyo
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 nga porma nga pagsukod sa label

Siguroha nga gamiton .col-form-label-smo .col-form-label-lgsa imong <label>s o <legend>s sa husto nga pagsunod sa gidak-on sa .form-control-lgug .form-control-sm.

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>

Pagsukod sa kolum

Sama sa gipakita sa miaging mga pananglitan, ang among grid system nagtugot kanimo sa pagbutang sa bisan unsang gidaghanon sa .cols sulod sa usa ka .row. Gibahin nila ang magamit nga gilapdon nga parehas sa taliwala nila. Mahimo ka usab nga magpili usa ka subset sa imong mga kolum aron makakuha og daghang o gamay nga espasyo, samtang ang nahabilin nga .cols parehas nga gibahin ang nahabilin, nga adunay piho nga mga klase sa kolum sama sa .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

Ang panig-ingnan sa ubos naggamit sa usa ka flexbox utility aron patindog nga isentro ang mga sulud ug mga pagbag .col- o .col-autoaron ang imong mga kolum makakuha ra ug daghang espasyo kung gikinahanglan. Sa laing paagi, ang mga gidak-on sa kolum mismo base sa mga sulod.

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

Mahimo nimong i-remix kana pag-usab sa mga klase sa kolum nga piho sa gidak-on.

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

Inline nga mga porma

Gamita ang mga .row-cols-*klase sa paghimo og responsive horizontal layouts. Pinaagi sa pagdugang sa mga klase sa gutter modifier , kita adunay mga kanal sa pinahigda ug bertikal nga direksyon. Sa pig-ot nga mobile viewports, ang .col-12makatabang sa pag-stack sa mga kontrol sa porma ug uban pa. Ang nag- .align-items-centeralign sa mga elemento sa porma ngadto sa tunga, nga naghimo sa .form-checkpag-align sa husto.

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