Source

Bentuk

Conto sareng tungtunan pamakean pikeun gaya kontrol formulir, pilihan perenah, sareng komponén khusus pikeun nyiptakeun rupa-rupa bentuk.

Ihtisar

Kadali formulir Bootstrap ngalegaan gaya formulir Rebooted kami sareng kelas. Anggo kelas ieu pikeun milih kana tampilan anu disaluyukeun pikeun rendering anu langkung konsisten dina panyungsi sareng alat.

Pastikeun ngagunakeun typeatribut anu pas dina sadaya input (contona, emailkanggo alamat email atanapi numberkanggo inpormasi numerik) pikeun ngamangpaatkeun kadali input anu langkung énggal sapertos verifikasi email, pilihan nomer, sareng seueur deui.

Ieu conto gancang pikeun nunjukkeun gaya formulir Bootstrap. Tetep maca pikeun dokuméntasi ngeunaan kelas anu diperyogikeun, perenah formulir, sareng seueur deui.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Kadali formulir

Kadali bentuk tékstual—sapertos <input>s, <select>s, sareng <textarea>s—digayakeun sareng .form-controlkelas. Kaasup gaya pikeun penampilan umum, kaayaan fokus, ukuran, sareng seueur deui.

Pastikeun pikeun ngajalajah bentuk custom kami pikeun gaya salajengna <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>

Pikeun input file, gentos .form-controlkana .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>

Ukuran

Atur jangkung ngagunakeun kelas kawas .form-control-lgna .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>

Maca wungkul

Tambahkeun readonlyatribut boolean dina input pikeun nyegah modifikasi tina nilai input. Input ngan ukur dibaca sigana langkung hampang (sapertos input anu ditumpurkeun), tapi tetep kursor standar.

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

téks polos wungkul baca

Upami anjeun hoyong unsur- <input readonly>unsur dina bentuk anjeun ditataan salaku téks polos, paké .form-control-plaintextkelas pikeun ngaleungitkeun gaya médan formulir standar sareng ngawétkeun margin sareng padding anu leres.

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

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Input rentang

Setel input rentang anu tiasa digulung sacara horisontal nganggo .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>

Kotak centang jeung radio

Kotak centang standar sareng radio dironjatkeun kalayan bantosan .form-check, kelas tunggal pikeun duanana jinis input anu ningkatkeun tata perenah sareng paripolah elemen HTML na . Kotak centang kanggo milih hiji atanapi sababaraha pilihan dina daptar, sedengkeun radio kanggo milih hiji pilihan tina seueur.

Kotak centang sareng radio ditumpurkeun dirojong. Atribut disabledbakal nerapkeun warna anu langkung hampang pikeun ngabantosan kaayaan input.

Kotak centang jeung tombol radio ngarojong validasi formulir dumasar HTML jeung nyadiakeun singket, labél diaksés. Sapertos kitu, <input>s sareng <label>s urang mangrupikeun unsur duduluran sabalikna tina <input>jeroeun a <label>. Ieu rada leuwih verbose anjeun kudu nangtukeun idjeung foratribut pakait jeung <input>jeung <label>.

Default (tumpuk)

Sacara standar, sajumlah kotak centang sareng radio anu janten dulur saharita bakal ditumpuk sacara vertikal sareng dipasihkeun sacara pas sareng .form-check.

Kotak centang standar

Kotak centang ditumpurkeun

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

Radio standar

Radio standar kadua

radio ditumpurkeun

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

Baris

Grup kotak centang atawa radio dina baris horizontal sarua ku nambahkeun .form-check-inlinekana sagala .form-check.

3 (cacad)

<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 (cacad)

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

Tanpa labél

