Mga porma
Mga halimbawa at mga alituntunin sa paggamit para sa mga istilo ng kontrol ng form, mga pagpipilian sa layout, at mga custom na bahagi para sa paggawa ng malawak na iba't ibang mga form.
Pangkalahatang-ideya
Lumalawak ang mga kontrol sa form ng Bootstrap sa aming mga istilo ng Na-reboot na form na may mga klase. Gamitin ang mga klaseng ito para mag-opt in sa kanilang mga naka-customize na display para sa mas pare-parehong pag-render sa mga browser at device.
Tiyaking gumamit ng naaangkop na type
katangian sa lahat ng mga input (hal, email
para sa email address o number
para sa numerical na impormasyon) upang samantalahin ang mga mas bagong kontrol sa input tulad ng pag-verify ng email, pagpili ng numero, at higit pa.
Narito ang isang mabilis na halimbawa upang ipakita ang mga istilo ng form ng Bootstrap. Panatilihin ang pagbabasa para sa dokumentasyon sa mga kinakailangang klase, layout ng form, at higit pa.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Mga kontrol sa form
Ang mga kontrol sa textual form—tulad ng <input>
s, <select>
s, at <textarea>
s—ay naka-istilo sa .form-control
klase. Kasama ang mga istilo para sa pangkalahatang hitsura, estado ng focus, laki, at higit pa.
Siguraduhing tuklasin ang aming mga custom na form para sa karagdagang istilo <select>
.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Para sa mga input ng file, palitan ang .form-control
para sa .form-control-file
.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
Pagsusukat
Itakda ang mga taas gamit ang mga klase tulad ng .form-control-lg
at .form-control-sm
.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
Basahin lamang
Idagdag ang readonly
boolean attribute sa isang input para maiwasan ang pagbabago ng value ng input. Ang mga read-only na input ay lumilitaw na mas magaan (tulad ng mga hindi pinaganang input), ngunit panatilihin ang karaniwang cursor.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Readonly plain text
Kung gusto mong magkaroon ng mga <input readonly>
elemento sa iyong form na naka-istilo bilang plain text, gamitin ang .form-control-plaintext
klase upang alisin ang default na pag-istilo ng field ng form at panatilihin ang tamang margin at padding.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Mga Input ng Saklaw
Itakda ang pahalang na na-scroll na mga input ng saklaw gamit ang .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Mga checkbox at radyo
Ang mga default na checkbox at radyo ay pinapabuti sa tulong ng .form-check
, isang solong klase para sa parehong mga uri ng input na nagpapabuti sa layout at pag-uugali ng kanilang mga elemento ng HTML . Ang mga checkbox ay para sa pagpili ng isa o ilang mga opsyon sa isang listahan, habang ang mga radyo ay para sa pagpili ng isang opsyon mula sa marami.
Sinusuportahan ang mga naka-disable na checkbox at radyo. Maglalapat ang disabled
attribute ng mas magaan na kulay upang makatulong na ipahiwatig ang estado ng input.
Sinusuportahan ng mga checkbox at radio button ang HTML-based na form validation at nagbibigay ng maikli at naa-access na mga label. Dahil dito, ang ating <input>
s at <label>
s ay magkakapatid na elemento kumpara sa isang <input>
within a <label>
. Ito ay bahagyang mas verbose dahil kailangan mong tukuyin id
at for
mga katangian upang maiugnay ang <input>
at <label>
.
Default (nakasalansan)
Bilang default, ang anumang bilang ng mga checkbox at radyo na agarang magkakapatid ay patayo na isalansan at naaangkop na lagyan ng espasyo sa .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
Nasa linya
Igrupo ang mga checkbox o radyo sa parehong pahalang na hilera sa pamamagitan ng pagdaragdag .form-check-inline
sa alinmang .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Nang walang mga label
Idagdag .position-static
sa mga input sa loob .form-check
na walang anumang label na text. Tandaan na magbigay pa rin ng ilang uri ng naa-access na pangalan para sa mga pantulong na teknolohiya (halimbawa, gamit ang aria-label
).
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
Layout
Dahil nalalapat ang Bootstrap display: block
at width: 100%
sa halos lahat ng aming mga kontrol sa form, ang mga form ay sa pamamagitan ng default na stack patayo. Maaaring gamitin ang mga karagdagang klase upang pag-iba-ibahin ang layout na ito sa isang per-form na batayan.
Bumuo ng mga grupo
Ang .form-group
klase ay ang pinakamadaling paraan upang magdagdag ng ilang istraktura sa mga form. Nagbibigay ito ng flexible na klase na naghihikayat ng wastong pagpapangkat ng mga label, kontrol, opsyonal na text ng tulong, at pagmemensahe sa pagpapatunay ng form. Bilang default nalalapat lang ito margin-bottom
, ngunit kumukuha ito ng mga karagdagang istilo kung .form-inline
kinakailangan. Gamitin ito kasama <fieldset>
ng s, <div>
s, o halos anumang iba pang elemento.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
Form grid
Maaaring bumuo ng mas kumplikadong mga form gamit ang aming mga klase sa grid. Gamitin ang mga ito para sa mga layout ng form na nangangailangan ng maraming column, iba't ibang lapad, at karagdagang mga opsyon sa pag-align.
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Bumuo ng hilera
Maaari ka ring magpalit .row
ng .form-row
, isang variation ng aming karaniwang grid row na nag-o-override sa mga default na column gutters para sa mas mahigpit at mas compact na mga layout.
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Ang mas kumplikadong mga layout ay maaari ding gawin gamit ang grid system.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<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>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Pahalang na anyo
Gumawa ng mga pahalang na form gamit ang grid sa pamamagitan ng pagdaragdag ng .row
klase upang bumuo ng mga grupo at paggamit ng mga .col-*-*
klase upang tukuyin ang lapad ng iyong mga label at kontrol. Tiyaking idagdag din .col-form-label
sa iyong <label>
mga s upang patayo silang nakasentro sa kanilang mga nauugnay na kontrol sa form.
Kung minsan, maaaring kailangan mong gumamit ng margin o padding utilities para magawa ang perpektong pagkakahanay na kailangan mo. Halimbawa, inalis namin ang padding-top
label sa aming nakasalansan na radio inputs para mas mai-align ang text baseline.
<form>
<div class="form-group row">
<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="form-group row">
<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="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left 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="form-group row">
<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>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Horizontal form na sukat ng label
Siguraduhing gamitin .col-form-label-sm
o .col-form-label-lg
sa iyong mga <label>
o <legend>
para masundan nang tama ang laki ng .form-control-lg
at .form-control-sm
.
<form>
<div class="form-group row">
<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="form-group row">
<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="form-group 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>
</form>
Pagsusukat ng column
Gaya ng ipinakita sa mga nakaraang halimbawa, pinapayagan ka ng aming grid system na maglagay ng anumang bilang ng .col
s sa loob ng isang .row
o .form-row
. Hahatiin nila nang pantay ang magagamit na lapad sa pagitan nila. Maaari ka ring pumili ng isang subset ng iyong mga column na kukuha ng mas marami o mas kaunting espasyo, habang ang mga natitirang .col
s ay pantay na hinahati ang iba, na may mga partikular na klase ng column tulad ng .col-7
.
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
Auto-sizing
Ang halimbawa sa ibaba ay gumagamit ng isang flexbox utility upang patayo na igitna ang mga nilalaman at mga pagbabago .col
upang .col-auto
ang iyong mga column ay kumukuha lamang ng maraming espasyo kung kinakailangan. Maglagay ng isa pang paraan, ang mga laki ng haligi mismo batay sa mga nilalaman.
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<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 mb-2">Submit</button>
</div>
</div>
</form>
Maaari mong muling i-remix iyon sa mga klase ng column na tukoy sa laki.
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto my-1">
<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 my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
At siyempre suportado ang mga custom na kontrol sa form .
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<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 my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Mga inline na form
Gamitin ang .form-inline
klase upang magpakita ng serye ng mga label, mga kontrol sa form, at mga pindutan sa isang pahalang na hilera. Ang mga kontrol ng form sa loob ng mga inline na form ay bahagyang nag-iiba mula sa kanilang mga default na estado.
- Ang mga kontrol ay
display: flex
, nagko-collapse ng anumang HTML white space at nagbibigay-daan sa iyong magbigay ng alignment control na may mga spacing at flexbox utilities. - Ang mga control at input group ay natatanggap
width: auto
upang i-override ang Bootstrap defaultwidth: 100%
. - Ang mga kontrol ay lalabas lamang inline sa mga viewport na hindi bababa sa 576px ang lapad upang i-account ang mga makitid na viewport sa mga mobile device.
Maaaring kailanganin mong manu-manong tugunan ang lapad at pagkakahanay ng mga indibidwal na kontrol ng form na may mga kagamitan sa pagpupuwang (tulad ng ipinapakita sa ibaba). Panghuli, siguraduhing palaging magsama ng a <label>
sa bawat kontrol ng form, kahit na kailangan mo itong itago mula sa mga bisitang hindi screenreader na may .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Sinusuportahan din ang mga kontrol at pagpili ng custom na form.
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Mga alternatibo sa mga nakatagong label
Magkakaroon ng problema sa iyong mga form ang mga pantulong na teknolohiya gaya ng mga screen reader kung hindi ka magsasama ng label para sa bawat input. Para sa mga inline na form na ito, maaari mong itago ang mga label gamit ang .sr-only
klase. May mga karagdagang alternatibong paraan ng pagbibigay ng label para sa mga pantulong na teknolohiya, gaya ng aria-label
, aria-labelledby
o title
attribute. Kung wala sa mga ito ang naroroon, ang mga pantulong na teknolohiya ay maaaring gumamit ng placeholder
katangian, kung mayroon, ngunit tandaan na ang paggamit ng placeholder
bilang kapalit para sa iba pang mga paraan ng pag-label ay hindi pinapayuhan.
Text ng tulong
Maaaring gawin ang text ng tulong sa antas ng block sa mga form gamit ang .form-text
(dating kilala bilang .help-block
sa v3). Ang inline na text ng tulong ay maaaring maipatupad nang may kakayahang umangkop gamit ang anumang inline na elemento ng HTML at mga utility class tulad ng .text-muted
.
Pag-uugnay ng text ng tulong sa mga kontrol ng form
Ang text ng tulong ay dapat na tahasang nauugnay sa kontrol ng form na nauugnay sa paggamit ng aria-describedby
katangian. Titiyakin nito na ang mga pantulong na teknolohiya—gaya ng mga screen reader—ay iaanunsyo ang text ng tulong na ito kapag ang user ay tumutok o pumasok sa kontrol.
Ang teksto ng tulong sa ibaba ng mga input ay maaaring i-istilo ng .form-text
. Kasama sa klase na ito display: block
at nagdaragdag ng ilang nangungunang margin para sa madaling pagpupuwang mula sa mga input sa itaas.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
Ang inline na text ay maaaring gumamit ng anumang tipikal na inline na elemento ng HTML (maging ito ay <small>
, <span>
, o iba pa) na walang iba kundi isang utility class.
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
Mga hindi pinaganang form
Idagdag ang disabled
katangian ng boolean sa isang input upang maiwasan ang mga pakikipag-ugnayan ng user at gawin itong mas magaan.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Idagdag ang disabled
attribute sa isang <fieldset>
upang i-disable ang lahat ng kontrol sa loob.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Caveat na may mga anchor
Tinatrato ng mga browser ang lahat ng mga kontrol ng native na form ( <input>
, <select>
, at mga <button>
elemento) sa loob ng isang <fieldset disabled>
bilang hindi pinagana, na pumipigil sa parehong mga pakikipag-ugnayan sa keyboard at mouse sa mga ito.
Gayunpaman, kung kasama rin sa iyong form ang mga custom na elementong tulad ng button gaya ng <a ... class="btn btn-*">
, bibigyan lang ang mga ito ng istilong pointer-events: none
. Tulad ng nabanggit sa seksyon tungkol sa naka- disable na estado para sa mga button (at partikular sa sub-section para sa mga elemento ng anchor), ang CSS property na ito ay hindi pa na-standardize at hindi pa ganap na sinusuportahan sa Internet Explorer 10. Ang mga anchor-based na kontrol ay mananatili pa rin nakatutok at nagagamit gamit ang keyboard. Dapat mong manu-manong baguhin ang mga kontrol na ito sa pamamagitan ng pagdaragdag tabindex="-1"
upang pigilan ang mga ito sa pagtanggap ng focus at aria-disabled="disabled"
upang ipahiwatig ang kanilang estado sa mga teknolohiyang pantulong.
Cross-browser compatibility
Habang ilalapat ng Bootstrap ang mga istilong ito sa lahat ng browser, hindi ganap na sinusuportahan ng Internet Explorer 11 at mas mababa ang disabled
katangian sa isang <fieldset>
. Gumamit ng custom na JavaScript upang huwag paganahin ang fieldset sa mga browser na ito.
Pagpapatunay
Magbigay ng mahalaga, naaaksyunan na feedback sa iyong mga user na may HTML5 form validation– available sa lahat ng aming sinusuportahang browser . Pumili mula sa default na feedback sa pagpapatunay ng browser, o ipatupad ang mga custom na mensahe gamit ang aming mga built-in na klase at panimulang JavaScript.
Paano ito gumagana
Narito kung paano gumagana ang pagpapatunay ng form sa Bootstrap:
- Ang pagpapatunay ng form ng HTML ay inilalapat sa pamamagitan ng dalawang pseudo-class ng CSS,
:invalid
at:valid
. Nalalapat ito sa<input>
,<select>
, at<textarea>
mga elemento. - Sinasaklaw ng Bootstrap ang
:invalid
at mga:valid
istilo sa parent.was-validated
class, karaniwang inilalapat sa<form>
. Kung hindi, lalabas ang anumang kinakailangang field na walang value bilang di-wasto sa pag-load ng page. Sa ganitong paraan, maaari mong piliin kung kailan isaaktibo ang mga ito (karaniwang pagkatapos subukan ang pagsusumite ng form). - Upang i-reset ang hitsura ng form (halimbawa, sa kaso ng mga dynamic na pagsusumite ng form gamit ang AJAX), alisin ang
.was-validated
klase mula sa<form>
muli pagkatapos ng pagsusumite. - Bilang isang fallback,
.is-invalid
at.is-valid
ang mga klase ay maaaring gamitin sa halip na ang mga pseudo-class para sa server side validation . Hindi sila nangangailangan ng.was-validated
klase ng magulang. - Dahil sa mga hadlang sa kung paano gumagana ang CSS, hindi namin (sa kasalukuyan) maglapat ng mga istilo sa isang
<label>
nauuna sa kontrol ng form sa DOM nang walang tulong ng custom na JavaScript. - Sinusuportahan ng lahat ng modernong browser ang constraint validation API , isang serye ng mga pamamaraan ng JavaScript para sa pagpapatunay ng mga kontrol sa form.
- Maaaring gamitin ng mga mensahe ng feedback ang mga default ng browser (iba-iba para sa bawat browser, at hindi mai-istilo sa pamamagitan ng CSS) o ang aming mga custom na istilo ng feedback na may karagdagang HTML at CSS.
- Maaari kang magbigay ng mga custom na validity na mensahe
setCustomValidity
sa JavaScript.
Sa pag-iisip na iyon, isaalang-alang ang mga sumusunod na demo para sa aming mga istilo ng pagpapatunay ng custom na form, opsyonal na mga klase sa gilid ng server, at mga default ng browser.
Mga custom na istilo
Para sa custom na Bootstrap form validation messages, kakailanganin mong idagdag ang novalidate
boolean attribute sa iyong <form>
. Hindi nito pinapagana ang default na feedback tooltip ng browser, ngunit nagbibigay pa rin ng access sa mga form validation API sa JavaScript. Subukang isumite ang form sa ibaba; haharangin ng aming JavaScript ang button na isumite at maghahatid ng feedback sa iyo. Kapag sinusubukang isumite, makikita mo ang :invalid
at mga :valid
istilong inilapat sa iyong mga kontrol sa form.
Ang mga custom na istilo ng feedback ay naglalapat ng mga custom na kulay, mga hangganan, mga estilo ng focus, at mga icon sa background upang mas mahusay na makipag-usap ng feedback. Ang mga icon sa background para sa <select>
s ay magagamit lamang sa .custom-select
, at hindi .form-control
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Mga default ng browser
Hindi interesado sa mga mensahe ng feedback sa custom na pagpapatunay o pagsulat ng JavaScript upang baguhin ang mga gawi ng form? Lahat ng mabuti, maaari mong gamitin ang mga default ng browser. Subukang isumite ang form sa ibaba. Depende sa iyong browser at OS, makakakita ka ng bahagyang naiibang istilo ng feedback.
Bagama't hindi mai-istilo ang mga istilo ng feedback na ito gamit ang CSS, maaari mo pa ring i-customize ang text ng feedback sa pamamagitan ng JavaScript.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Sa panig ng server
Inirerekomenda namin ang paggamit ng pagpapatunay sa panig ng kliyente, ngunit kung sakaling kailanganin mo ang pagpapatunay sa panig ng server, maaari mong isaad ang mga di-wasto at wastong mga field ng form na may .is-invalid
at .is-valid
. Tandaan na .invalid-feedback
sinusuportahan din sa mga klase na ito.
Para sa mga di-wastong field, tiyaking ang di-wastong mensahe ng feedback/error ay nauugnay sa nauugnay na field ng form gamit ang aria-describedby
. Ang katangiang ito ay nagbibigay-daan sa higit sa isa id
na ma-reference, kung sakaling ang field ay tumuturo na sa karagdagang teksto ng form.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Mga sinusuportahang elemento
Available ang mga istilo ng pagpapatunay para sa mga sumusunod na kontrol at bahagi ng form:
<input>
s at<textarea>
s kasama.form-control
<select>
s may.form-control
o.custom-select
.form-check
s.custom-checkbox
s at.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
Mga tooltip
Kung pinapayagan ito ng iyong layout ng form, maaari mong palitan ang mga .{valid|invalid}-feedback
klase para sa mga .{valid|invalid}-tooltip
klase upang magpakita ng feedback sa pagpapatunay sa isang naka-istilong tooltip. Tiyaking may kasamang magulang position: relative
para sa pagpoposisyon ng tooltip. Sa halimbawa sa ibaba, mayroon na nito ang aming mga klase sa column, ngunit maaaring mangailangan ng alternatibong setup ang iyong proyekto.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Pagpapasadya
Maaaring i-customize ang mga estado ng pagpapatunay sa pamamagitan ng Sass gamit ang $form-validation-states
mapa. Matatagpuan sa aming _variables.scss
file, ang mapa ng Sass na ito ay naka-loop upang makabuo ng mga estado ng default valid
/ invalid
validation. Kasama ang isang nested na mapa para sa pag-customize ng kulay at icon ng bawat estado. Bagama't walang ibang mga estado ang sinusuportahan ng mga browser, ang mga gumagamit ng mga custom na istilo ay madaling magdagdag ng mas kumplikadong feedback sa form.
Pakitandaan na hindi namin inirerekomenda ang pag-customize ng mga value na ito nang hindi rin binabago ang form-validation-state
mixin.
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
Pagpapatunay ng pangkat ng input
Upang matukoy kung anong mga elemento ang nangangailangan ng mga bilugan na sulok sa loob ng isang input group na may validation, ang isang input group ay nangangailangan ng karagdagang .has-validation
klase.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
Mga custom na form
Para sa higit pang pagpapasadya at pagkakapare-pareho ng cross browser, gamitin ang aming ganap na custom na mga elemento ng form upang palitan ang mga default ng browser. Binuo ang mga ito sa ibabaw ng semantic at naa-access na markup, kaya solidong kapalit ang mga ito para sa anumang default na kontrol sa form.
Mga checkbox at radyo
Ang bawat checkbox at radyo <input>
at <label>
pagpapares ay nakabalot sa isang <div>
upang gawin ang aming custom na kontrol. Sa istruktura, ito ay kapareho ng diskarte sa aming default .form-check
.
Ginagamit namin ang sibling selector ( ~
) para sa lahat ng aming <input>
estado—tulad ng :checked
—upang maayos na istilo ang aming custom na indicator ng form. Kapag pinagsama sa .custom-control-label
klase, maaari rin nating i-istilo ang teksto para sa bawat item batay sa <input>
estado ng 's.
Itinatago namin ang default <input>
gamit ang opacity
at ginagamit ang .custom-control-label
upang bumuo ng bagong tagapagpahiwatig ng custom na form sa lugar nito na may ::before
at ::after
. Sa kasamaang palad, hindi kami makakagawa ng custom na isa mula sa dahil hindi gumagana <input>
ang CSS sa elementong iyon.content
Sa mga naka-check na estado, gumagamit kami ng base64 na naka-embed na SVG na mga icon mula sa Open Iconic . Nagbibigay ito sa amin ng pinakamahusay na kontrol para sa pag-istilo at pagpoposisyon sa mga browser at device.
Mga checkbox
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Magagamit din ng mga custom na checkbox ang :indeterminate
pseudo class kapag manu-manong itinakda sa pamamagitan ng JavaScript (walang available na HTML attribute para sa pagtukoy nito).
Kung gumagamit ka ng jQuery, ang isang bagay na tulad nito ay sapat na:
$('.your-checkbox').prop('indeterminate', true)
Mga radyo
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
Nasa linya
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Hindi pinagana
Maaari ding i-disable ang mga custom na checkbox at radyo. Idagdag ang disabled
boolean attribute sa <input>
at ang custom na indicator at paglalarawan ng label ay awtomatikong mai-istilo.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Mga switch
Ang switch ay may markup ng custom na checkbox ngunit ginagamit ang .custom-switch
klase para mag-render ng toggle switch. Sinusuportahan din ng mga switch ang disabled
katangian.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Pumili ng menu
Ang mga custom na <select>
menu ay nangangailangan lamang ng isang custom na klase, .custom-select
upang ma-trigger ang mga custom na estilo. Ang mga custom na istilo ay limitado sa <select>
unang hitsura ni at hindi maaaring baguhin ang mga <option>
s dahil sa mga limitasyon ng browser.
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Maaari ka ring pumili mula sa maliliit at malalaking custom na pinili upang tumugma sa aming mga input ng text na may parehong laki.
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Ang multiple
katangian ay sinusuportahan din:
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Tulad ng size
katangian:
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Saklaw
Gumawa ng mga custom <input type="range">
na kontrol gamit ang .custom-range
. Ang track (ang background) at thumb (ang halaga) ay parehong naka-istilo upang lumitaw nang pareho sa mga browser. Dahil ang IE at Firefox lamang ang sumusuporta sa "pagpupuno" sa kanilang track mula sa kaliwa o kanan ng hinlalaki bilang isang paraan upang biswal na ipahiwatig ang pag-unlad, hindi namin ito sinusuportahan sa kasalukuyan.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Ang mga input ng range ay may mga implicit na value para sa min
at max
— 0
at 100
, ayon sa pagkakabanggit. Maaari kang tumukoy ng mga bagong halaga para sa mga gumagamit ng min
at mga max
katangian.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Bilang default, ang mga input ng range ay "snap" sa mga halaga ng integer. Upang baguhin ito, maaari kang tumukoy ng step
halaga. Sa halimbawa sa ibaba, doble namin ang bilang ng mga hakbang sa pamamagitan ng paggamit ng step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
File browser
Ang pag-input ng file ay ang pinakamakulit sa grupo at nangangailangan ng karagdagang JavaScript kung gusto mong i-hook up ang mga ito gamit ang functional Choose file... at piniling file name text.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Itinatago namin ang default na file sa <input>
pamamagitan opacity
ng at sa halip ay i-istilo ang <label>
. Ang pindutan ay nabuo at nakaposisyon na may ::after
. Panghuli, ipinapahayag namin ang isang width
at height
sa <input>
para sa wastong espasyo para sa nakapalibot na nilalaman.
Pagsasalin o pagpapasadya ng mga string gamit ang SCSS
Ang :lang()
pseudo-class ay ginagamit upang payagan ang pagsasalin ng "Browse" na teksto sa ibang mga wika. I-override o magdagdag ng mga entry sa $custom-file-text
Sass variable na may nauugnay na tag ng wika at mga naka-localize na string. Ang English string ay maaaring i-customize sa parehong paraan. Halimbawa, narito kung paano maaaring magdagdag ng pagsasalin sa Espanyol (ang code ng wika ng Espanyol ay es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Narito ang lang(es)
pagkilos sa pasadyang pag-input ng file para sa pagsasalin ng Espanyol:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
Kakailanganin mong itakda nang tama ang wika ng iyong dokumento (o subtree nito) upang maipakita ang tamang teksto. Magagawa ito gamit ang lang
attribute sa <html>
elemento o ang Content-Language
HTTP header , bukod sa iba pang mga pamamaraan.
Pagsasalin o pagpapasadya ng mga string gamit ang HTML
Nagbibigay din ang Bootstrap ng paraan upang i-translate ang text na "Browse" sa HTML na may data-browse
attribute na maaaring idagdag sa custom na input label (halimbawa sa Dutch):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>