U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Qaabka

Sii foomamkaaga qaab-dhismeed ka bilaabma laynka ilaa toosan ilaa fulinta sharoobada caadiga ah- oo leh xulashooyinka qaabaynta foomka.

Boggan

Foomamka

Koox kasta oo ka mid ah goobaha foomku waa inay ku noolaadaan <form>qayb. Bootstrap ma bixiso qaabaynta u gaarka ah <form>curiyaha, laakiin waxaa jira qaar ka mid ah sifooyin browserka awood leh oo lagu bixiyo default.

  • Ku cusub foomamka browserka? Tixgeli inaad dib u eegto dokumeentiyada foomka MDN si aad u hesho dulmar iyo liis dhamaystiran ee sifooyinka la heli karo.
  • <button>s ku dhex jiro <form>qaladka type="submit", markaa ku dadaal inaad noqoto mid gaar ah oo had iyo jeer ku dar a type.
  • Waxaad ka joojin kartaa foom kasta foomka dhexdiisa oo leh disabledsifo ku taal <form>.

Maadaama Bootstrap uu khuseeyo display: blockiyo width: 100%ku dhawaad ​​dhammaan kontaroolada foomkayaga, foomamku waxay si toos ah u xidhmi doonaan si toos ah. Fasalo dheeraad ah ayaa loo isticmaali karaa in lagu beddelo qaabkan qaab qaabaysan.

Utility

Utility margin waa habka ugu fudud ee lagu daro qaab dhismeed foomamka. Waxay bixiyaan ururinta aasaasiga ah ee sumadaha, kontaroolada, qoraalka qaabka ikhtiyaarka ah, iyo foomka fariimaha ansaxinta. Waxaan kugula talineynaa inaad ku dhejiso margin-bottomyutiilitida, oo aad isticmaasho hal jiho oo dhan foomka si joogto ah.

Dareen xor u ah inaad dhisto foomamkaaga si kasta oo aad rabto, adigoo wata <fieldset>s, <div>s, ama ku dhawaad ​​walxo kale.

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

Shabakadda foomka

Foomamka kakan ayaa la dhisi karaa iyadoo la isticmaalayo fasalladayada xajmiyeedka. U isticmaal kuwan qaab-qaabaynta oo u baahan tiirar badan, ballacyo kala duwan, iyo ikhtiyaaro toosin dheeraad ah. Wuxuu u baahan yahay $enable-grid-classesdoorsoomaha Sass in la furo

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

Gutters

Markaad ku darto fasalada wax ka beddelka mareenka , waxaad xakameyn kartaa ballaca maroodiga iyo sidoo kale khadadka sida jihada xannibaadda. Sidoo kale waxay u baahan tahay $enable-grid-classesdoorsoomaha Sass in la furo

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

Nidaamyo kakan oo aad u adag ayaa sidoo kale lagu abuuri karaa nidaamka grid.

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

Qaab toosan

Ku samee foomamka jiifka ah ee shabagga ah adiga oo ku daraya .rowfasalka si aad u samaysatid kooxo una isticmaal .col-*-*fasalada si aad u qeexdo ballaca calaamadahaaga iyo kontarooladaada. U hubso inaad ku darto s- .col-form-labelgaaga <label>sidoo kale si ay si toos ah xuddun u noqdaan kontaroolada foomka la xidhiidha.

Mararka qaarkood, waxaa laga yaabaa inaad u baahato inaad isticmaasho margin ama yutiilitida suufka si aad u abuurto toosinta saxda ah ee aad u baahan tahay. Tusaale ahaan, waxaan ka saarnay padding-topsummada idaacadaha ee dul-saaran si aan u waafajino gundhigga qoraalka.

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

Cabbirka calaamadaynta qaabka horizontal

U hubso inaad isticmaasho .col-form-label-smama u isticmaasho s ama s .col-form-label-lg-gaaga si aad si sax ah u raacdo cabbirka iyo .<label><legend>.form-control-lg.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>

Cabbirka tiirka

Sida ku cad tusaalooyinkii hore, nidaamka xajmigu wuxuu kuu ogolaanayaa inaad dhigato tiro kasta oo .cols gudaha .row. Waxay u kala qaybin doonaan ballaca la heli karo si siman dhexdooda. Waxa kale oo aad dooran kartaa qayb ka mid ah tiirarkaaga si aad u qaadato meel ka badan ama ka yar, halka inta soo hadhay .colay si siman u qaybsanayso inta soo hartay, oo leh fasallo tiirar gaar ah sida .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>

Si otomaatig ah u cabbirka

Tusaalaha hoose waxa uu isticmaalaa utility flexbox si uu toos ugu dhexeeyo waxa ku jira iyo isbeddelada .colsi .col-autoay tiirarkaagu u qaataan kaliya inta boos ee loo baahdo. Si kale u dhig, tiirka laftiisa ayaa cabbiraya iyadoo ku saleysan waxa ku jira.

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

Waxaad markaa dib ugu qasi kartaa taas mar labaad oo leh fasallo tiirar cabbir-gaar ah.

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

Foomamka xariiqda

Isticmaal .row-cols-*fasallada si aad u abuurto qaabayn toosan oo jawaab leh. Marka lagu daro fasalada wax ka beddelka tubbada , waxaanu yeelan doonaa majaraha jihooyinka toosan iyo kuwa toosan. Goobaha daawashada moobaylka ee cidhiidhiga ah, .col-12waxay gacan ka geysataa isku xidhka kontaroolada foomamka iyo in ka badan. Unuggu .align-items-centerwuxuu isku toosiyaa xubnaha qaabka dhexda, isaga oo ka dhigaya .form-checkboxisku toosan si sax ah.

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