Source

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 a maatau momo ahua kua Whakahoutia me nga karaehe. Whakamahia enei karaehe ki te whakauru ki o raatau whakaaturanga kia rite tonu te ahua puta noa i nga kaitirotiro me nga taputapu.

Kia mohio koe ki te whakamahi i tetahi typehuanga e tika ana mo nga whakaurunga katoa (hei tauira, emailmo te wahitau imeera, numbermo 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.

E kore matou e tohatoha i to imeera ki tetahi atu. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </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-controlkaraehe. 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-controlmo .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-lgme 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 readonlyhuanga 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-plaintextkaraehe 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" placeholder="Password">
    </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 disabledhoatu he tae mama ake te huanga hei tohu i te ahua o te whakaurunga.

Ka hangaia nga pouakataki me nga reo irirangi hei tautoko i te whakamanatanga o te puka HTML me te whakarato i nga 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 idme nga forhuanga 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-inlineki 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-staticki nga whakaurunga kei roto karekau .form-checkhe kupu tapanga. Kia mahara ki te whakarato tonu i etahi momo tapanga 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: blockme 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-groupkaraehe 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-inlineina 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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 .rowmo .form-rowte , 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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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 .rowkaraehe 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-labelki 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-topmatou te tapanga whakaurunga reo irirangi kei runga i a matou kia pai ake ai te whakahāngai i te raarangi kuputuhi.

Nga reo irirangi
Pouakataki 
<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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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-lgki to <label>s ranei <legend>ki te whai tika i te rahi o .form-control-lgme .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 .colnga s ki roto i .rowte .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 .colka 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 .colkia .col-autonui 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-inlinekaraehe 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: autoki te whakakore i te Bootstrap taunoa width: 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 kaipanui-kore 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-onlyakomanga. He huarahi ke atu ano mo te whakarato tapanga mo nga hangarau awhina, penei i te aria-label, huanga aria-labelledbyranei . titleMena karekau tetahi o enei, ka taea e nga hangarau awhina te whakamahi i te placeholderhuanga, mena kei reira, engari me mahara ko te whakamahi placeholderhei 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-blocki 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-describedbyhuanga. 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: blockme te taapiri i etahi tawhē runga kia ngawari te mokowhiti mai i nga whakaurunga o runga.

Me 8-20 te roa o to kupuhipa, kei roto nga reta me nga nama, me kaua e whai waahi, tohu motuhake, emoji ranei. 
<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.

Me 8-20 pūāhua te roa. 
<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

Tāpirihia te disabledhuanga 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 disabledhuanga ki a <fieldset>hei mono i nga mana katoa o roto.

<form>
  <fieldset disabled>
    <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

Ma te taunoa, ka whakatauhia e nga kaitirotiro nga mana ahua taketake katoa ( <input>, <select>me <button>nga huānga) i roto i te he <fieldset disabled>kua monokia, ka aukati i nga taunekeneke papapātuhi me te kiore ki runga. Heoi, mena kei roto ano i to ahua nga <a ... class="btn btn-*">huānga, ka hoatu he momo pointer-events: none. Ka rite ki te korero i roto i te waahanga mo te ahua haua mo nga paatene (me te waahanga iti mo nga huānga punga), ko tenei taonga CSS kaore ano kia whakatauritehia, kaore ano kia tino tautokona i roto i te Internet Explorer 10, kare hoki e aukati i nga kaiwhakamahi papapātuhi. ka taea te arotahi, te whakahohe ranei i enei hononga. Na kia noho haumaru, whakamahia JavaScript ritenga ki te whakakore i aua hononga.

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 disabledhuanga 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.

I tenei wa ka tūtohu matou ki te whakamahi i nga momo whakamanatanga ritenga, i te mea karekau nga karere whakamanatanga taunoa o te kaitirotiro taketake e puta ki nga hangarau awhina i roto i nga kaitirotiro katoa (te nuinga, ko Chrome i runga i te papamahi me te pūkoro).

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, :invalidme te :valid. Ka pa ki te <input>, <select>, me <textarea>nga huānga.
  • Ka horahia e Bootstrap nga momo :invalidme :validnga momo ki te .was-validatedakomanga 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 (te nuinga 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-validatedkaraehe mai i te <form>reanga i muri i te tukunga.
  • Hei whakamuri, ka whakamahia .is-invalidpea .is-validnga karaehe hei utu mo nga karaehe pseudo mo te whakamana i te taha tūmau . Kaore e hiahiatia he .was-validatedakomanga 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 setCustomValidityroto 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 novalidatehuanga 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 :invalidme :validnga 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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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-invalidme te .is-valid. Kia mahara kei .invalid-feedbackte tautokohia ano e enei karaehe.

He pai te ahua!
He pai te ahua!
@
Kōwhiri koa he ingoa kaiwhakamahi.
Tena koa homai he taone whaimana.
Tena koa homai he ahua whaimana.
Homai koa he kōtui whaimana.
Me whakaae koe i mua i te tuku. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

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(tae atu ki te kotahi .form-controli roto i nga roopu whakauru)
  • <select>s me .form-selectranei.custom-select
  • .form-checks
  • .custom-checkboxs me .custom-radios
  • .custom-file
Tuhia koa he karere ki te rohe kuputuhi.
He tauira kuputuhi urupare muhu
Ētahi atu tauira kuputuhi urupare muhu
He tauira urupare whiriwhiri ritenga muhu
He tauira urupare mo te konae ritenga muhu 
<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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</form>

Aki taputapu

Mena ka whakaaetia e to tahora puka, ka taea e koe te huri i nga .{valid|invalid}-feedbackkaraehe mo .{valid|invalid}-tooltipnga karaehe hei whakaatu i nga urupare whakamana i roto i te aki taputapu kua tohua. Me mohio he matua kei position: relativerunga 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 tatūnga rereke.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" 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-statesmapi. Kei roto i ta maatau _variables.scsskonae, ka hurihia tenei mapi Sass ki te whakaputa i nga ahuatanga taunoa valid/ whakamanatanga. invalidKei 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-stateranunga.

// 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));
}

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 :checkedte hanga tika i to maatau tohu tohu ritenga. Ka honoa ki te .custom-control-labelkaraehe, 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 opacityte whakamahi i te .custom-control-labelhei hanga tohu tohu ahua hou ki tona waahi me ::beforete ::after. Kia aroha mai, kare e taea e matou te hanga i tetahi ritenga mai i te <input>mea karekau a CSS contente 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 :indeterminatekaraehe 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="customRadioInline1" 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="customRadioInline1" 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 disabledhuanga 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-switchkaraehe ki te whakaputa i te pana takahuri. Ka tautokohia e nga huringa te disabledhuanga.

<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-selectwhakaoho 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 multipletautokohia 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 sizehuanga:

<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 minte max- 0me te 100, ia. Ka taea e koe te tautuhi i nga uara hou mo te hunga e whakamahi ana i te minme nga maxhuanga.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Ma te taunoa, ka "hopu" nga whakaurunga awhe ki nga uara tauoti. Hei huri i tenei, ka taea e koe te tautuhi i tetahi stepuara. 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 monomai e taunakitia ana hei whakakorikori i te whakaurunga konae ritenga: bs-custom-file-input , koinei te mea e whakamahia ana e matou i konei i roto i o maatau tuhinga.

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 opacityte ahua o te <label>. Ka hangaia te paatene me te whakanoho ki te ::after. Ka mutu, ka whakapuakihia e matou he widthmokowhiti 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-texttaurangi 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 langhuanga i runga i te <html>huānga, i te Content-Languagepane 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-browsehuanga 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>