Source

Mga porma

Mga panig-ingnan ug mga giya sa paggamit alang sa mga istilo sa pagkontrol sa porma, mga kapilian sa layout, ug naandan nga mga sangkap alang sa paghimo og daghang lainlain nga porma.

Overview

Ang mga kontrol sa porma sa Bootstrap nagpalapad sa among Gi-reboot nga mga istilo sa porma nga adunay mga klase. Gamita kini nga mga klase aron makapili sa ilang gipahiangay nga mga pasundayag alang sa mas makanunayon nga paghubad sa mga browser ug aparato.

Siguruha nga mogamit usa ka angay typenga kinaiya sa tanan nga mga input (pananglitan, emailalang sa email address o numberalang sa numerical nga impormasyon) aron mapahimuslan ang mas bag-ong mga kontrol sa input sama sa pag-verify sa email, pagpili sa numero, ug uban pa.

Ania ang usa ka dali nga pananglitan aron ipakita ang mga istilo sa porma sa Bootstrap. Padayon sa pagbasa alang sa dokumentasyon sa gikinahanglan nga mga klase, porma layout, ug uban pa.

Dili namo ipaambit ang imong email sa uban. 
<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>

Mga kontrol sa porma

Ang mga kontrol sa porma sa teksto—sama <input>sa s, <select>s, ug <textarea>s—gi-istilo sa .form-controlklase. Apil ang mga estilo alang sa kinatibuk-ang panagway, kahimtang sa pagtutok, gidak-on, ug uban pa.

Siguruha nga susihon ang among naandan nga mga porma aron madugangan ang istilo <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Para sa mga input sa file, ibaylo ang .form-controlpara sa .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Pagsukod

Itakda ang mga gitas-on gamit ang mga klase sama sa .form-control-lgug .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>

Basaha ra

Idugang ang readonlyboolean nga attribute sa usa ka input aron malikayan ang pagbag-o sa bili sa input. Ang read-only inputs makita nga mas gaan (sama sa mga disabled inputs), apan ipabilin ang standard cursor.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Basaha lamang nga yano nga teksto

Kung gusto nimo nga adunay <input readonly>mga elemento sa imong porma nga gi-istilo ingon yano nga teksto, gamita ang .form-control-plaintextklase aron tangtangon ang default nga pag-istilo sa field sa porma ug ipreserba ang husto nga margin ug padding.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 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>

Range Inputs

Itakda ang horizontally scrollable range inputs gamit ang .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Mga checkbox ug radyo

Ang mga default nga checkbox ug radyo gipaayo sa tabang sa .form-check, usa ka klase alang sa duha ka tipo sa input nga nagpauswag sa layout ug pamatasan sa ilang mga elemento sa HTML . Ang mga checkbox kay para sa pagpili og usa o ubay-ubay nga mga opsyon sa usa ka lista, samtang ang mga radyo para sa pagpili og usa ka opsyon gikan sa daghan.

Gisuportahan ang mga disabled nga checkbox ug radyo, apan aron makahatag ug not-allowedcursor sa hover sa ginikanan <label>, kinahanglan nimong idugang ang disabledattribute sa .form-check-input. Ang disabled nga hiyas mag-aplay og mas gaan nga kolor aron makatabang sa pagpakita sa kahimtang sa input.

Ang mga checkbox ug mga radio nga gigamit kay gihimo para suportahan ang HTML-based form validation ug maghatag ug mugbo, accessible nga mga label. Sa ingon, ang atong <input>s ug <label>s kay managsuon nga elemento sukwahi sa <input>sulod sa <label>. Kini mao ang gamay nga mas verbose ingon nga kamo kinahanglan gayud nga espesipiko idug formga hiyas sa pag-asoy sa <input>ug <label>.

Default (stacked)

Sa kasagaran, ang bisan unsang gidaghanon sa mga checkbox ug radyo nga igsoon diha-diha dayon ibutang nga patindog ug haom nga ibutang sa .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline

Grupo ang mga checkbox o radyo sa parehas nga pinahigda nga laray pinaagi sa pagdugang .form-check-inlinesa bisan unsang .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>

Walay mga label

