Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

Layout

Bay fòm ou yo kèk estrikti-soti nan liy nan orizontal ak aplikasyon kadriyaj koutim-ak opsyon layout fòm nou yo.

Nan paj sa a

Fòm

Chak gwoup jaden fòm yo ta dwe abite nan yon <form>eleman. Bootstrap pa bay okenn fason default pou <form>eleman an, men gen kèk karakteristik navigatè pwisan ke yo bay pa default.

  • Nouvo nan fòm navigatè? Konsidere revize dokiman fòm MDN yo pou yon apèsi ak lis konplè atribi ki disponib yo.
  • <button>s nan yon <form>default a type="submit", kidonk fè efò yo dwe espesifik epi toujou enkli yon type.
  • Ou ka enfim chak eleman fòm nan yon fòm ak disabledatribi ki sou <form>.

Depi Bootstrap aplike display: blockak width: 100%prèske tout kontwòl fòm nou yo, fòm yo pral pa default pile vètikal. Lòt klas yo ka itilize pou varye layout sa a sou yon baz pou chak fòm.

Itilite yo

Sèvis piblik Marge yo se fason ki pi fasil pou ajoute kèk estrikti nan fòm yo. Yo bay gwoupman debaz etikèt, kontwòl, tèks fòm opsyonèl, ak mesaj validation fòm. Nou rekòmande rete soude ak margin-bottomsèvis piblik, epi sèvi ak yon sèl direksyon nan tout fòm nan pou konsistans.

Ou lib pou konstwi fòm ou jan ou renmen, ak <fieldset>s, <div>s, oswa prèske nenpòt lòt eleman.

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

Fòm griyaj

Fòm ki pi konplèks yo ka bati lè l sèvi avèk klas griy nou yo. Sèvi ak sa yo pou fòm fòm ki mande plizyè kolòn, lajè varye, ak opsyon aliyman adisyonèl. Mande pou $enable-grid-classesvaryab Sass la aktive (sou pa default).

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

Goutyè yo

Lè w ajoute klas modifye goutyè yo , ou ka gen kontwòl sou lajè goutyè a nan direksyon an liy ak direksyon blòk tou. Epitou mande pou $enable-grid-classesvaryab Sass la aktive (sou pa default).

<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 ki pi konplèks yo ka kreye tou ak sistèm kadriyaj la.

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

Fòm orizontal

Kreye fòm orizontal ak kadriyaj la lè w ajoute .rowklas la pou fòme gwoup epi itilize .col-*-*klas yo pou presize lajè etikèt ou yo ak kontwòl yo. Asire ou ke ou ajoute .col-form-labelnan <label>s ou tou pou yo ap vètikal santre ak kontwòl fòm ki asosye yo.

Pafwa, ou petèt bezwen sèvi ak sèvis piblik Marge oswa padding pou kreye aliyman pafè ou bezwen. Pou egzanp, nou te retire padding-topetikèt sou antre radyo anpile nou an pou pi byen aliman debaz tèks la.

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

Orizontal fòm etikèt gwosè

Asire w ou sèvi ak .col-form-label-smou .col-form-label-lgpou ou <label>kòrèkteman <legend>swiv gwosè .form-control-lgak .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>

Dimansyon kolòn

Jan yo montre nan egzanp anvan yo, sistèm kadriyaj nou an pèmèt ou mete nenpòt kantite .cols nan yon .row. Yo pral divize lajè ki disponib egalman ant yo. Ou ka chwazi tou yon ti gwoup kolòn ou yo pou pran plis oswa mwens espas, pandan y ap rès .colyo divize rès la egalman, ak klas kolòn espesifik tankou .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>

Oto-gwosè

Egzanp ki anba a sèvi ak yon sèvis piblik flexbox pou santre sa ki an vètikal ak chanjman .colpou .col-autokolòn ou yo sèlman pran otan espas sa nesesè. Mete yon lòt fason, gwosè kolòn nan tèt li ki baze sou kontni an.

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

Lè sa a, ou ka remix sa yon lòt fwa ankò ak klas kolòn gwosè espesifik.

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

Fòm Inline

Sèvi ak .row-cols-*klas yo pou kreye layout orizontal ki reponn. Lè nou ajoute klas modifye goutyè yo , nou pral gen goutyè nan direksyon orizontal ak vètikal. Sou fenèt mobil etwat yo, .col-12èd yo pile kontwòl fòm yo ak plis ankò. A aliman .align-items-centereleman fòm yo nan mitan an, fè .form-checkboxaliman an byen.

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