Luncat ka eusi utama Luncat ka navigasi docs
in English

Tata perenah

Pasihan formulir anjeun sababaraha struktur-tina inline ka horizontal ka palaksanaan grid khusus-kalayan pilihan perenah formulir kami.

Dina kaca ieu

Bentuk

Unggal grup widang formulir kedah reside dina <form>unsur. Bootstrap henteu nyayogikeun gaya standar pikeun <form>unsur, tapi aya sababaraha fitur browser anu kuat anu disayogikeun sacara standar.

  • Anyar pikeun formulir browser? Pertimbangkeun marios dokumén formulir MDN pikeun tinjauan sareng daptar lengkep ngeunaan atribut anu sayogi.
  • <button>s dina <form>standar pikeun type="submit", jadi narékahan pikeun jadi husus tur salawasna kaasup a type.
  • Anjeun tiasa nganonaktipkeun unggal unsur formulir dina formulir kalayan disabledatribut dina <form>.

Kusabab Bootstrap lumaku display: blockjeung width: 100%ampir sakabéh kadali formulir urang, formulir bakal sacara standar tumpukan vertikal. kelas tambahan bisa dipaké pikeun rupa-rupa perenah ieu dina dasar per-formulir.

Utiliti

Utiliti margin mangrupikeun cara anu paling gampang pikeun nambihan sababaraha struktur kana formulir. Aranjeunna nyayogikeun pangkelompok dasar labél, kadali, téks formulir opsional, sareng olahtalatah validasi formulir. Kami ngarékoméndasikeun nempel kana margin-bottomUtiliti, sarta ngagunakeun arah tunggal sapanjang formulir pikeun konsistensi.

Ngarasa Luncat ka ngawangun formulir anjeun kumaha ogé anjeun resep, kalawan <fieldset>s, <div>s, atawa ampir sagala elemen séjén.

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

Ngabentuk grid

Bentuk anu langkung kompleks tiasa diwangun nganggo kelas grid kami. Paké ieu pikeun perenah formulir anu merlukeun sababaraha kolom, lebar variatif, sarta pilihan alignment tambahan. Merlukeun $enable-grid-classesvariabel Sass pikeun diaktipkeun (sacara standar).

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

talang

Ku nambahkeun kelas modifier talang , anjeun tiasa gaduh kontrol kana lebar talang di ogé inline salaku arah blok. Ogé merlukeun $enable-grid-classesvariabel Sass diaktipkeun (dina standar).

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

Layout anu langkung kompleks ogé tiasa didamel nganggo sistem grid.

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

Bentuk horisontal

Jieun formulir horizontal kalawan grid ku nambahkeun .rowkelas pikeun ngabentuk grup sarta ngagunakeun .col-*-*kelas pikeun nangtukeun lebar labél jeung kadali Anjeun. Pastikeun pikeun nambahkeun .col-form-labelkana s Anjeun <label>ogé ngarah nuju vertikal dipuseurkeun jeung kontrol formulir pakait maranéhanana.

Kadang-kadang, anjeun panginten kedah nganggo utilitas margin atanapi padding pikeun nyiptakeun alignment anu sampurna anu anjeun peryogikeun. Salaku conto, kami parantos ngahapus padding-toplabél input radio anu ditumpuk pikeun nyaluyukeun garis dasar téks.

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

Ukuran labél formulir horisontal

Pastikeun anjeun nganggo .col-form-label-smatanapi .col-form-label-lgka anjeun <label>atanapi ka anjeun <legend>pikeun leres nuturkeun ukuran .form-control-lgsareng .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>

Ukuran kolom

Ditémbongkeun saperti dina conto saméméhna, sistem grid kami ngidinan Anjeun pikeun nempatkeun sajumlah .cols dina hiji .row. Aranjeunna bakal ngabagi lebar anu sayogi di antara aranjeunna. Anjeun ogé tiasa milih sawaréh kolom anjeun pikeun nyandak langkung seueur atanapi kirang rohangan, sedengkeun sésa-sésa .colngabagi sésana, kalayan kelas kolom khusus sapertos .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>

Ukuran otomatis

Conto di handap ngagunakeun utilitas flexbox pikeun vertikal puseur eusi na robah .coljadi .col-autoyén kolom anjeun ukur nyokot up saloba spasi sakumaha diperlukeun. Nempatkeun cara sejen, ukuran kolom sorangan dumasar kana eusi.

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

Anjeun teras tiasa remix éta sakali deui sareng kelas kolom ukuran-spésifik.

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

Bentuk inline

Anggo .row-cols-*kelas pikeun nyiptakeun perenah horizontal anu responsif. Ku nambahkeun kelas modifier talang , urang bakal boga talang dina arah horizontal sarta vertikal. Dina viewports mobile sempit, .col-12mantuan tumpukan kadali formulir jeung leuwih. The .align-items-centeraligns unsur formulir ka tengah, nyieun .form-checkboxalign bener.

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