Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
in English

Aranĝo

Donu al viaj formoj iun strukturon—de enlinia ĝis horizontala ĝis kutimaj kradaj efektivigoj—per niaj opcioj pri forma aranĝo.

Sur ĉi tiu paĝo

Formoj

Ĉiu grupo de formkampoj devus loĝi en <form>elemento. Bootstrap provizas neniun defaŭltan stilon por la <form>elemento, sed ekzistas iuj potencaj retumiloj, kiuj estas provizitaj defaŭlte.

  • Ĉu nova al foliumilo? Konsideru revizii la MDN-formdokumentojn por superrigardo kaj kompleta listo de disponeblaj atributoj.
  • <button>s ene de <form>defaŭlta al type="submit", do strebu esti specifa kaj ĉiam inkluzivi type.
  • Vi povas malŝalti ĉiun formularelementon ene de formo kun la disabledatributo sur la <form>.

Ĉar Bootstrap validas display: blockkaj width: 100%al preskaŭ ĉiuj niaj formularaj kontroloj, formoj defaŭlte stablos vertikale. Pliaj klasoj povas esti uzataj por varii ĉi tiun aranĝon laŭ forma bazo.

Utilaĵoj

Marĝenaj utilecoj estas la plej facila maniero aldoni iun strukturon al formoj. Ili disponigas bazan grupigon de etikedoj, kontrolojn, laŭvolan formulartekston, kaj formularvalidigan mesaĝadon. Ni rekomendas algluiĝi al margin-bottomutilecoj, kaj uzi ununuran direkton tra la formo por konsistenco.

Bonvolu konstrui viajn formojn kiel vi volas, per <fieldset>s, <div>s aŭ preskaŭ ajna alia elemento.

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

Formu kradon

Pli kompleksaj formoj povas esti konstruitaj uzante niajn kradklasojn. Uzu ĉi tiujn por formularaj aranĝoj, kiuj postulas multoblajn kolumnojn, diversajn larĝojn kaj pliajn alineajn opciojn. Necesas ke la $enable-grid-classesvariablo Sass estu ebligita (defaŭlte).

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

Defluiloj

Aldonante defluetajn modifklasojn , vi povas havi kontrolon pri la larĝo de defluilo ankaŭ en la enlinia kiel blokdirekto. Ankaŭ postulas, ke la $enable-grid-classesvariablo Sass estu ebligita (defaŭlte).

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

Pli kompleksaj aranĝoj ankaŭ povas esti kreitaj per la kradsistemo.

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

Horizontala formo

Kreu horizontalajn formojn kun la krado aldonante la .rowklason por formi grupojn kaj uzante la .col-*-*klasojn por specifi la larĝon de viaj etikedoj kaj kontroloj. Nepre aldonu .col-form-labelankaŭ al viaj <label>s, por ke ili estu vertikale centritaj kun siaj rilataj formularaj kontroloj.

Foje, vi eble bezonos uzi marĝenajn aŭ kompletigajn ilojn por krei tiun perfektan vicigon, kiun vi bezonas. Ekzemple, ni forigis la padding-topetikedon de nia stakigita radio-enigo por pli bone vicigi la tekstan bazlinion.

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

Horizontala formo etikedo grandeco

Nepre uzu .col-form-label-smaŭ .col-form-label-lgal viaj <label>s aŭ <legend>s por ĝuste sekvi la grandecon de .form-control-lgkaj .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>

Kolumna grandeco

Kiel montrite en la antaŭaj ekzemploj, nia kradsistemo permesas vin meti ajnan nombron da .cols ene de .row. Ili dividos la disponeblan larĝon egale inter ili. Vi ankaŭ povas elekti subaron de viaj kolumnoj por okupi pli-malpli da spaco, dum la ceteraj .cols egale disigas la ceterajn, kun specifaj kolumnaj klasoj kiel .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>

Aŭtomata grandeco

La ĉi-suba ekzemplo uzas flexbox-ilaĵon por vertikale centri la enhavon kaj ŝanĝi .colal .col-autotiel, ke viaj kolumnoj nur okupas tiom da spaco kiom necesas. Aliflanke, la kolumno grandigas sin surbaze de la enhavo.

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

Vi tiam povas remiksi tion denove kun grandeco-specifaj kolumnaj klasoj.

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

Enliniaj formoj

Uzu la .row-cols-*klasojn por krei respondemajn horizontalajn aranĝojn. Aldonante kanaletajn modifklasojn , ni havos kanalojn en horizontalaj kaj vertikalaj direktoj. Sur mallarĝaj moveblaj vidfenestroj, la .col-12helpoj stakigi la formularajn kontrolojn kaj pli. La .align-items-centervicigas la formelementojn al la mezo, igante la .form-checkboxvicigi ĝuste.

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