Puka
Ko nga tauira me nga aratohu whakamahi mo nga momo mana whakahaere, nga whiringa tahora, me nga waahanga ritenga mo te hanga i nga momo momo momo.
Tirohanga
Ko nga mana puka a Bootstrap ka whakawhānui ake i runga i o maatau momo ahua kua Whakahoutia me nga karaehe. Whakamahia enei karaehe ki te whakauru ki o raatau whakaaturanga kia rite tonu te whakaputa puta noa i nga kaitirotiro me nga taputapu.
Kia mohio koe ki te whakamahi i tetahi type
huanga e tika ana mo nga whakaurunga katoa (hei tauira, email
mo te wahitau imeera, number
mo nga korero nama ranei) hei whakamahi i nga mana whakauru hou penei i te manatoko imeera, te kowhiringa nama, me etahi atu.
Anei he tauira tere hei whakaatu i nga momo ahua o Bootstrap. Kia mau ki te panui mo nga tuhinga mo nga karaehe e hiahiatia ana, te whakatakotoranga puka, me etahi atu.
<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>
Puka mana whakahaere
Ko nga mana kupu kupu—penei <input>
i te s, <select>
s, me <textarea>
te s—he mea whakaahua ki te .form-control
karaehe. Kei roto ko nga momo ahua mo te ahua whanui, te ahua arotahi, te rahi, me etahi atu.
Kia mohio koe ki te torotoro i a maatau puka ritenga ki etahi atu momo <select>
s.
<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>
Mo nga whakaurunga konae, whakawhitia te .form-control
mo .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>
Te rahinga
Tautuhi teitei ma te whakamahi i nga karaehe penei .form-control-lg
me te .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>
Panui anake
Tāpirihia te readonly
huanga boolean ki runga i te whakaurunga hei aukati i te whakarereketanga o te uara o te whakauru. Ko nga whakauru panui-anake ka ngawari ake (penei i nga whakaurunga haua), engari ka mau tonu te pehu paerewa.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Panui anake te kuputuhi tokau
Mena kei te pirangi koe kia <input readonly>
tapaina nga huānga o to ahua hei kupu tuhi noa, whakamahia te .form-control-plaintext
karaehe ki te tango i te ahua o te mara puka taunoa me te pupuri i te tawhē tika me te papa.
<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>
Nga Whakauru Awhe
Tautuhia nga whakaurunga awhe ka taea te panuku whakapae ma te whakamahi .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>
Pouakataki me nga reo irirangi
Ko nga pouakataki taunoa me nga reo irirangi ka whakapai ake ma te awhina o .form-check
, he karaehe kotahi mo nga momo whakauru e rua hei whakapai ake i te whakatakotoranga me te whanonga o a raatau huānga HTML . Ko nga pouakataki mo te kowhiri i tetahi, maha ranei nga whiringa i roto i te rarangi, ko nga reo irirangi hei kowhiri i tetahi waahanga mai i te maha.
Ka tautokohia nga pouakataki haua me nga reo irirangi. Ka disabled
hoatu he tae mama ake te huanga hei tohu i te ahua o te whakaurunga.
Ko nga pouakataki me nga paatene reo irirangi e tautoko ana i te whakamanatanga o te puka HTML me te whakarato tapanga poto me te waatea. No reira, ko o tatou <input>
s me o tatou <label>
he huānga teina he rereke ki te <input>
roto a <label>
. He paku noa ake tenei na te mea me tohu koe id
me nga for
huanga hei hono i te <input>
me te <label>
.
Taunoa (tāpae)
Ma te taunoa, ko nga maha o nga pouakataki me nga reo irirangi he tuakana tonu ka tapae poutū me te mokowhiti tika ki te .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>
Raina
Whakarōpū pouakataki, reo irirangi ranei i runga i te rarangi whakapae kotahi ma te taapiri .form-check-inline
ki tetahi .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>
Karekau he tapanga
Taapirihia .position-static
ki nga whakaurunga kei roto karekau .form-check
he kupu tapanga. Kia mahara ki te whakarato tonu i etahi momo ingoa e waatea ana mo nga hangarau awhina (hei tauira, te whakamahi 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>
Tahora
I te mea e pa ana a Bootstrap display: block
me width: 100%
te tata ki te katoa o o maatau mana puka, ka taunoa te tapae poutū nga puka. Ka taea te whakamahi i etahi atu karaehe ki te rereke i tenei tahora i runga i te ahua o ia-puka.
Whakaritehia nga roopu
Ko te .form-group
karaehe te huarahi ngawari ki te taapiri i etahi hanganga ki nga puka. E whakarato ana i te karaehe ngawari e akiaki ana i te whakarōpūtanga tika o nga tapanga, nga mana whakahaere, nga kupu awhina awhina, me te whakaputa karere whakamana. Ma te taunoa ka pa anake margin-bottom
, engari ka kohia e ia etahi momo taapiri .form-inline
ina hiahiatia. Whakamahia me <fieldset>
te s, <div>
s, me etahi atu huānga.
<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>
Matiti puka
Ka taea te hanga i nga puka uaua ake ma te whakamahi i o maatau akomanga matiti. Whakamahia enei mo nga whakatakotoranga puka e hiahia ana kia maha nga pou, nga whanui rereke, me etahi atu whiringa whakatika.
<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>
Puka rarangi
Ka taea ano e koe te huri .row
mo .form-row
te , he rereke o to maatau rarangi matiti paerewa e takahi ana i nga awaawa o te pou taunoa mo nga whakatakotoranga kiato ake.
<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>
Ka taea hoki te hanga tahora uaua ake me te punaha matiti.
<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>
Puka whakapae
Waihangahia nga puka whakapae me te matiti ma te taapiri i te .row
karaehe ki te hanga roopu me te whakamahi i nga .col-*-*
karaehe hei tohu i te whanui o o tapanga me o mana whakahaere. Kia mahara ki te taapiri atu .col-form-label
ki o <label>
s kia noho poutū ki roto i o raatau mana whakahaere ahua.
I etahi wa, ka hiahia pea koe ki te whakamahi i nga taputapu tawhē, papaa ranei hei hanga i taua tirohanga tino tika e hiahia ana koe. Hei tauira, kua tangohia e padding-top
matou te tapanga whakaurunga reo irirangi kei runga i a matou kia pai ake ai te whakahāngai i te raarangi kuputuhi.
<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>
Te rahinga tapanga puka whakapae
Me mohio ki te whakamahi .col-form-label-sm
, .col-form-label-lg
ki to <label>
s ranei <legend>
ki te whai tika i te rahi o .form-control-lg
me .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>
Rahinga tīwae
Ka rite ki te whakaatu i nga tauira o mua, ka taea e ta maatau punaha matiti te whakauru i nga maha o .col
nga s ki roto i .row
te .form-row
. Ka wehewehea te whanui e waatea ana ki waenga i a raatau. Ka taea ano e koe te kowhiri i tetahi waahanga o o pou kia nui ake, iti ake ranei te mokowā, ko te toenga .col
ka wehewehea te toenga, me nga karaehe pou motuhake penei i te .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>
Rahi-aunoa
Ko te tauira i raro nei e whakamahi ana i te whaipainga flexbox ki te whakakokohu poutū i nga ihirangi me nga huringa .col
kia .col-auto
nui noa atu te mokowhiti i o pou ina hiahiatia. Me korero ano, ko te rahi o te pou i runga ano i nga korero.
<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>
Ka taea e koe te whakakotahi ano i tera me nga karaehe pou motuhake.
<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>
A ko te tikanga kei te tautokohia nga mana puka ritenga .
<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>
Puka Raina
Whakamahia te .form-inline
karaehe ki te whakaatu i te raupapa o nga tapanga, nga mana puka, me nga paatene i runga i te rarangi whakapae kotahi. He rereke te ahua o nga mana o roto i nga puka raina mai i o raatau ahuatanga taunoa.
- Ko nga mana whakahaere
display: flex
, ko te tiango i tetahi mokowā ma HTML me te tuku i a koe ki te whakarato i te mana tīaroaro me nga taputapu mokowā me te pouaka flexbox . - Ka whiwhi nga mana whakahaere me nga roopu whakauru
width: auto
ki te whakakore i te Bootstrap taunoawidth: 100%
. - Ka puta mai nga mana ki roto i nga tauranga tiro he 576px te whanui hei whakaatu mo nga tauranga whaiti i runga i nga taputapu pūkoro.
Ka hiahia pea koe ki te whakatika a-ringa i te whanui me te tirohanga o nga mana puka takitahi me nga taputapu mokowhiti (penei i raro nei). Ka mutu, kia mau tonu te whakauru a <label>
ki ia mana puka, ahakoa me huna e koe mai i nga manuhiri kore-matamata me te .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>
Ka tautokohia nga mana whakahaere me nga kowhiringa ritenga.
<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>
He rereke ki nga tapanga huna
Ko nga hangarau awhina penei i nga kaipanui mata ka raru ki o puka mena kaore koe e whakauru i tetahi tapanga mo ia whakaurunga. Mo enei puka-roto, ka taea e koe te huna i nga tapanga ma te whakamahi i te .sr-only
akomanga. He huarahi ke atu ano mo te whakarato tapanga mo nga hangarau awhina, penei i te aria-label
, huanga aria-labelledby
ranei . title
Mena karekau tetahi o enei, ka taea e nga hangarau awhina te whakamahi i te placeholder
huanga, mena kei reira, engari me mahara ko te whakamahi placeholder
hei whakakapi mo etahi atu tikanga tapanga kaore i te tohutohuhia.
Kupu awhina
Ka taea te hanga kupu awhina taumata-poraka i roto i nga puka ma te whakamahi .form-text
(i mohiotia i mua .help-block
i te v3). Ka taea te whakamahi i nga kupu awhina roraina ma te whakamahi i tetahi huānga HTML roraina me nga karaehe whaipainga penei .text-muted
.
Te hono kupu awhina me nga mana puka
Ko te kupu awhina me tino hono ki te mana puka e pa ana ki te whakamahi i te aria-describedby
huanga. Ma tenei ka whakarite ko nga hangarau awhina—penei i nga kaipanui mata—ka panui i tenei tuhinga awhina ina aro te kaiwhakamahi, ka uru ranei ki te mana whakahaere.
Ko te kupu awhina kei raro i nga whakaurunga ka taea te whakaahua ki te .form-text
. Kei roto i tenei karaehe display: block
me te taapiri i etahi tawhē runga kia ngawari te mokowhiti mai i nga whakaurunga o runga.
<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>
Ka taea e te kuputuhi roraina te whakamahi i tetahi huānga HTML rōraina (ahakoa he <small>
, <span>
, he aha atu ranei) engari he akomanga whaipainga.
<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>
Puka monokia
Taapirihia te disabled
huanga boolean ki runga i te whakaurunga hei aukati i nga taunekeneke a nga kaiwhakamahi me te ahua mama ake.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Tāpirihia te disabled
huanga ki a <fieldset>
hei whakakore i nga mana katoa o roto.
<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>
Whakapae me nga punga
Ka tukuna e nga kaitirotiro nga mana ahua taketake katoa ( <input>
, <select>
, me <button>
nga huānga) i roto i te a <fieldset disabled>
he monokia, ka aukati i te pahekoheko o te papapātuhi me te kiore.
Heoi, mehemea kei roto ano i to puka etahi huānga rite te paatene ritenga penei i te <a ... class="btn btn-*">
, ka hoatu he ahua o pointer-events: none
. I korerohia i roto i te waahanga mo te ahua haua mo nga paatene (me te waahanga iti mo nga huānga punga), kaore ano kia paerewatia tenei taonga CSS, kaore ano kia tino tautokona i roto i te Internet Explorer 10. Ka noho tonu nga mana whakahaere i runga i te punga. te arotahi me te whakahaere ma te whakamahi i te papapātuhi. Me whakarerekē a-ringa i enei mana ma te taapiri tabindex="-1"
kia kore ai e whiwhi arotahi me aria-disabled="disabled"
te tohu i o raatau ahuatanga ki nga hangarau awhina.
Hototahitanga whakawhiti-tirotiro
Ahakoa ka hoatu e Bootstrap enei momo ki nga kaitirotiro katoa, kaore a Internet Explorer 11 me raro iho e tautoko i te disabled
huanga i runga i te <fieldset>
. Whakamahia te JavaScript ritenga hei whakakore i te huinga mara i roto i enei kaitirotiro.
Whakamana
Homai he urupare utu nui, mahi ki o kaiwhakamahi me te whakamana puka HTML5– e waatea ana i o maatau tirotiro tirotiro katoa . Whiriwhiria mai i nga urupare whakamanatanga taunoa o te kaitirotiro, te whakamahi ranei i nga karere ritenga me o maatau karaehe whakauru me te JavaScript timata.
Me pehea te mahi
Anei te mahi whakamana puka me Bootstrap:
- Ko te whakamana puka HTML ka whakamahia ma nga akomanga pseudo e rua a CSS,
:invalid
me te:valid
. Ka pa ki te<input>
,<select>
, me<textarea>
nga huānga. - Ka horahia e Bootstrap nga momo
:invalid
me:valid
nga momo ki te.was-validated
akomanga matua, ka whakamahia ki te<form>
. Ki te kore, ko nga mara e hiahiatia ana kaore he uara ka kitea he muhu i runga i te utaina wharangi. Ma tenei ara, ka taea e koe te whiriwhiri i te wa e whakahohehia ai (i muri i te nganatanga o te tuku puka). - Hei tautuhi i te ahua o te puka (hei tauira, mo te tukunga puka hihiri ma te whakamahi i te AJAX), tangohia te
.was-validated
karaehe mai i te<form>
reanga i muri i te tukunga. - Hei whakamuri, ka whakamahia
.is-invalid
pea.is-valid
nga karaehe hei utu mo nga karaehe pseudo mo te whakamana i te taha tūmau . Kaore e hiahiatia he.was-validated
akomanga matua. - Na nga herenga o te mahi a CSS, kaore e taea e matou (i tenei wa) te whakamahi i nga momo ki tetahi
<label>
ka puta mai i mua i te mana o te puka i roto i te DOM kaore he awhina a JavaScript. - Ko nga kaitirotiro hou katoa e tautoko ana i te API whakamana herenga , he raupapa o nga tikanga JavaScript mo te whakamana i nga mana puka.
- Ka taea e nga karere urupare te whakamahi i nga taunoa o te kaitirotiro (he rereke mo ia kaitirotiro, me te kore e taea te tuhi ma te CSS) me o maatau momo urupare me etahi atu HTML me CSS.
- Ka taea e koe te tuku karere whaimana ritenga ki
setCustomValidity
roto i te JavaScript.
Ma te mahara ki tera, whakaarohia nga whakaaturanga e whai ake nei mo o taatau momo ahua whakamana, nga karaehe taha tuumau, me nga hapa tirotiro.
Nga momo ritenga
Mo nga karere whakamana puka Bootstrap ritenga, me taapiri koe i te novalidate
huanga boolean ki to <form>
. Ka mono tenei i nga aki taputapu urupare taunoa, engari ka uru tonu ki nga API whakamana puka i roto i te JavaScript. Ngana ki te tuku i te puka kei raro nei; ka haukotia e ta maatau JavaScript te paatene tuku me te tuku urupare ki a koe. I te wa e ngana ana ki te tuku, ka kite koe i nga momo :invalid
me :valid
nga momo e pa ana ki o mana puka.
Ka whakamahia e nga momo urupare ritenga nga tae ritenga, nga taitapa, nga momo arotahi, me nga tohu papamuri kia pai ake ai te korero urupare. Ko nga tohu papamuri mo <select>
s kei te waatea noa me te .custom-select
, kaore .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>
Pūtirotiro taunoa
Kaore koe e aro ki nga karere urupare whakamana ritenga, ki te tuhi JavaScript ranei hei whakarereke i nga whanonga puka? He pai katoa, ka taea e koe te whakamahi i nga taunoa pūtirotiro. Whakamātauria te tuku i te puka kei raro nei. I runga i to kaitirotiro me to OS, ka kite koe i te ahua rereke o te urupare.
Ahakoa e kore e taea te whakaahua enei momo urupare ki te CSS, ka taea tonu e koe te whakarite i te tuhinga urupare ma te 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>
Te taha tūmau
Ka tūtohu matou ki te whakamahi i te whakamanatanga taha-kiritaki, engari ki te hiahia koe ki te whakamana i te taha-tumau, ka taea e koe te tohu i nga waahanga puka muhu me te whaimana .is-invalid
me te .is-valid
. Kia mahara kei .invalid-feedback
te tautokohia ano e enei akomanga.
Mō ngā āpure muhu, āta whakarite kei te hono te urupare muhu/karere hapa ki te āpure puka e tika ana mā te whakamahi i te aria-describedby
. Ma tenei huanga ka nui ake i te kotahi id
te tohutoro, mena kua tohu te mara ki etahi atu tuhinga puka.
<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>
Huānga tautoko
E waatea ana nga momo whakamana mo nga mana me nga waahanga e whai ake nei:
<input>
s me<textarea>
s me.form-control
<select>
s me.form-control
ranei.custom-select
.form-check
s.custom-checkbox
s me.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>
Aki taputapu
Mena ka whakaaetia e to tahora puka, ka taea e koe te huri i nga .{valid|invalid}-feedback
karaehe mo .{valid|invalid}-tooltip
nga karaehe ki te whakaatu i nga urupare whakamana i roto i te aki taputapu kua tohua. Me mohio he matua kei position: relative
runga mo te whakatakotoranga taputapu. I roto i te tauira i raro nei, kei a maatau akomanga pou tenei, engari ka hiahia pea to kaupapa ki tetahi atu tatūnga.
<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>
Whakaritea
Ka taea te whakarite i nga ahuatanga whakamana ma Sass me te $form-validation-states
mapi. Kei roto i ta maatau _variables.scss
konae, ka hurihia tenei mapi Sass ki te whakaputa i nga ahuatanga taunoa valid
/ whakamanatanga. invalid
Kei roto ko te mapi kohanga hei whakarite i nga tae me nga tohu o ia kawanatanga. Ahakoa karekau etahi atu whenua e tautokohia ana e nga kaitirotiro, ka taea e te hunga e whakamahi ana i nga momo ritenga te taapiri i nga urupare puka uaua ake.
Kia mahara kaore matou e kii ki te whakarite i enei uara me te kore e whakarereke i te form-validation-state
ranunga.
// 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));
}
Whakamanatanga roopu whakauru
Hei kite he aha nga huānga e hiahia ana ki nga kokonga porotaka i roto i te roopu whakauru me te whakamana, me whai karaehe taapiri tetahi roopu whakauru .has-validation
.
<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>
Puka ritenga
Mo etahi atu whakaritenga me te riterite o te tirotiro tirotiro, whakamahia a maatau huānga puka ritenga hei whakakapi i nga hapa o te tirotiro. He mea hanga ki runga ake o te tohu tohu korero me te waatea, na reira he tino whakakapinga mo tetahi mana puka taunoa.
Pouakataki me nga reo irirangi
Ko ia pouakataki me te reo irirangi <input>
me <label>
te takirua ka takai ki roto <div>
ki te hanga i to maatau mana whakahaere. Ko te hanganga, he rite tonu te huarahi ki ta maatau taunoa .form-check
.
Ka whakamahia e matou te kaiwhiri teina ( ~
) mo o maatau <input>
whenua katoa—penei i a—ki :checked
te hanga tika i to maatau tohu tohu ritenga. Ka honoa ki te .custom-control-label
karaehe, ka taea hoki te whakaahua i te tuhinga mo ia mea i runga i te <input>
ahua o te ahua.
Ka huna e matou te taunoa <input>
me opacity
te whakamahi i te .custom-control-label
hei hanga tohu tohu ahua hou ki tona waahi me ::before
te ::after
. Kia aroha mai, kare e taea e matou te hanga i tetahi ritenga mai i te <input>
mea karekau a CSS content
e mahi ki tera huānga.
I roto i nga ahua kua tohua, ka whakamahia e matou nga tohu SVG kua whakauruhia ki te base64 mai i Open Iconic . Ma tenei ka whai mana pai ki a maatau te whakaahua me te tuunga puta noa i nga kaitirotiro me nga taputapu.
Pouakataki
<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>
Ka taea hoki e nga pouakataki ritenga te whakamahi i te :indeterminate
karaehe pseudo ina tautuhia ma te JavaScript (kaore he huanga HTML e waatea ana hei tohu).
Mena kei te whakamahi koe i te jQuery, penei me penei:
$('.your-checkbox').prop('indeterminate', true)
Nga reo irirangi
<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>
Raina
<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>
Kua haua
Ka taea hoki te whakakore i nga pouakataki me nga reo irirangi. Tāpirihia te disabled
huanga boolean ki te <input>
, ka whakaingoatia te tohu ritenga me te whakaahuatanga tapanga.
<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>
Whakawhiti
Kei roto i te pana te tohu o te pouakataki ritenga engari ka whakamahi i te .custom-switch
karaehe ki te whakaputa i te pana takahuri. Ka tautokohia e nga huringa te disabled
huanga.
<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>
Tīpakohia te tahua
<select>
Ko nga tahua ritenga he karaehe ritenga anake, hei .custom-select
whakaoho i nga momo ritenga. Ko nga momo ritenga e whakawhäitihia ana ki te <select>
ahua tuatahi o te ahua, a kaore e taea te whakarereke i nga <option>
s i runga i nga herenga tirotiro.
<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>
Ka taea hoki e koe te whiriwhiri mai i nga kowhiringa ritenga iti me te rahi kia rite ki o maatau whakaurunga kuputuhi rite te rahi.
<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>
Ka multiple
tautokohia te huanga:
<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>
Ko te size
huanga:
<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>
Awhe
Waihangahia nga <input type="range">
mana ritenga me te .custom-range
. Ko te ara (te papamuri) me te koromatua (te uara) he mea hanga kia rite te ahua puta noa i nga kaitirotiro. I te mea ko IE me Firefox anake te tautoko i te "whakakii" i o raatau ara mai i te taha maui, i te taha matau ranei o te koromatua hei huarahi ki te whakaatu i te ahunga whakamua, kaore matou e tautoko i tenei wa.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Ko nga whakaurunga awhe he uara whakaraerae mo min
te max
- 0
me te 100
, ia. Ka taea e koe te tautuhi i nga uara hou mo te hunga e whakamahi ana i te min
me nga max
huanga.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Ma te taunoa, ka "kapo" nga whakaurunga awhe ki nga uara tauoti. Hei huri i tenei, ka taea e koe te tautuhi i tetahi step
uara. I roto i te tauira i raro nei, ka whakaruaruatia te maha o nga hikoinga ma te whakamahi step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Pūtirotiro kōnae
Ko te whakaurunga o te konae te mea tino pukuriri o te paihere me te hiahia JavaScript taapiri mena ka pirangi koe ki te hono i a raatau ki te mahi Whiriwhiria te konae… me te tuhinga ingoa konae kua tohua.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Ka hunahia e matou te konae taunoa <input>
ma opacity
te ahua o te <label>
. Ka hangaia te paatene me te whakanoho ki te ::after
. Ka mutu, ka whakapuakihia e matou he width
mokowhiti tika mo nga ihirangi huri noa height
.<input>
Te whakamaori, te whakarite ranei i nga aho ki te SCSS
Ka whakamahia :lang()
te karaehe pseudo kia taea ai te whakamaoritanga o te tuhinga "Tirotiro" ki etahi atu reo. Whakakorehia, taapirihia ranei nga urunga ki te $custom-file-text
taurangi Sass me te tohu reo e tika ana me nga aho paetata. Ko nga aho Ingarihi ka taea te whakarite i te ara ano. Hei tauira, me pehea te taapiri i te whakamaoritanga Paniora (Ko te waehere reo Paniora ko es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Anei e lang(es)
mahi ana mo te whakaurunga konae ritenga mo te whakamaoritanga Paniora:
<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>
Me whakarite tika koe i te reo o to tuhinga (te rakau iti ranei) kia tika ai te whakaatu i nga tuhinga tika. Ka taea tenei ma te whakamahi i te lang
huanga i runga i te <html>
huānga, i te Content-Language
pane HTTP ranei , me etahi atu tikanga.
Te whakamaori, te whakarite ranei i nga aho ki te HTML
Ka whakarato hoki a Bootstrap i tetahi huarahi ki te whakamaori i te tuhinga "Tirotiro" ki te HTML me te data-browse
huanga ka taea te taapiri atu ki te tapanga whakauru ritenga (tauira i te reo Tatimana):
<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>