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

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

Kei te tautokohia nga pouakataki haua me nga reo irirangi, engari hei whakarato i te not-allowedpehu i runga i te whakaparo o te matua <label>, me taapiri koe i te disabledhuanga ki te .form-check-input. Ko te huanga haua ka hoatu he tae mama ake 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.

Pouakataki taunoa

Pouakataki monokia

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

reo irirangi taunoa

Irirangi taunoa tuarua

Irirangi haua

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

3 (kua haua)

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

3 (kua haua)

<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 hoki 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 kikii 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.

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

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

<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 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 whakakore 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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </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. I korerohia 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, kaore 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).

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, :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 (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.

Ingoa tuatahi

Looks good!

Ingoa whakamutunga

Looks good!

Ingoa Kaiwhakamahi

Please choose a username.

Taone

Please provide a valid city.

State

Please provide a valid state.

Zip

Please provide a valid zip.

Whakaae ki nga tikanga me nga tikanga

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 taha tūmau, 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 akomanga.

Ingoa tuatahi

He pai te ahua!

Ingoa whakamutunga

He pai te ahua!

Ingoa Kaiwhakamahi

Kōwhiri koa he ingoa kaiwhakamahi.

Taone

Tena koa homai he taone whaimana.

State

Tena koa homai he ahua whaimana.

Zip

Homai koa he kōtui whaimana.

Whakaae ki nga tikanga me nga tikanga

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

Ko o maatau tauira puka e whakaatu ana i nga tuhinga taketake <input>i runga ake nei, engari e waatea ana nga momo whakamana puka mo o maatau mana whakahaere puka ritenga.

<form class="was-validated">
  <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 ki te 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 atu tatūnga.

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

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 ka takai ki te <div>me tetahi teina <span>ki te hanga i to maatau mana whakahaere me te <label>mo te tuhinga e whai ake nei. 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

Takina tenei pouakataki ritenga

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

Takina tenei pouakataki ritenga

Mena kei te whakamahi koe i te jQuery, penei me penei:

$('.your-checkbox').prop('indeterminate', true)

Nga reo irirangi

Takahurihia tenei reo irirangi ritenga

Takahurihia ranei tenei atu reo irirangi ritenga

<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

Takahurihia tenei reo irirangi ritenga

Takahurihia ranei tenei atu reo irirangi ritenga

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

Takina tenei pouakataki ritenga

Takahurihia tenei reo irirangi ritenga

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

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

Awhe tauira

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

Awhe tauira

<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 stepuara. I roto i te tauira i raro nei, ka whakaruaruatia te maha o nga hikoinga ma te whakamahi step="0.5".

Awhe tauira

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

Kōwhiri kōnae

<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

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:

Whiriwhiri Archivo

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

Puka

Tirohanga

Puka mana whakahaere

Te rahinga

Panui anake

Panui anake te kuputuhi tokau

Nga Whakauru Awhe

Pouakataki me nga reo irirangi

Taunoa (tāpae)

Raina

Karekau he tapanga

Tahora

Whakaritehia nga roopu

Matiti puka

Puka rarangi

Puka whakapae

Te rahinga tapanga puka whakapae

Rahinga tīwae

Rahi-aunoa

Puka Raina

He rereke ki nga tapanga huna

Kupu awhina

Te hono kupu awhina me nga mana puka

Puka monokia

Whakapae me nga punga

Hototahitanga whakawhiti-tirotiro

Whakamana

Me pehea te mahi

Nga momo ritenga

Pūtirotiro taunoa

Te taha tūmau

Huānga tautoko

Aki taputapu

Puka ritenga

Pouakataki me nga reo irirangi

Pouakataki

Nga reo irirangi

Raina

Kua haua

Tīpakohia te tahua

Awhe

Pūtirotiro kōnae

Te whakamaori, te whakarite ranei i nga aho