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.
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 zuwatype="submit"
, don haka yi ƙoƙari ku zama takamaiman kuma koyaushe ku haɗa datype
.- Kuna iya kashe kowane nau'i na nau'i a cikin nau'i tare da
disabled
sifa akan<form>
.
Tunda Bootstrap ya shafi display: block
kuma 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-bottom
kayan 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.
<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-classes
kunna canjin Sass (a kunna ta tsohuwa).
<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-classes
kunna canjin Sass (a kunna ta tsohuwa).
<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.
<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 .row
ajin don samar da ƙungiyoyi da amfani da .col-*-*
azuzuwan don ƙididdige faɗin alamunku da abubuwan sarrafawa. Tabbatar ƙara .col-form-label
zuwa <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-top
shigar da rediyon mu da ke kan tambarin radiyo don daidaita layin rubutu da kyau.
<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-sm
ko .col-form-label-lg
zuwa ga <label>
s ko <legend>
s ɗin ku don bi daidai girman girman .form-control-lg
da .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>
Girman ginshiƙi
Kamar yadda aka nuna a cikin misalan da suka gabata, tsarin grid ɗin mu yana ba ku damar sanya kowane adadin .col
s 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 .col
s ɗin suka raba daidai da sauran, tare da takamaiman azuzuwan shafi kamar .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>
Girman atomatik
Misalin da ke ƙasa yana amfani da kayan aikin flexbox don a tsaye a tsakiya abubuwan da ke ciki da canje-canje .col
zuwa ta .col-auto
yadda ginshiƙan ku kawai su ɗauki sarari gwargwadon buƙata. Sanya wata hanya, ginshiƙi yana girman kansa bisa abubuwan da ke ciki.
<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.
<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-12
yana taimakawa tara abubuwan sarrafawa da ƙari. .align-items-center
Yana daidaita abubuwan sifofi zuwa tsakiya, yana yin daidaita .form-checkbox
daidai.
<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>