Idugang .position-staticsa mga input sa sulod .form-checknga walay bisan unsang label nga teksto. Hinumdumi nga maghatag gihapon og pipila ka matang sa label para sa mga teknolohiya nga makatabang (pananglitan, gamit ang aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Layout

Tungod kay ang Bootstrap magamit display: blockug width: 100%sa halos tanan namong mga kontrol sa porma, ang mga porma pinaagi sa default stack nga patindog. Ang dugang nga mga klase mahimong magamit aron usbon kini nga layout sa per-form nga basehan.

Pagporma og mga grupo

Ang .form-groupklase mao ang pinakasayon ​​nga paagi sa pagdugang sa pipila ka istruktura sa mga porma. Naghatag kini usa ka flexible nga klase nga nagdasig sa husto nga paggrupo sa mga label, kontrol, opsyonal nga teksto sa tabang, ug pagporma sa pag-validate sa mensahe. Sa kasagaran kini magamit lamang margin-bottom, apan kini mokuha og dugang nga mga estilo .form-inlinekon gikinahanglan. Gamita kini sa <fieldset>s, <div>s, o halos bisan unsang elemento.

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

Porma nga grid

Ang mas komplikado nga mga porma mahimong matukod gamit ang among mga klase sa grid. Gamita kini alang sa mga porma nga layout nga nanginahanglan daghang mga kolum, lainlain nga gilapdon, ug dugang nga mga kapilian sa pag-align.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Porma nga laray

Mahimo ka usab nga magbaylo .rowog .form-row, usa ka kalainan sa among standard nga grid row nga nag-override sa default nga column gutters alang sa mas hugot ug mas compact nga mga layout.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Ang mas komplikado nga mga layout mahimo usab nga mahimo gamit ang grid system.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" 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>

Horizontal nga porma

Paghimo og pinahigda nga mga porma nga adunay grid pinaagi sa pagdugang sa .rowklase aron maporma ang mga grupo ug gamit ang mga .col-*-*klase aron itakda ang gilapdon sa imong mga label ug kontrol. Siguruha nga idugang .col-form-labelusab ang imong <label>mga s aron kini patindog nga nakasentro sa ilang kauban nga mga kontrol sa porma.

Usahay, kinahanglan nimo nga gamiton ang mga gamit sa margin o padding aron mahimo ang hingpit nga pag-align nga kinahanglan nimo. Pananglitan, gitangtang namo ang padding-toplabel sa among stacked radio inputs aron mas maayo nga i-align ang text baseline.

Mga radyo
Checkbox 
<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>
Horizontal nga porma nga pagsukod sa label

Siguroha nga gamiton .col-form-label-smo .col-form-label-lgsa imong <label>s o <legend>s sa husto nga pagsunod sa gidak-on sa .form-control-lgug .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>

Pagsukod sa kolum

Sama sa gipakita sa miaging mga pananglitan, ang among grid system nagtugot kanimo sa pagbutang sa bisan unsang gidaghanon sa .cols sulod sa usa .rowo .form-row. Gibahin nila ang magamit nga gilapdon nga parehas sa taliwala nila. Mahimo ka usab nga magpili usa ka subset sa imong mga kolum aron makakuha og daghang o gamay nga espasyo, samtang ang nahabilin nga .cols parehas nga gibahin ang nahabilin, nga adunay piho nga mga klase sa kolum sama sa .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing

Ang panig-ingnan sa ubos naggamit sa usa ka flexbox utility aron patindog nga isentro ang mga sulud ug mga pagbag .col- o .col-autoaron ang imong mga kolum makakuha ra ug daghang espasyo kung gikinahanglan. Sa laing paagi, ang mga gidak-on sa kolum mismo base sa mga sulod.

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

Mahimo nimong i-remix kana pag-usab sa mga klase sa kolum nga piho sa gidak-on.

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

Ug siyempre gisuportahan ang naandan nga mga kontrol sa porma .

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

Inline nga mga porma

Gamita ang .form-inlineklase sa pagpakita og serye sa mga label, mga kontrol sa porma, ug mga buton sa usa ka pinahigda nga laray. Ang mga kontrol sa porma sulod sa inline nga mga porma magkalahi gamay gikan sa ilang mga default nga estado.

  • Ang mga kontrol mao ang display: flex, pag-collapse sa bisan unsa nga HTML nga puti nga luna ug nagtugot kanimo sa paghatag og alignment nga kontrol uban sa spacing ug flexbox utilities.
  • Ang mga kontrol ug input nga mga grupo makadawat width: autoaron ma-override ang Bootstrap default width: 100%.
  • Ang mga kontrol makita lang nga inline sa mga viewport nga labing menos 576px ang gilapdon aron i-account ang pig-ot nga viewport sa mga mobile device.

Mahimong kinahanglan nimo nga mano-mano nga sulbaron ang gilapdon ug pag-align sa indibidwal nga mga kontrol sa porma nga adunay mga gamit sa gilay-on (sama sa gipakita sa ubos). Katapusan, siguruha nga kanunay iapil ang usa <label>sa matag kontrol sa porma, bisan kung kinahanglan nimo itago kini gikan sa mga bisita nga dili screenreader nga adunay .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>

Gisuportahan usab ang mga kontrol ug pagpili sa custom nga porma.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Mga alternatibo sa tinago nga mga label

Ang mga tabang nga teknolohiya sama sa screen readers magkaproblema sa imong mga porma kung dili ka mag-apil og label sa matag input. Alang niining mga inline nga porma, mahimo nimong tagoan ang mga label gamit ang .sr-onlyklase. Adunay dugang nga alternatibong mga pamaagi sa paghatag og label para sa mga teknolohiya sa pagtabang, sama sa aria-label, aria-labelledbyo titleattribute. Kung walay bisan usa niini, ang mga teknolohiya sa pagtabang mahimong mogamit sa placeholderhiyas, kung naa, apan timan-i nga ang paggamit placeholderingon usa ka puli sa ubang mga pamaagi sa pag-label wala gitambagan.

Tabang text

Ang block-level nga tabang nga teksto sa mga porma mahimong mabuhat gamit ang .form-text(nailhan kaniadto nga .help-blocksa v3). Ang inline nga tabang nga teksto mahimong dali nga ipatuman gamit ang bisan unsang inline nga elemento sa HTML ug mga klase sa utility sama sa .text-muted.

Pag-asoy sa tabang nga teksto sa mga kontrol sa porma

Ang teksto sa tabang kinahanglan nga klaro nga adunay kalabotan sa pagkontrol sa porma nga adunay kalabotan sa paggamit sa aria-describedbyhiyas. Kini magsiguro nga ang mga teknolohiya nga makatabang—sama sa mga tigbasa sa screen—mopahibalo niini nga teksto sa tabang kung ang tiggamit mag-focus o mosulod sa kontrol.

Ang tabang nga teksto sa ubos sa mga input mahimong i-istilo sa .form-text. Kini nga klase naglakip display: blockug nagdugang pipila ka taas nga margin alang sa dali nga gilay-on gikan sa mga input sa ibabaw.

Ang imong password kinahanglan nga 8-20 ka karakter ang gitas-on, adunay mga letra ug numero, ug kinahanglan dili adunay mga espasyo, espesyal nga karakter, o emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Ang inline nga teksto mahimong mogamit sa bisan unsang tipikal nga inline nga HTML nga elemento (bisan kini usa ka <small>, <span>, o uban pa) nga wala’y labaw sa usa ka klase sa utility.

Kinahanglang 8-20 ka karakter ang gitas-on. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Mga disabled nga porma

Idugang ang disabledboolean nga attribute sa usa ka input aron mapugngan ang mga interaksyon sa user ug himoon kini nga mas gaan.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Idugang ang disabledhiyas sa usa <fieldset>aron ma-disable ang tanang kontrol sa sulod.

<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>
Caveat nga adunay mga angkla

Sa kasagaran, ang mga browser motratar sa tanang lumad nga mga kontrol sa porma ( <input>, <select>ug <button>mga elemento) sulod sa a <fieldset disabled>ingon nga disabled, nga magpugong sa keyboard ug mouse nga interaksyon niini. Bisan pa, kung ang imong porma naglakip usab sa <a ... class="btn btn-*">mga elemento, kini hatagan lamang usa ka istilo sa pointer-events: none. Ingon sa nahibal-an sa seksyon bahin sa disabled nga estado alang sa mga buton (ug labi na sa sub-section alang sa mga elemento sa angkla), kini nga CSS nga propyedad wala pa gi-standardize ug dili hingpit nga gisuportahan sa Internet Explorer 10, ug dili makapugong sa mga tiggamit sa keyboard nga mahimong. makahimo sa pag-focus o pagpaaktibo niini nga mga link. Busa aron luwas, gamita ang custom JavaScript aron ma-disable ang maong mga link.

Pagkaangay sa cross-browser

Samtang ang Bootstrap magamit kini nga mga istilo sa tanan nga mga browser, ang Internet Explorer 11 ug sa ubos dili hingpit nga nagsuporta sa disabledhiyas sa usa ka <fieldset>. Gamita ang custom JavaScript aron ma-disable ang fieldset niini nga mga browser.

Pagpamatuod

Paghatag og bililhon, maaksiyonan nga feedback sa imong mga user nga adunay HTML5 nga pag-validate sa porma– anaa sa tanan namong gisuportahan nga mga browser . Pagpili gikan sa default nga feedback sa pag-validate sa browser, o ipatuman ang naandan nga mga mensahe sa among mga built-in nga klase ug starter JavaScript.

Sa pagkakaron among girekomendar ang paggamit sa custom nga mga estilo sa pag-validate, tungod kay ang lumad nga browser default nga mga mensahe sa validation dili kanunay nga na-expose sa mga assistive technologies sa tanang browser (labi na, Chrome sa desktop ug mobile).

Giunsa kini paglihok

Ania kung giunsa ang pag-validate sa porma sa Bootstrap:

  • Ang pag-validate sa porma sa HTML gipadapat pinaagi sa duha ka pseudo-classes sa CSS, :invalidug :valid. Kini magamit sa <input>, <select>, ug <textarea>mga elemento.
  • Gisangkapan sa Bootstrap ang :invalidug :validmga istilo sa .was-validatedklase sa ginikanan, nga sagad gigamit sa <form>. Kung dili, ang bisan unsang gikinahanglan nga field nga walay bili makita nga dili balido sa pagkarga sa panid. Niining paagiha, mahimo nimong pilion kung kanus-a kini i-aktibo (kasagaran pagkahuman gisulayan ang pagsumite sa porma).
  • Aron i-reset ang dagway sa porma (pananglitan, sa kaso sa dinamikong mga pagsumiter sa porma gamit ang AJAX), kuhaa ang .was-validatedklase gikan sa <form>pag-usab human sa pagsumite.
  • Isip usa ka fallback, .is-invalidug .is-validang mga klase mahimong gamiton imbes nga ang pseudo-classes para sa server side validation . Wala sila magkinahanglan og .was-validatedklase sa ginikanan.
  • Tungod sa mga pagpugong kung giunsa paglihok ang CSS, dili kami (sa pagkakaron) magamit ang mga istilo sa usa <label>nga moabut sa wala pa ang kontrol sa porma sa DOM nga wala’y tabang sa naandan nga JavaScript.
  • Gisuportahan sa tanang modernong browser ang constraint validation API , usa ka serye sa mga pamaagi sa JavaScript alang sa pag-validate sa mga kontrol sa porma.
  • Ang mga mensahe sa feedback mahimong mogamit sa mga default sa browser (lahi alang sa matag browser, ug dili ma-estilo pinaagi sa CSS) o ang among naandan nga mga istilo sa feedback nga adunay dugang nga HTML ug CSS.
  • Mahimo kang maghatag ug custom validity nga mga mensahe setCustomValiditysa JavaScript.

Uban niana sa hunahuna, hunahunaa ang mga mosunud nga demo para sa among naandan nga mga istilo sa pag-validate sa porma, opsyonal nga mga klase sa kilid sa server, ug mga default sa browser.

Pasadya nga mga istilo

Para sa custom Bootstrap form validation nga mga mensahe, kinahanglan nimong idugang ang novalidateboolean attribute sa imong <form>. Gi-disable niini ang browser default feedback tooltips, apan naghatag gihapon og access sa form validation API sa JavaScript. Sulayi nga isumite ang porma sa ubos; ang among JavaScript makapugong sa isumite nga butones ug i-relay ang feedback kanimo. Kung mosulay sa pagsumite, imong makita ang :invalidug :validmga istilo nga gipadapat sa imong mga kontrol sa porma.

Ang mga istilo sa pasadya nga feedback nag-aplay sa naandan nga mga kolor, mga utlanan, mga istilo sa pagtutok, ug mga icon sa background aron mas maayo nga makigsulti sa feedback. Ang mga icon sa background para <select>sa s anaa lamang sa .custom-select, ug dili .form-control.

Nindot tan-awon!
Nindot tan-awon!
@
Palihug pagpili ug username.
Palihug paghatag ug balido nga siyudad.
Palihug paghatag ug balido nga estado.
Palihug paghatag ug balido nga 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>

Mga default sa browser

Dili interesado sa kostumbre nga mga mensahe sa feedback sa validation o pagsulat sa JavaScript aron mabag-o ang mga pamatasan sa porma? Ang tanan maayo, mahimo nimong gamiton ang mga default sa browser. Sulayi ang pagsumite sa porma sa ubos. Depende sa imong browser ug OS, makakita ka og gamay nga lahi nga istilo sa feedback.

Samtang kini nga mga istilo sa feedback dili mahimong istilo sa CSS, mahimo gihapon nimo ipasibo ang teksto sa feedback pinaagi sa 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>

kilid sa server

Among girekomendar ang paggamit sa client-side validation, apan kon gikinahanglan nimo ang server-side validation, mahimo nimong ipaila ang dili balido ug balido nga mga field sa porma nga adunay .is-invalidug .is-valid. Timan-i nga .invalid-feedbackgisuportahan usab kini nga mga klase.

Nindot tan-awon!
Nindot tan-awon!
@
Palihug pagpili ug username.
Palihug paghatag ug balido nga siyudad.
Palihug paghatag ug balido nga estado.
Palihug paghatag ug balido nga zip.
Kinahanglan nga mouyon ka sa dili pa mosumite. 
<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>

Gisuportahan nga mga elemento

Ang among mga pananglitan nga mga porma nagpakita sa lumad nga teksto <input>sa ibabaw, apan ang mga estilo sa pag-validate sa porma anaa usab alang sa <textarea>s ug custom nga mga kontrol sa porma.

Palihug pagsulod ug mensahe sa textarea.
Pananglitan dili balido nga teksto sa feedback
Dugang nga pananglitan dili balido nga teksto sa feedback
Pananglitan dili balido nga custom nga pagpili nga feedback
Pananglitan dili balido nga feedback sa custom file 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="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>

Mga tooltip

Kung gitugotan kini sa imong layout sa porma, mahimo nimong ibaylo ang mga .{valid|invalid}-feedbackklase alang sa .{valid|invalid}-tooltipmga klase aron ipakita ang feedback sa pag-validate sa usa ka istilo nga tooltip. Siguruha nga adunay usa ka ginikanan nga position: relativenaa niini alang sa pagposisyon sa tooltip. Sa pananglitan sa ubos, ang among mga klase sa kolum aduna na niini, apan ang imong proyekto mahimong magkinahanglan og alternatibong setup.

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>

Pasadya nga mga porma

Alang sa labi pa nga pag-customize ug pagkamakanunayon sa cross browser, gamita ang among hingpit nga naandan nga mga elemento sa porma aron ilisan ang mga default sa browser. Gitukod sila sa ibabaw sa semantic ug accessible nga markup, mao nga sila lig-on nga mga kapuli sa bisan unsang default nga kontrol sa porma.

Mga checkbox ug radyo

Ang matag checkbox ug radyo <input>ug <label>pagpares giputos sa usa <div>aron mahimo ang among naandan nga kontrol. Sa istruktura, parehas kini nga pamaagi sa among default .form-check.

Among gigamit ang sibling selector ( ~) para sa tanan namong <input>estado—sama :checked—sa hustong paagi sa pag-istilo sa among custom nga indikasyon sa porma. Kung gihiusa sa .custom-control-labelklase, mahimo usab namon nga i-istilo ang teksto alang sa matag aytem base sa <input>estado sa 's.

Among gitago ang default <input>gamit opacityang ug gigamit ang .custom-control-labelsa paghimo og bag-ong indikasyon sa custom nga porma sa dapit niini nga adunay ::beforeug ::after. Ikasubo nga dili kami makahimo og usa ka kostumbre gikan lamang sa <input>tungod kay ang CSS contentdili molihok sa kana nga elemento.

Sa gisusi nga mga estado, gigamit namo ang base64 nga naka-embed nga SVG nga mga icon gikan sa Open Iconic . Naghatag kini kanamo sa labing kaayo nga kontrol alang sa pag-istilo ug pagposisyon sa mga browser ug aparato.

Mga checkbox

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

Ang mga custom nga checkbox mahimo usab nga mogamit sa :indeterminatepseudo class kung mano-mano nga gitakda pinaagi sa JavaScript (walay magamit nga HTML attribute para sa pagtino niini).

Kung naggamit ka og jQuery, ang usa ka butang nga sama niini igo na:

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

Mga radyo

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inline

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

Nabaldado

Ang mga custom nga checkbox ug radyo mahimo usab nga ma-disable. Idugang ang disabledboolean attribute sa <input>ug ang custom indicator ug label nga deskripsyon awtomatik nga i-istilo.

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

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

Mga switch

Ang usa ka switch adunay marka sa usa ka custom nga checkbox apan naggamit sa .custom-switchklase sa paghimo sa usa ka toggle switch. Gisuportahan usab sa mga switch ang disabledattribute.

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

Pilia ang menu

Ang mga custom <select>nga menu nagkinahanglan lamang ug custom nga klase, .custom-selectaron ma-trigger ang custom nga mga estilo. Gilimitahan ang mga custom nga istilo <select>sa una nga hitsura ug dili mabag-o ang <option>s tungod sa mga limitasyon sa browser.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Mahimo ka usab nga mopili gikan sa gagmay ug dagkong mga gipili nga kostumbre aron ipares ang among parehas nga kadako nga mga input sa teksto.

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

Gisuportahan multipleusab ang attribute:

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

Sama sa sizekinaiya:

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

Sakop

Paghimo og custom nga <input type="range">mga kontrol gamit ang .custom-range. Ang track (ang background) ug thumb (ang bili) pareho nga gi-istilo aron makita nga parehas sa mga browser. Ingon nga ang IE ug Firefox ra ang nagsuporta sa "pagpuno" sa ilang track gikan sa wala o tuo sa kumagko isip usa ka paagi aron makita ang pag-uswag, wala kami karon nagsuporta niini.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Ang mga input sa range adunay implicit nga mga kantidad alang sa minug max— 0ug 100, matag usa. Mahimo nimong itakda ang bag-ong mga kantidad alang sa mga naggamit sa minug mga maxhiyas.

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

Sa kasagaran, ang mga input sa range "snap" sa mga integer nga kantidad. Aron mabag-o kini, mahimo nimong itakda ang usa ka stepkantidad. Sa pananglitan sa ubos, gidoble namo ang gidaghanon sa mga lakang pinaagi sa paggamit sa step="0.5".

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

File browser

Ang girekomendar nga plugin aron ma-animate ang custom file input: bs-custom-file-input , mao kana ang among gigamit karon dinhi sa among mga doc.

Ang pag-input sa file mao ang labing katingad-an sa hugpong ug nanginahanglan dugang nga JavaScript kung gusto nimo i-hook up kini gamit ang gamit nga Pilia ang file… ug gipili nga teksto sa ngalan sa file.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Among gitago ang default nga file <input>pinaagi sa opacityug sa baylo i-istilo ang <label>. Ang buton gihimo ug gipahimutang sa ::after. Katapusan, among gideklarar ang usa ka widthug heightsa <input>para sa hustong gilay-on alang sa naglibot nga sulod.

Paghubad o pag-customize sa mga string gamit ang SCSS

Ang :lang()pseudo-class gigamit sa pagtugot sa paghubad sa "Browse" nga teksto ngadto sa ubang mga pinulongan. I-override o idugang ang mga entry sa $custom-file-textvariable sa Sass nga adunay tag nga lengguwahe ug gi-localize nga mga string. Ang English nga mga kuwerdas mahimong ipasibo sa samang paagi. Pananglitan, ania kung giunsa ang pagdugang usa ka paghubad sa Kinatsila (ang code sa pinulongang Espanyol mao ang es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Ania ang lang(es)aksyon sa custom file input para sa Spanish translation:

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

Kinahanglan nimo nga itakda ang lengguwahe sa imong dokumento (o subtree niini) sa husto aron mapakita ang husto nga teksto. Mahimo kini gamit ang langattribute sa <html>elemento o ang Content-LanguageHTTP header , ug uban pang mga pamaagi.

Paghubad o pag-customize sa mga string gamit ang HTML

Naghatag usab ang Bootstrap og paagi sa paghubad sa "Browse" nga teksto sa HTML nga adunay data-browseattribute nga mahimong idugang sa custom input label (pananglitan sa Dutch):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>