Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Vuandlalo

Nyika tifomo ta wena xivumbeko xo karhi—ku suka eka layini ku ya eka horizontal ku ya eka ku tirhisiwa ka gridi ya ntolovelo—hi swihlawulekisi swa hina swa layout ya tifomo.

Eka tluka leri

Swivumbeko

Ntlawa wun’wana na wun’wana wa tinsimu ta xivumbeko wu fanele ku tshama eka <form>elemente. Bootstrap a yi nyiki xitayili xa xiviri xa <form>elemente, kambe ku na swihlawulekisi swin’wana swa matimba swa browser leswi nyikiwaka hi ku tiyimisela.

  • Xana untshwa eka tifomo ta browser? Anakanya hi ku kambisisa tidokisi ta fomo ya MDN ku kuma nkatsakanyo na nxaxamelo lowu heleleke wa swihlawulekisi leswi nga kona.
  • <button>s endzeni ka <form>default to type="submit", kutani lwela ku va wo kongoma naswona minkarhi hinkwayo u katsa a type.

Tanihi leswi Bootstrap yi tirhaka display: blockna width: 100%kwalomu ka vulawuri bya hina hinkwabyo bya tifomo, tifomo hi ku tiyimisela ti ta stack hi ku kongoma. Titlilasi to engetela ti nga tirhisiwa ku cinca-cinca layout leyi hi ku ya hi fomo yin’wana na yin’wana.

Switirhisiwa

Switirhisiwa swa margin i ndlela yo olova yo engetela xivumbeko xo karhi eka tifomo. Va nyika ku hlengeletiwa ka masungulo ka malebvu, vulawuri, tsalwa ra fomo leri nga hlawuriwa, na marungula ya ku tiyisisa fomo. Hi ringanyeta ku namarhela margin-bottomswitirhisiwa, na ku tirhisa nkongomiso wun’we eka fomo hinkwayo ku kuma ku nga cinci.

Titwele u ntshunxekile ku aka tifomo ta wena hilaha u lavaka hakona, hi <fieldset>s, <div>s, kumbe kwalomu ka elemente yin’wana na yin’wana.

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>

Fomo ya gridi

Tifomo leti rharhanganeke swinene ti nga akiwa hi ku tirhisa titlilasi ta hina ta gridi. Tirhisa leswi eka swivumbeko swa tifomo leswi lavaka tikholomu to tala, ku anama ko hambana-hambana, na swihlawulekisi swo engetela swa ku ringanisa. Swi lava leswaku $enable-grid-classesxihlawulekisi xa Sass xi tirhisiwa (ku pfula hi ku tiyimisela).

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>

Swidziva swa le matini

By adding gutter modifier classes , ungava na vulawuri eka ku anama ka gutter eka xikan’we na inline tani hi block direction. Nakambe swi lava leswaku $enable-grid-classesxihlawulekisi xa Sass xi tirhisiwa (on hi ku tiyimisela).

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>

Ti layouts leti rharhanganeke swinene tinga tlhela ti endliwa hi sisiteme ya 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>

Xivumbeko xa horizontal

Endla tifomo ta horizontal hi gridi hi ku engetela .rowtlilasi ku vumba mintlawa na ku tirhisa .col-*-*titlilasi ku boxa ku anama ka malebvu ya wena na vulawuri. Tiyisisa leswaku u engetela .col-form-labeleka s ya wena <label>na yona leswaku yi va vertically centered na vulawuri bya yona bya xivumbeko lebyi fambelanaka.

Minkarhi yin’wana, kumbexana u fanele u tirhisa switirhisiwa swa margin kumbe swa padding leswaku u endla ku ringanana koloko loku hetisekeke loku u ku lavaka. Xikombiso, hi susile padding-toplebula ya hina ya swingheniso swa xiya-ni-moya leswi hlanganisiweke ku ringanisa ku antswa masungulo ya tsalwa.

Swiya-ni-moya
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>

Ku ringanisiwa ka lebula ya xivumbeko xa horizontal

Tiyisisa leswaku u tirhisa .col-form-label-smkumbe .col-form-label-lgeka <label>s kumbe <legend>s ya wena ku landzelela kahle vukulu bya .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>

Ku pima mpimo wa tikholomu

Hilaha swi kombisiweke hakona eka swikombiso leswi hundzeke, sisiteme ya hina ya giridi yi ku pfumelela ku veka nhlayo yihi na yihi ya .cols endzeni ka .row. Va ta avanyisa ku anama loku nga kona hi ku ringana exikarhi ka vona. U nga ha tlhela u hlawula ntlawa lowutsongo wa tikholomu ta wena ku teka ndhawu yo tala kumbe yitsongo, kasi .cols leyi saleke yi avanyisa hi ku ringana leswi seleke, hi titlilasi to karhi ta tikholomu to fana na .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>

Ku endla vukulu hi ku tisungulela

Xikombiso lexi nga laha hansi xi tirhisa xitirhisiwa xa flexbox ku veka exikarhi hi ndlela yo yima leswi nga endzeni na ku cinca .colleswaku .col-autotikholomu ta wena ti teka ntsena ndhawu yo tala hilaha swi lavekaka hakona. Hi ndlela yin’wana, kholomo yi tisayisa hi yoxe hi ku ya hi leswi nga endzeni.

@
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 nga ha tlhela u hlanganisa sweswo nakambe hi titlilasi ta tikholomu leti kongomeke eka sayizi.

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

Tifomo ta le ndzeni ka layini

Tirhisa .row-cols-*titlilasi ku tumbuluxa swivumbeko swa horizontal leswi hlamulaka. By adding gutter modifier classes , hi ta va na ti gutters eka matlhelo ya horizontal na vertical. Eka swivono swa tiselfoni leswitsongo, .col-12swi pfuna ku hlanganisa swilawuri swa fomo na swin’wana. The .align-items-centeryi ringanisa swiaki swa xivumbeko exikarhi, yi endla ku .form-checkringanisa kahle.

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