Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Aninaw

Ikkam dagiti pormam ti sumagmamano nga estruktura—manipud iti inline aginggana iti horizontal aginggana kadagiti kostumbre nga implementasion ti grid—nga addaan kadagiti pagpilianmi iti layout ti porma.

Iti daytoy a panid

Dagiti Pormas

Tunggal grupo dagiti tay-ak ti porma ket rumbeng nga agtaeng iti maysa <form>nga elemento. Ti Bootstrap ket mangipaay ti awan ti default nga estilo para iti <form>elemento, ngem adda dagiti sumagmamano a nabileg a tampok ti browser a naited babaen ti default.

  • Baro kadi kadagiti porma ti browser? Ibilang ti panangrepaso kadagiti dok ti porma ti MDN para iti pakabuklan ken kompleto a listaan ​​dagiti magun-od a kababalin.
  • <button>s iti uneg ti <form>default to type="submit", isu nga ikagumaam ti agbalin nga espesipiko ken kanayon nga iraman ti type.

Gapu ta ti Bootstrap ket agaplikar display: blockken width: 100%kadagiti gangani amin a kontrol ti pormatayo, dagiti porma ket babaen ti default ket agtumpok a bertikal. Mabalin nga usaren dagiti kanayonan a klase a mangbalbaliw iti daytoy a layout iti tunggal porma a batayan.

Dagiti Utilities

Dagiti utilidad ti margin ket isu ti kalalakaan a wagas a manginayon ti sumagmamano nga estruktura kadagiti porma. Dagitoy ket mangipaayda ti batayan a panaggrupo kadagiti etiketa, dagiti kontrol, opsional a teksto ti porma, ken panagmensahe ti panangipaneknek ti porma. Irekomendarmi ti panagtalinaed kadagiti margin-bottomutilidad, ken panagusar iti maymaysa a direksion iti intero a porma para iti panagpapada.

Mariknam a nawaya a mangbangon kadagiti pormam uray kasano ti kayatmo, nga addaan iti <fieldset>s, <div>s, wenno dandani aniaman a sabali nga elemento.

html nga 
<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 ti grid

Mabalin a maibangon dagiti ad-adu a komplikado a porma babaen ti panangusar kadagiti klasetayo iti grid. Usaren dagitoy para kadagiti layout ti porma a kasapulan ti adu a kolum, nadumaduma a kalawa, ken dagiti kanayonan a pagpilian ti panagtunos. Kasapulan ti $enable-grid-classesSass a variable a mapalubosan (on babaen ti default).

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

Dagiti kanal

Babaen ti pananginayon kadagiti klase ti mangbalbaliw ti kanal , mabalinmo ti maaddaan iti panangtengngel iti kalawa ti kanal iti kasta met ti inline a kas ti direksion ti bloke. Kasapulan pay ti $enable-grid-classesSass a variable a mapalubosan (on babaen ti default).

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

Dagiti ad-adu a komplikado a layout ket mabalin pay a mapartuat babaen ti sistema ti grid.

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

Paisaad a porma

Mangpartuat kadagiti horisontal a porma babaen ti grid babaen ti pananginayon ti .rowklase kadagiti grupo ti panagporma ken panagusar kadagiti .col-*-*klase tapno mangibaga ti kalawa dagiti etiketa ken dagiti kontrolmo. Siguraduen nga inayon .col-form-labelti <label>s mo pay tapno bertikal a naisentro dagitoy kadagiti nainaig a kontrol ti pormada.

No dadduma, mabalin a kasapulam ti agusar kadagiti margin wenno padding utilities tapno makaaramidka iti dayta perpekto a panagtunos a kasapulam. Kas pagarigan, inikkatmi ti padding-topiti naurnong nga etiketa ti radio inputs-mi tapno nasaysayaat ti pannakaitunos ti batayan ti teksto.

Dagiti Radio
html nga 
<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>

Paisaad a panagdakkel ti etiketa ti porma

Siguraduenyo nga usaren .col-form-label-smwenno .col-form-label-lgiti <label>s wenno <legend>s-yo tapno umiso a masurot ti kadakkel ti .form-control-lgken .form-control-sm.

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

Panagdakkel ti adigi

Kas naipakita kadagiti napalabas a pagarigan, ti sistemami a grid ket mangipalubos kenka a mangikabil ti ania man a bilang ti .cols iti uneg ti maysa a .row. Biningayda ti magun-odan a kalawa a padapada iti nagbaetan dagitoy. Mabalinmo pay ti agpili ti subgrupo dagiti kolummo tapno mangala ti ad-adu wenno basbassit nga espasio, bayat a dagiti nabati .colnga s ket agpapada a mangbingay kadagiti nabati, nga addaan kadagiti espesipiko a klase ti adigi a kas ti .col-sm-7.

html nga 
<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-panag-sizing

Ti pagarigan iti baba ket agus-usar ti flexbox a utilidad tapno bertikal a mangisentro kadagiti linaon ken agbaliw .coltapno .col-autodagiti adigimo ket mangala laeng ti adu nga espasio a kas kasapulan. Iti sabali a pannao, ti kolum ket agdakkel ti bagina maibatay kadagiti linaonna.

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

Kalpasanna mabalinmo nga i-remix manen dayta kadagiti klase ti kolum a naisangsangayan iti kadakkel.

@
html nga 
<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 dagiti pormas

Usaren dagiti .row-cols-*klase tapno mangpartuat kadagiti makasungbat a horisontal a layout. Babaen ti pananginayon kadagiti klase ti gutter modifier , maaddaantayo kadagiti gutter kadagiti horizontal ken vertical a direksion. Kadagiti akikid a mobile viewport, dagiti .col-12tumulong a mangitumpok kadagiti kontrol ti porma ken dadduma pay. Ti .align-items-centermangitunos kadagiti elemento ti porma iti tengnga, a mangaramid ti .form-checkumno a panangitunos.

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