Tambihkeun .position-statickana input dina .form-checkanu henteu ngagaduhan téks labél. Inget pikeun tetep nyadiakeun sababaraha bentuk labél pikeun téknologi pitulung (contona, ngagunakeun 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>

Tata perenah

Kusabab Bootstrap lumaku display: blockjeung width: 100%ampir sakabéh kadali formulir urang, formulir bakal sacara standar tumpukan vertikal. kelas tambahan bisa dipaké pikeun rupa-rupa perenah ieu dina dasar per-formulir.

Ngabentuk grup

Kelas .form-groupmangrupikeun cara anu paling gampang pikeun nambihan sababaraha struktur kana bentuk. Eta nyadiakeun kelas fléksibel nu nyorong grup ditangtoskeun tina labél, kadali, téks pitulung pilihan, sarta olahtalatah validasi formulir. Sacara standar eta ngan lumaku margin-bottom, tapi nyokot gaya tambahan dina .form-inlinesakumaha diperlukeun. Paké eta kalawan <fieldset>s, <div>s, atawa ampir sagala elemen séjén.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Ngabentuk grid

Bentuk anu langkung kompleks tiasa diwangun nganggo kelas grid kami. Paké ieu pikeun perenah formulir anu merlukeun sababaraha kolom, lebar variatif, sarta pilihan alignment tambahan.

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

Ngabentuk baris

Anjeun oge bisa ngaganti .rowpikeun .form-row, variasi baris grid baku urang nu overrides talang kolom standar pikeun layouts tighter tur leuwih kompak.

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

Layout anu langkung kompleks ogé tiasa didamel nganggo sistem grid.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Bentuk horisontal

Jieun formulir horizontal kalawan grid ku nambahkeun .rowkelas pikeun ngabentuk grup sarta ngagunakeun .col-*-*kelas pikeun nangtukeun lebar labél jeung kadali Anjeun. Pastikeun pikeun nambahkeun .col-form-labelkana s Anjeun <label>ogé ngarah nuju vertikal dipuseurkeun jeung kontrol formulir pakait maranéhanana.

Kadang-kadang, anjeun panginten kedah nganggo utilitas margin atanapi padding pikeun nyiptakeun alignment anu sampurna anu anjeun peryogikeun. Salaku conto, kami parantos ngahapus padding-toplabél input radio anu ditumpuk pikeun nyaluyukeun garis dasar téks.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <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>

Ukuran labél formulir horisontal

Pastikeun anjeun nganggo .col-form-label-smatanapi .col-form-label-lgka anjeun <label>atanapi ka anjeun <legend>pikeun leres nuturkeun ukuran .form-control-lgsareng .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>

Ukuran kolom

Ditémbongkeun saperti dina conto saméméhna, sistem grid kami ngidinan Anjeun pikeun nempatkeun sagala angka .cols dina hiji .rowatawa .form-row. Aranjeunna bakal ngabagi lebar anu sayogi di antara aranjeunna. Anjeun ogé tiasa milih sawaréh kolom anjeun pikeun nyandak langkung seueur atanapi kirang rohangan, sedengkeun sésa-sésa .colngabagi sésana, kalayan kelas kolom khusus sapertos .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>

Ukuran otomatis

Conto di handap ngagunakeun utilitas flexbox pikeun vertikal puseur eusi na robah .coljadi .col-autoyén kolom anjeun ukur nyokot up saloba spasi sakumaha diperlukeun. Nempatkeun cara sejen, ukuran kolom sorangan dumasar kana eusi.

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

Anjeun teras tiasa remix éta sakali deui sareng kelas kolom ukuran-spésifik.

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

Sarta tangtu kadali formulir custom dirojong.

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

Bentuk inline

Paké .form-inlinekelas pikeun mintonkeun runtuyan labél, kontrol formulir, sarta tombol dina baris horizontal tunggal. Kadali formulir dina formulir inline rada béda ti kaayaan standarna.

Kontrol nyaéta display: flex, ngancurkeun rohangan bodas HTML sareng ngamungkinkeun anjeun nyayogikeun kontrol alignment sareng utilitas jarak sareng flexbox .
Kadali sareng grup input nampi width: autopikeun nimpa standar Bootstrap width: 100%.
Kadali ngan muncul inline dina viewports nu lega sahenteuna 576px pikeun akun pikeun viewports sempit dina alat nu bagerak.

Anjeun bisa jadi kudu sacara manual alamat lebar tur alignment kontrol formulir individu kalawan utilitas spasi (sakumaha ditémbongkeun di handap). Anu pamungkas, pastikeun pikeun salawasna kaasup a <label>kalawan unggal kontrol formulir, malah lamun kudu nyumputkeun eta ti datang non-screenreader kalawan .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>

Kadali bentuk khusus sareng pilihan ogé dirojong.

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

Alternatif pikeun labél disumputkeun

Téknologi anu ngabantosan sapertos pamiarsa layar bakal gaduh masalah sareng formulir anjeun upami anjeun henteu ngalebetkeun labél pikeun unggal input. Pikeun bentuk inline ieu, anjeun tiasa nyumputkeun labél nganggo .sr-onlykelas. Aya deui metode alternatif pikeun nyayogikeun labél pikeun téknologi pitulung, sapertos aria-label, aria-labelledbyatanapi titleatribut. Upami teu aya ieu, téknologi pitulung tiasa nganggo placeholderatribut, upami aya, tapi perhatikeun yén panggunaan placeholdersalaku gaganti pikeun metode panyiri sanés henteu disarankeun.

Pitulung téks

Téks pitulung tingkat blok dina formulir bisa dijieun maké .form-text(saméméhna katelah .help-blockdina v3). Téks pitulung inline tiasa dilaksanakeun sacara fleksibel nganggo unsur HTML inline sareng kelas utiliti sapertos .text-muted.

Ngaitkeun téks pitulung sareng kadali formulir

Pitulung téks kudu eksplisit pakait sareng kontrol formulir eta relates to make aria-describedbyatribut. Ieu bakal mastikeun yén téknologi pitulung-sapertos pamiarsa layar-bakal ngumumkeun téks pitulung ieu nalika pangguna museurkeun atanapi ngalebetkeun kadali.

Pitulung téks di handap inputs bisa styled kalawan .form-text. Kelas ieu kalebet display: blocksareng nambihan sababaraha margin luhur pikeun jarak anu gampang tina input di luhur.

Sandi Sandi anjeun kedah panjangna 8-20 karakter, ngandung hurup sareng angka, sareng henteu kedah ngandung spasi, karakter khusus, atanapi 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>

Téks inline tiasa nganggo unsur HTML inline naon waé (naha éta <small>, <span>, atanapi anu sanés) kalayan henteu langkung ti kelas utiliti.

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

Bentuk ditumpurkeun

Tambihkeun disabledatribut boolean dina input pikeun nyegah interaksi pangguna sareng ngajantenkeun langkung hampang.

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

Tambahkeun disabledatribut ka a <fieldset>nganonaktipkeun sakabeh kadali dina.

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

Sacara standar, panyungsi bakal ngubaran sagala kadali formulir asli ( <input>, <select>sarta <button>elemen) di jero a <fieldset disabled>salaku ditumpurkeun, nyegah duanana keyboard jeung interaksi mouse on aranjeunna. Sanajan kitu, lamun formulir Anjeun ogé ngawengku <a ... class="btn btn-*">elemen, ieu ngan bakal dibéré gaya pointer-events: none. Salaku nyatet dina bagian ngeunaan kaayaan ditumpurkeun pikeun tombol (sarta husus dina sub-bagian pikeun elemen jangkar), sipat CSS ieu teu acan standarisasi tur teu dirojong sapinuhna dina Internet Explorer 10, sarta moal nyegah pamaké keyboard pikeun jadi. tiasa museurkeun atanapi ngaktipkeun tautan ieu. Janten aman, paké JavaScript khusus pikeun nganonaktipkeun tautan sapertos kitu.

Kasaluyuan cross-browser

Samentara Bootstrap bakal nerapkeun gaya ieu dina sadaya panyungsi, Internet Explorer 11 sareng di handap henteu ngadukung sapinuhna disabledatribut dina <fieldset>. Anggo JavaScript khusus pikeun nganonaktipkeun set lapangan dina panyungsi ieu.

Validasi

Nyadiakeun eupan balik anu berharga jeung bisa dipilampah ka pamaké anjeun kalawan validasi formulir HTML5– sadia dina sakabéh panyungsi anu dirojong ku kami . Pilih tina eupan balik validasi standar browser, atanapi laksanakeun pesen khusus sareng kelas anu diwangun sareng JavaScript ngamimitian.

Ayeuna kami nyarankeun ngagunakeun gaya validasi khusus, sabab seratan validasi standar browser asli henteu terus-terusan kakeunaan téknologi pitulung dina sadaya panyungsi (pangpangna, Chrome dina desktop sareng mobile).

Kumaha gawéna

Ieu kumaha validasi formulir tiasa dianggo sareng Bootstrap:

Validasi formulir HTML diterapkeun via dua kelas pseudo CSS, :invalidsareng :valid. Ieu lumaku pikeun <input>, <select>, sarta <textarea>elemen.
Bootstrap wengkuan :invalidsareng :validgaya ka kelas indungna .was-validated, biasana dilarapkeun kana <form>. Upami teu kitu, widang naon waé anu dibutuhkeun tanpa niléy némbongan sah dina beban halaman. Ku cara ieu, anjeun tiasa milih iraha ngaktipkeunana (biasana saatos kiriman formulir dicoba).
Pikeun ngareset penampilan formulir (contona, dina kasus kiriman formulir dinamis maké AJAX), cabut .was-validatedkelas ti <form>deui sanggeus kaluman.
Salaku fallback a, .is-invalidsarta .is-validkelas bisa dipaké gaganti pseudo-kelas pikeun validasi sisi server . Aranjeunna teu merlukeun .was-validatedkelas indungna.
Kusabab konstrain dina cara CSS jalan, urang teu bisa (ayeuna) nerapkeun gaya ka <label>nu asalna saméméh kontrol formulir di DOM tanpa bantuan custom JavaScript.
Sadaya panyungsi modéren ngarojong API validasi konstrain , runtuyan métode JavaScript pikeun ngavalidasi kontrol formulir.
Talatah eupan balik bisa ngagunakeun standar browser (béda pikeun tiap browser, sarta unstylable via CSS) atawa gaya eupan balik custom kami kalawan tambahan HTML jeung CSS.
Anjeun tiasa nyayogikeun pesen validitas khusus setCustomValiditydina JavaScript.

Kalayan émut éta, pertimbangkeun demo di handap ieu pikeun gaya validasi formulir khusus urang, kelas sisi server opsional, sareng standar browser.

gaya custom

Pikeun pesen validasi formulir Bootstrap khusus, anjeun kedah nambihan novalidateatribut boolean kana file <form>. Ieu nganonaktipkeun tip alat umpan balik standar browser, tapi tetep nyayogikeun aksés kana API validasi formulir dina JavaScript. Coba kirimkeun formulir di handap; JavaScript urang bakal intercept tombol kirimkeun jeung relay eupan balik ka anjeun. Nalika nyobian ngalebetkeun, anjeun bakal ningali gaya :invalidsareng :validgaya anu diterapkeun kana kadali formulir anjeun.

Gaya eupan balik khusus nerapkeun warna khusus, wates, gaya fokus, sareng ikon latar pikeun komunikasi anu langkung saé. Ikon latar pikeun <select>s ngan sadia kalawan .custom-select, sarta henteu .form-control.

Nami payun

Looks good!

Nami pengker

Looks good!

Ngaran pamaké

Please choose a username.

Kota

Please provide a valid city.

Nagara

Please select a valid state.

Zip

Please provide a valid zip.

Satuju kana sarat jeung kaayaan

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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Panyungsi standar

Teu kabetot dina pesen eupan balik validasi custom atawa nulis JavaScript pikeun ngarobah kabiasaan formulir? Sadayana saé, anjeun tiasa nganggo standar browser. Coba kirimkeun formulir di handap. Gumantung kana browser sareng OS anjeun, anjeun bakal ningali gaya eupan balik anu rada béda.

Bari gaya eupan balik ieu teu bisa gaya kalawan CSS, anjeun masih bisa ngaluyukeun téks eupan balik ngaliwatan 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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Sisi server

Kami ngarékoméndasikeun nganggo validasi sisi klien, tapi upami anjeun peryogi validasi sisi server, anjeun tiasa nunjukkeun widang formulir anu teu valid sareng valid .is-invalidsareng .is-valid. Catet yén .invalid-feedbackogé dirojong ku kelas ieu.

Nami payun

Sigana alus!

Nami pengker

Sigana alus!

Ngaran pamaké

Mangga pilih ngaran pamaké.

Kota

Mangga nyadiakeun kota valid.

Nagara

Mangga pilih kaayaan valid.

Zip

Mangga nyadiakeun zip valid.

Satuju kana sarat jeung kaayaan

Anjeun kedah satuju sateuacan ngirim.

<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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" 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>

Unsur dirojong

Gaya validasi sayogi pikeun kadali formulir sareng komponén ieu:

<input>s jeung <textarea>s kalawan .form-control(kaasup nepi ka hiji .form-controldina grup input)
<select>s kalawan .form-controlatawa.custom-select
.form-checks
.custom-checkboxs jeung .custom-radios
.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>

Tooltips

Upami perenah formulir anjeun ngamungkinkeun, anjeun tiasa ngagentos .{valid|invalid}-feedbackkelas pikeun .{valid|invalid}-tooltipkelas pikeun ningalikeun eupan balik validasi dina tooltip gaya. Pastikeun gaduh indungna sareng position: relativeéta pikeun posisi tooltip. Dina conto di handap, kelas kolom kami geus boga ieu, tapi proyék anjeun bisa merlukeun hiji setelan alternatif.

Nami payun

Nami pengker

Ngaran pamaké

Kota

Nagara

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" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Nyaluyukeun

Kaayaan validasi tiasa disaluyukeun via Sass sareng $form-validation-statespeta. Tempatna dina _variables.scssfile kami, peta Sass ieu digulung pikeun ngahasilkeun kaayaan standar valid/ invalidvalidasi. Kaasup peta nested pikeun ngaropéa warna jeung ikon unggal kaayaan urang. Sanaos henteu aya nagara sanés anu dirojong ku panyungsi, anu nganggo gaya khusus tiasa gampang nambihan eupan balik bentuk anu langkung kompleks.

Punten dicatet yén kami henteu nyarankeun ngarobih nilai ieu tanpa ogé ngarobih form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

formulir custom

Pikeun langkung kustomisasi sareng konsistensi panyungsi silang, paké elemen formulir khusus kami pikeun ngagentos standar browser. Éta diwangun dina luhureun markup semantik sareng tiasa diaksés, janten aranjeunna gaganti padet pikeun kontrol formulir standar.

Kotak centang jeung radio

Unggal kotak centang jeung radio <input>jeung <label>papasangan dibungkus dina hiji <div>nyieun kontrol custom urang. Sacara stuktur, ieu pendekatan anu sami sareng standar urang .form-check.

Urang make pamilih duduluran ( ~) pikeun sakabéh <input>nagara bagian urang-kawas - :checkedmun leres gaya indikator formulir custom urang. Lamun digabungkeun jeung .custom-control-labelkelas, urang ogé bisa gaya téks pikeun tiap item dumasar kana kaayaan <input>'s.

Kami nyumputkeun standar <input>sareng opacitynganggo .custom-control-labelpikeun ngawangun indikator bentuk khusus anyar dina tempatna ::beforesareng ::after. Hanjakal urang teu bisa ngawangun hiji custom ti ngan <input>sabab CSS urang contentteu dianggo dina unsur éta.

Dina kaayaan dipariksa, kami nganggo base64 embedded ikon SVG ti Open Iconic . Ieu nyadiakeun kami kadali pangalusna pikeun styling jeung posisi sakuliah browser jeung alat.

Kotak centang

Pariksa kotak centang custom ieu

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

Kotak centang custom ogé bisa ngagunakeun :indeterminatekelas pseudo lamun diatur sacara manual via JavaScript (teu aya atribut HTML sadia pikeun nangtukeun eta).

Pariksa kotak centang custom ieu

Upami anjeun nganggo jQuery, hal sapertos kieu kedah cekap:

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

Radio-radio

Togél radio khusus ieu

Atawa togél ieu radio custom séjén

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

Baris

Togél radio khusus ieu

Atawa togél ieu radio custom séjén

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

ditumpurkeun

Kotak centang khusus sareng radio ogé tiasa ditumpurkeun. Tambihkeun disabledatribut boolean kana <input>sareng indikator khusus sareng déskripsi labél bakal otomatis digayakeun.

Pariksa kotak centang custom ieu

Togél radio khusus ieu

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

Saklar

A switch boga markup tina kotak centang custom tapi ngagunakeun .custom-switchkelas pikeun ngajadikeun switch toggle. Saklar ogé ngarojong disabledatribut.

Toggle elemen switch ieu

Unsur switch ditumpurkeun

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

ménu custom <select>perlu ngan hiji kelas custom, .custom-selectpikeun memicu gaya custom. gaya custom dugi ka <select>penampilan awal 's sarta teu bisa ngaropéa <option>s alatan watesan 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>

Anjeun ogé tiasa milih tina pilihan khusus leutik sareng ageung pikeun cocog sareng input téks ukuran anu sami.

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

Atribut multipleieu ogé dirojong:

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

Salaku sizeatribut:

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

Rentang

Jieun <input type="range">kadali custom kalawan .custom-range. Lagu (kasang tukang) sareng jempol (nilai) duanana ditata supados sami dina panyungsi. Kusabab ngan ukur IE sareng Firefox anu ngadukung "ngeusian" laguna ti kénca atanapi katuhu jempol minangka sarana pikeun nunjukkeun kamajuan sacara visual, ayeuna urang henteu ngadukung éta.

Rentang conto

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

Input rentang gaduh nilai implisit pikeun minsareng max- 0sareng 100, masing-masing. Anjeun tiasa netepkeun nilai anyar pikeun anu nganggo atribut minsareng .max

Rentang conto

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

Sacara standar, rentang inputs "snap" kana nilai integer. Pikeun ngarobah ieu, anjeun bisa nangtukeun stepnilai a. Dina conto di handap, urang gandakeun jumlah léngkah ku ngagunakeun step="0.5".

Rentang conto

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

File browser

Plugin anu disarankeun pikeun ngahirupkeun input file khusus: bs-custom-file-input , éta anu kami anggo ayeuna di dieu dina dokumén kami.

Input file mangrupikeun kebat anu paling pikasieuneun sareng ngabutuhkeun JavaScript tambahan upami anjeun hoyong ngaitkeunana sareng fungsional Pilih file… sareng téks nami file anu dipilih.

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

Urang nyumputkeun file standar <input>via opacityna gantina gaya <label>. Tombol dihasilkeun sarta diposisikan kalawan ::after. Panungtungan, urang ngadéklarasikeun a widthna heighton <input>pikeun spasi ditangtoskeun pikeun eusi sabudeureun.

Narjamahkeun atawa ngaropéa senar kalawan SCSS

Kelas :lang()pseudo digunakeun pikeun ngidinan pikeun narjamahkeun téks "Browse" kana basa séjén. Override atanapi tambahkeun éntri kana variabel Sass sareng tag basa$custom-file-text anu relevan sareng senar anu dilokalkeun. Senar Inggris tiasa disaluyukeun ku cara anu sami. Contona, ieu kumaha carana nambahkeun tarjamah Spanyol (kode basa Spanyol nyaéta ):es

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

Ieu lang(es)tindakan dina input file khusus pikeun tarjamahan Spanyol:

Pilih Arsip

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

Anjeun kedah nyetél basa dokumén anjeun (atanapi subtree) leres supados téks anu leres tiasa ditingalikeun. Ieu tiasa dilakukeun nganggo atribut langdina unsur <html>atanapi Content-Languagelulugu HTTP , diantara metode anu sanés.

Narjamahkeun atanapi nyaluyukeun senar nganggo HTML

Bootstrap ogé nyadiakeun cara pikeun narjamahkeun téks "Browse" dina HTML jeung data-browseatribut nu bisa ditambahkeun kana labél input custom (conto dina basa Walanda):

Tingali dokumen toe

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

Bentuk

Ihtisar

Kadali formulir

Ukuran

Maca wungkul

téks polos wungkul baca

Input rentang

Kotak centang jeung radio

Default (tumpuk)

Baris

Tanpa labél

Tata perenah

Ngabentuk grup

Ngabentuk grid

Ngabentuk baris

Bentuk horisontal

Ukuran labél formulir horisontal

Ukuran kolom

Ukuran otomatis

Bentuk inline

Alternatif pikeun labél disumputkeun

Pitulung téks

Ngaitkeun téks pitulung sareng kadali formulir

Bentuk ditumpurkeun

Caveat kalawan jangkar

Kasaluyuan cross-browser

Validasi

Kumaha gawéna

gaya custom

Panyungsi standar

Sisi server

Unsur dirojong

Tooltips

Nyaluyukeun

formulir custom

Kotak centang jeung radio

Kotak centang

Radio-radio

Baris

ditumpurkeun

Saklar

Pilih menu

Rentang

File browser

Narjamahkeun atawa ngaropéa senar kalawan SCSS

Narjamahkeun atanapi nyaluyukeun senar nganggo HTML