in English

Sebopeho

Fana ka liforomo tsa hau sebopeho se itseng - ho tloha ka har'a mola ho ea ho tse rapameng ho isa ho ts'ebetsong ea grid ea tloaelo - ka likhetho tsa rona tsa sebopeho sa liforomo.

Leqepheng lena

Mefuta

Sehlopha se seng le se seng sa masimo a foromo se lokela ho lula sebakeng se le <form>seng. Bootstrap ha e fane ka setaele sa kamehla bakeng sa <form>element, empa ho na le likarolo tse matla tsa sebatli tse fanoang ke kamehla.

E ncha ho liforomo tsa sebatli? Nahana ka ho hlahloba litokomane tsa foromo ea MDN bakeng sa kakaretso le lethathamo le felletseng la litšobotsi tse fumanehang.
<button>s ka har'a <form>default ho type="submit", kahoo leka ho bua ka ho hlaka 'me kamehla u kenyelle a type.

Kaha Bootstrap e sebetsa display: blockle width: 100%hoo e batlang e le taolong eohle ea liforomo tsa rona, liforomo li tla ema ka ho sa feleng. Litlelase tse ling li ka sebelisoa ho fetola sebopeho sena ho latela foromo.

Lisebelisoa

Lisebelisoa tsa margin ke tsela e bonolo ka ho fetisisa ea ho eketsa sebopeho ho mefuta. Ba fana ka lihlopha tsa mantlha tsa lileibole, li-control, mongolo oa boikhethelo, le melaetsa ea netefatso ea liforomo. Re khothaletsa ho khomarela margin-bottomlits'ebeletso, le ho sebelisa tataiso e le 'ngoe ho pholletsa le foromo bakeng sa ho tsitsa.

Ikutloe u lokolohile ho theha liforomo tsa hau kamoo u ratang, ka <fieldset>s, <div>s, kapa ntho efe kapa efe e 'ngoe.

Leibole ea mohlala

Leibole e 'ngoe

html

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

Gridi ea foromo

Mefuta e mengata e rarahaneng e ka hahoa ho sebelisoa lihlopha tsa rona tsa marang-rang. Sebelisa tsena bakeng sa meralo ea liforomo tse hlokang likholomo tse ngata, bophara bo fapaneng, le likhetho tse ling tsa tekano. E hloka hore mofuta oa $enable-grid-classesSass o lumelloe (o buletsoe ka ho sa feleng).

html

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

Lithako

Ka ho kenyelletsa litlelase tsa ho fetola gutter , o ka ba le taolo holim'a bophara ba gutter hammoho le inline joalo ka block direction. E boetse e hloka hore $enable-grid-classesSass e feto-fetohe e khonehe (ho sa feleng).

html

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

Mehaho e rarahaneng haholoanyane e ka boela ea etsoa ka tsamaiso ea marang-rang.

html

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

Sebopeho se otlolohileng

Theha liforomo tse tšekaletseng ka marang-rang ka ho eketsa .rowsehlopha ho theha lihlopha le ho sebelisa .col-*-*lihlopha ho hlakisa bophara ba lileibole le litsamaiso tsa hau. Etsa bonnete ba hore o eketsa .col-form-labelho s ea hau <label>e le hore li shebane le litsamaiso tsa tsona tse amanang.

Ka linako tse ling, u ka 'na ua hloka ho sebelisa lisebelisoa tsa marang-rang kapa tsa padding ho theha tlhophiso e phethahetseng eo u e hlokang. Ka mohlala, re tlositse padding-topleibole ea li-input tsa seea-le-moea tse hlophiloeng ho nyallanya mongolo oa motheo.

html

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

Sekhahla sa leibole ea sebopeho se otlolohileng

Etsa bonnete ba hore o sebelisa .col-form-label-smkapa .col-form-label-lgho <label>s kapa <legend>s ea hau ho latela ka nepo boholo ba .form-control-lgle .form-control-sm.

html

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

Tekanyo ea kholomo

Joalokaha ho bontšitsoe mehlaleng e fetileng, sistimi ea rona ea marang-rang e u lumella ho beha palo efe kapa efe ea .cols ka har'a .row. Ba tla arola bophara bo fumanehang ka ho lekana pakeng tsa bona. U ka boela ua khetha karoloana ea litšiea tsa hau ho nka sebaka se sengata kapa se fokolang, ha tse setseng li .colarola tse ling ka ho lekana, ka lihlopha tse itseng tsa kholomo tse kang .col-sm-7.

html

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

Mohlala o ka tlase o sebelisa sesebelisoa sa flexbox ho beha litaba le liphetoho .colho .col-autoeona e le hore litšiea tsa hau li nke sebaka se lekaneng kamoo ho hlokahalang. Ka tsela e 'ngoe, boholo ba kholomo ka boeona bo ipapisitse le litaba.

html

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

U ka boela ua kopanya seo hape ka lihlopha tse khethehileng tsa kholomo.

html

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

Liforomo tsa inline

Sebelisa .row-cols-*litlelase ho theha lipeakanyo tse rapameng tse arabelang. Ka ho kenya litlelase tsa ho fetola li-gutter , re tla ba le li-gutter ka litsela tse tšekaletseng le tse otlolohileng. Libakeng tse moqotetsane tsa lipono tsa mehala, e .col-12thusa ho bokella litsamaiso tsa foromo le tse ling. The .align-items-centeraligns likarolo sebopeho ho bohareng, ho etsa .form-checkalign hantle.

html

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