Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Paraqitja

Jepini formularëve tuaj një strukturë - nga inline në horizontale deri te zbatimet e rrjetit të personalizuar - me opsionet tona të paraqitjes së formularit.

Në këtë faqe

Format

Çdo grup i fushave të formës duhet të qëndrojë në një <form>element. Bootstrap nuk ofron një stil të paracaktuar për <form>elementin, por ka disa veçori të fuqishme të shfletuesit që ofrohen si parazgjedhje.

  • I ri në format e shfletuesit? Merrni parasysh rishikimin e dokumenteve të formularit MDN për një përmbledhje dhe listë të plotë të atributeve të disponueshme.
  • <button>s brenda një <form>parazgjedhjeje në type="submit", prandaj përpiquni të jeni specifik dhe gjithmonë përfshini një type.
  • Ju mund të çaktivizoni çdo element të formës brenda një formulari me disabledatributin në <form>.

Meqenëse Bootstrap zbatohet display: blockdhe width: 100%pothuajse në të gjitha kontrollet tona të formave, format si parazgjedhje do të grumbullohen vertikalisht. Klasa shtesë mund të përdoren për të ndryshuar këtë plan urbanistik në bazë të formës.

Shërbimet komunale

Shërbimet e marzhit janë mënyra më e lehtë për të shtuar një strukturë në forma. Ato ofrojnë grupimin bazë të etiketave, kontrolleve, tekstit opsional të formularit dhe mesazheve të vërtetimit të formularit. Ne rekomandojmë t'u përmbaheni margin-bottomshërbimeve dhe të përdorni një drejtim të vetëm në të gjithë formularin për qëndrueshmëri.

Mos ngurroni të ndërtoni format tuaja si të doni, me <fieldset>s, <div>s ose pothuajse çdo element tjetër.

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

Rrjeti i formës

Forma më komplekse mund të ndërtohen duke përdorur klasat tona të rrjetit. Përdorni këto për paraqitjet e formave që kërkojnë kolona të shumta, gjerësi të ndryshme dhe opsione shtesë të shtrirjes. Kërkon që $enable-grid-classesndryshorja Sass të aktivizohet (e ndezur si parazgjedhje).

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

Ulluqe

Duke shtuar klasat e modifikuesve të ulluqit , ju mund të keni kontroll mbi gjerësinë e ulluqit si në drejtimin brenda ashtu edhe në bllok. Gjithashtu kërkon që $enable-grid-classesndryshorja Sass të aktivizohet (e ndezur si parazgjedhje).

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

Paraqitjet më komplekse mund të krijohen gjithashtu me sistemin e rrjetit.

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

Forma horizontale

Krijoni forma horizontale me rrjetin duke shtuar .rowklasën për të formuar grupe dhe duke përdorur .col-*-*klasat për të specifikuar gjerësinë e etiketave dhe kontrolleve tuaja. Sigurohuni që t'i shtoni .col-form-labeledhe s-ve tuaja <label>në mënyrë që ato të jenë të përqendruara vertikalisht me kontrollet e formave të lidhura me to.

Ndonjëherë, mund t'ju duhet të përdorni shërbimet e marzhit ose mbushjes për të krijuar atë shtrirje të përsosur që ju nevojitet. Për shembull, ne kemi hequr padding-topetiketën e hyrjeve të radios së grumbulluar për të përafruar më mirë vijën bazë të tekstit.

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

Madhësia e etiketës së formës horizontale

Sigurohuni që të përdorni .col-form-label-smose .col-form-label-lgnë <label>s ose <legend>s tuaj për të ndjekur saktë madhësinë e .form-control-lgdhe .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>

Madhësia e kolonës

Siç tregohet në shembujt e mëparshëm, sistemi ynë i rrjetit ju lejon të vendosni çdo numër .cols brenda një .row. Ata do të ndajnë gjerësinë e disponueshme në mënyrë të barabartë midis tyre. Ju gjithashtu mund të zgjidhni një nëngrup të kolonave tuaja për të zënë pak a shumë hapësirë, ndërsa pjesa e mbetur .coltë ndajë në mënyrë të barabartë pjesën tjetër, me klasa të veçanta kolonash si .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>

Përmasat automatike

Shembulli më poshtë përdor një mjet flexbox për të përqendruar vertikalisht përmbajtjen dhe ndryshon .colnë .col-automënyrë që kolonat tuaja të zënë vetëm aq hapësirë ​​sa nevojitet. E thënë ndryshe, madhësia e kolonës bëhet në bazë të përmbajtjes.

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

Më pas mund ta ripërzieni atë edhe një herë me klasa kolone specifike për madhësi.

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

Format inline

Përdorni .row-cols-*klasat për të krijuar paraqitje horizontale të përgjegjshme. Duke shtuar klasat e modifikuesve të ulluqeve , do të kemi ulluqe në drejtime horizontale dhe vertikale. Në portat e ngushta të shikimit celular, kjo .col-12ndihmon në grumbullimin e kontrolleve të formularit dhe më shumë. .align-items-centerRreshton elementët e formës në mes, duke e bërë rreshtimin .form-checkboxsiç duhet.

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