Nhazi

Nye fọm gị ụfọdụ nhazi—site na inline ruo kehoraizin ruo na mmejuputa grid omenala—nwere nhọrọ nhazi ụdị anyị.

Na ibe a

Ụdị

Otu ọ bụla nke ụdị ubi kwesịrị ibi na <form>mmewere. Bootstrap na-enye ọnweghị styling ndabara maka <form>mmewere, mana enwere ụfọdụ atụmatụ nchọgharị siri ike nke enyere na ndabara.

Ọhụrụ n'ụdị ihe nchọgharị? Tụlee ịlele ụdị akwụkwọ MDN maka nchịkọta na ndepụta zuru ezu nke àgwà dịnụ.
<button>s n'ime <form>ndabara na type="submit", yabụ gbasie ike ka ị bụrụ nke akọwapụtara na gụnye oge niile type.

Ebe Bootstrap na-emetụta display: blockyana width: 100%ihe fọrọ nke nta ka ọ bụrụ njikwa ụdị anyị niile, ụdị ga-abụ na ndabara tojupụtara na kwụ ọtọ. Enwere ike iji klaasị ndị ọzọ gbanwee okirikiri nhọrọ ukwuu n'ụdị n'ụdị.

Ngwa ọrụ

Ngwa oke ala bụ ụzọ kachasị mfe iji tinye usoro ụfọdụ na ụdị. Ha na-enye nchịkọta nke mkpado, njikwa, ederede ụdị nhọrọ, yana ozi nkwado ụdị. Anyị na-akwado ịrapagidesi ike na margin-bottomakụrụngwa, na iji otu ntụziaka n'ime ụdị ahụ niile maka ịdịgide.

<fieldset>Na-enwere onwe gị iji s, <div>s, ma ọ bụ ihe fọrọ nke nta ka ọ bụrụ ihe ọ bụla ọzọ wuo ụdị gị .

Ihe atụ akara

Labelụ ọzọ

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>

grid ụdị

Enwere ike ịmepụta ụdị mgbagwoju anya karịa site na iji klas grid anyị. Jiri ndị a maka nhazi ụdị nke chọrọ ọtụtụ ogidi, obosara dị iche iche na nhọrọ nhazi agbakwunyere. Chọrọ ka $enable-grid-classesemee mgbanwe Sass (na ndabara).

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>

Ọgba mmiri

Site na ịgbakwụnye klaasị modifier gutter , ị nwere ike ịchịkwa obosara gutter yana inline dị ka ụzọ mgbochi. Ọ chọkwara ka $enable-grid-classesagbanyere mgbanwe Sass (na ndabara).

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>

Enwere ike ịmepụta nhazi ndị dị mgbagwoju anya site na usoro grid.

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>

Ụdị kwụ ọtọ

Mepụta ụdị kwụ ọtọ na grid site na ịgbakwunye .rowklaasị iji mepụta otu yana iji .col-*-*klaasị kọwaa obosara nke akara na njikwa gị. Jide n'aka na ị ga-agbakwunye .col-form-labelna s gị <label>ka ha wee dabere n'ụzọ kwụ ọtọ na njikwa ụdị ha jikọtara ya.

Mgbe ụfọdụ, ọ ga-adị mkpa ka ị jiri oke ma ọ bụ padding utilities mepụta nhazi ahụ zuru oke nke ịchọrọ. Dịka ọmụmaatụ, anyị ewepụla akara padding-topndenye redio anyị ekpokọtara iji kwado usoro ederede nke ọma.

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>

Nha akara n'ahịrị kwụ ọtọ

Jide n'aka na ị na-eji .col-form-label-smma ọ bụ .col-form-label-lgna <label>s ma ọ bụ <legend>s gị iji soro nha .form-control-lgna .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>

Nha kọlụm

Dịka egosiri na ọmụmaatụ ndị gara aga, sistemụ grid anyị na-enye gị ohere idowe ọnụọgụ .cols ọ bụla n'ime faịlụ .row. Ha ga-ekewa obosara dị otu nha n'etiti ha. Ị nwekwara ike ịhọrọ akụkụ nke kọlụm gị ka ị weghara ohere ma ọ bụ dị ntakịrị, ebe ndị fọdụrụ .colna-ekewa nke ọzọ, yana klas kọlụm dị ka .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>

Nhazi nha akpaaka

Ọmụmaatụ dị n'okpuru na-eji ike flexbox iji kwụ ọtọ n'etiti ọdịnaya wee gbanwee .colka .col-autoogidi gị wee were naanị ohere ọ bụla achọrọ. N'ikwu ya n'ụzọ ọzọ, kọlụm nha onwe ya dabere na ọdịnaya.

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>

Ị nwere ike megharịa nke ahụ ọzọ site na iji klaasị kọlụm akọwapụtara nke ọma.

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>

Ụdị ntanetị

Jiri .row-cols-*klaasị mepụta okirikiri nhọrọ ukwuu na-anabata. Site n'ịgbakwụnye klaasị modifier gutter , anyị ga-enwe olulu mmiri n'akụkụ kwụ ọtọ na kwụ ọtọ. N'ọdụ ụgbọ mmiri dị warara, ndị na- .col-12enyere aka ikpokọta njikwa ụdị na ihe ndị ọzọ. The .align-items-centeraligns ụdị ụdị na n'etiti, na-eme ka .form-checkmmezi nke ọma.

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>