Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Tsarin tsari

Ba da fom ɗin ku wasu tsarin-daga kan layi zuwa kwance zuwa aiwatar da grid na al'ada-tare da zaɓuɓɓukan shimfidar tsari na mu.

A wannan shafi

Siffofin

Kowane rukunin filayen sifofi yakamata ya kasance a cikin wani yanki <form>. Bootstrap yana ba da wani salo na asali don <form>kashi, amma akwai wasu fasalulluka masu ƙarfi waɗanda aka samar ta tsohuwa.

  • Sabbin siffofin burauza? Yi la'akari da bitar takardun fom na MDN don dubawa da cikakken jerin halayen da ake da su.
  • <button>s a cikin <form>tsoho zuwa type="submit", don haka yi ƙoƙari ku zama takamaiman kuma koyaushe ku haɗa da type.

Tunda Bootstrap ya shafi display: blockkuma width: 100%kusan dukkan nau'ikan sarrafa nau'ikan mu, fom ɗin za su tari ta tsohuwa a tsaye. Ana iya amfani da ƙarin azuzuwan don bambanta wannan shimfidar wuri bisa kowane tsari.

Abubuwan amfani

Abubuwan amfani da gefe sune hanya mafi sauƙi don ƙara wasu tsari zuwa siffofi. Suna samar da ainihin haɗar alamomi, sarrafawa, rubutu na zaɓi, da saƙon ingantaccen tsari. Muna ba da shawarar manne wa margin-bottomkayan aiki, da yin amfani da jagora guda ɗaya cikin tsari don daidaito.

Jin daɗin gina fom ɗinku yadda kuke so, tare da <fieldset>s, <div>s, ko kusan kowane nau'in.

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>

Tsarin tsari

Za a iya gina ƙarin hadaddun siffofin ta amfani da azuzuwan grid ɗin mu. Yi amfani da waɗannan don shimfidar tsari waɗanda ke buƙatar ginshiƙai da yawa, faɗin faɗin daban-daban, da ƙarin zaɓuɓɓukan jeri. Yana buƙatar $enable-grid-classeskunna canjin Sass (a kunna ta tsohuwa).

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>

Gutters

Ta ƙara azuzuwan gyare-gyare na gutter , za ku iya samun iko akan faɗin gutter a ciki da kuma kan layi azaman hanyar toshewa. Hakanan yana buƙatar $enable-grid-classeskunna canjin Sass (a kunna ta tsohuwa).

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>

Hakanan za'a iya ƙirƙira ƙarin rikitattun shimfidu tare da tsarin 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>

Siffar kwance

Ƙirƙirar sifofin kwance tare da grid ta ƙara .rowajin don samar da ƙungiyoyi da amfani da .col-*-*azuzuwan don ƙididdige faɗin alamunku da abubuwan sarrafawa. Tabbatar ƙara .col-form-labelzuwa <label>s ɗin ku don haka suna tsaye a tsaye tare da abubuwan sarrafa nau'ikan su.

A wasu lokuta, ƙila kuna buƙatar amfani da gefe ko abubuwan amfani don ƙirƙirar daidaitattun daidaiton da kuke buƙata. Misali, mun cire alamar padding-topshigar da rediyon mu da ke kan tambarin radiyo don daidaita layin rubutu da kyau.

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

Girman nau'in lakabin kwance

Tabbatar amfani da .col-form-label-smko .col-form-label-lgzuwa ga <label>s ko <legend>s ɗin ku don bi daidai girman girman .form-control-lgda .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>

Girman ginshiƙi

Kamar yadda aka nuna a cikin misalan da suka gabata, tsarin grid ɗin mu yana ba ku damar sanya kowane adadin .cols a cikin .row. Za su raba faɗin da ke akwai daidai tsakanin su. Hakanan kuna iya zaɓar juzu'in ginshiƙan ku don ɗaukar sarari ko žasa, yayin da sauran .cols ɗin suka raba daidai da sauran, tare da takamaiman azuzuwan shafi kamar .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>

Girman atomatik

Misalin da ke ƙasa yana amfani da kayan aikin flexbox don a tsaye a tsakiya abubuwan da ke ciki da canje-canje .colzuwa ta .col-autoyadda ginshiƙan ku kawai su ɗauki sarari gwargwadon buƙata. Sanya wata hanya, ginshiƙi yana girman kansa bisa abubuwan da ke ciki.

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

Kuna iya sake haɗa wannan tare da takamaiman azuzuwan shafi mai girma.

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

Siffofin layi

Yi amfani da .row-cols-*azuzuwan don ƙirƙirar shimfidu masu amsawa a kwance. Ta ƙara azuzuwan gyare-gyare na gutter , za mu sami magudanar ruwa a kwance da kwatance. A kan kunkuntar wuraren kallon wayar hannu, .col-12yana taimakawa tara abubuwan sarrafawa da ƙari. .align-items-centerYana daidaita abubuwan sifofi zuwa tsakiya, yana yin daidaita .form-checkdaidai.

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