Source

Borang

Contoh dan garis panduan penggunaan untuk gaya kawalan borang, pilihan reka letak dan komponen tersuai untuk mencipta pelbagai bentuk.

Gambaran keseluruhan

Kawalan borang Bootstrap berkembang pada gaya borang Dibut semula kami dengan kelas. Gunakan kelas ini untuk ikut serta dalam paparan tersuai mereka untuk pemaparan yang lebih konsisten merentas penyemak imbas dan peranti.

Pastikan anda menggunakan typeatribut yang sesuai pada semua input (cth, emailuntuk alamat e-mel atau numberuntuk maklumat berangka) untuk memanfaatkan kawalan input yang lebih baharu seperti pengesahan e-mel, pemilihan nombor dan banyak lagi.

Berikut ialah contoh pantas untuk menunjukkan gaya borang Bootstrap. Teruskan membaca untuk mendapatkan dokumentasi tentang kelas yang diperlukan, susun atur borang dan banyak lagi.

Kami tidak akan pernah berkongsi e-mel anda dengan orang lain. 
<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>

Kawalan borang

Kawalan bentuk teks—seperti <input>s, <select>s dan <textarea>s—digayakan dengan .form-controlkelas. Termasuk adalah gaya untuk penampilan umum, keadaan fokus, saiz dan banyak lagi.

Pastikan anda meneroka borang tersuai kami untuk menggayakan lagi <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>

Untuk input fail, tukar .form-controldengan .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>

Saiz

Tetapkan ketinggian menggunakan kelas seperti .form-control-lgdan .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>

Baca sahaja

Tambahkan readonlyatribut boolean pada input untuk mengelakkan pengubahsuaian nilai input. Input baca sahaja kelihatan lebih ringan (sama seperti input yang dilumpuhkan), tetapi mengekalkan kursor standard.

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

Teks biasa baca sahaja

Jika anda ingin mempunyai <input readonly>elemen dalam borang anda digayakan sebagai teks biasa, gunakan .form-control-plaintextkelas untuk mengalih keluar penggayaan medan borang lalai dan mengekalkan jidar dan pelapik yang betul.

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

Tetapkan input julat boleh ditatal secara mendatar menggunakan .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 semak dan radio

Kotak semak dan radio lalai ditambah baik dengan bantuan .form-check, satu kelas untuk kedua-dua jenis input yang menambah baik reka letak dan tingkah laku elemen HTML mereka . Kotak semak adalah untuk memilih satu atau beberapa pilihan dalam senarai, manakala radio adalah untuk memilih satu pilihan daripada banyak.

Kotak semak dan radio yang dilumpuhkan disokong. Atribut disabledakan menggunakan warna yang lebih cerah untuk membantu menunjukkan keadaan input.

Kotak pilihan dan butang radio menyokong pengesahan borang berasaskan HTML dan menyediakan label yang ringkas dan boleh diakses. Oleh itu, <input>s dan <label>s kami adalah unsur adik beradik berbanding dengan <input>dalam a <label>. Ini lebih bertele-tele kerana anda mesti menentukan iddan foratribut untuk mengaitkan <input>dan <label>.

Lalai (bertindan)

Secara lalai, sebarang bilangan kotak pilihan dan radio yang merupakan saudara terdekat akan disusun secara menegak dan dijarakkan dengan .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>

Dalam barisan

Kumpulan kotak semak atau radio pada baris mendatar yang sama dengan menambah .form-check-inlinepada mana-mana .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>

Tanpa label

Tambahkan .position-staticpada input dalam .form-checkyang tidak mempunyai sebarang teks label. Ingat untuk tetap menyediakan beberapa bentuk label untuk teknologi bantuan (contohnya, menggunakan 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>

Susun atur

Memandangkan Bootstrap terpakai display: blockdan width: 100%pada hampir semua kawalan borang kami, secara lalai borang akan disusun secara menegak. Kelas tambahan boleh digunakan untuk mengubah susun atur ini mengikut asas per-bentuk.

Bentuk kumpulan

Kelas .form-groupialah cara termudah untuk menambah beberapa struktur pada borang. Ia menyediakan kelas fleksibel yang menggalakkan pengelompokan label, kawalan, teks bantuan pilihan dan pemesejan pengesahan borang yang betul. Secara lalai ia hanya terpakai margin-bottom, tetapi ia mengambil gaya tambahan .form-inlinemengikut keperluan. Gunakannya dengan <fieldset>s, <div>s atau hampir mana-mana elemen lain.

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

Borang grid

Borang yang lebih kompleks boleh dibina menggunakan kelas grid kami. Gunakan ini untuk reka letak borang yang memerlukan berbilang lajur, lebar yang berbeza-beza dan pilihan penjajaran 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>

Borang baris

Anda juga boleh menukar .rowdengan .form-row, variasi baris grid standard kami yang mengatasi talang lajur lalai untuk susun atur yang lebih ketat dan padat.

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

Reka letak yang lebih kompleks juga boleh dibuat dengan 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 mendatar

Buat borang mendatar dengan grid dengan menambahkan .rowkelas untuk membentuk kumpulan dan menggunakan .col-*-*kelas untuk menentukan lebar label dan kawalan anda. Pastikan anda menambah s .col-form-labelanda <label>juga supaya ia berpusat secara menegak dengan kawalan borang yang berkaitan.

Kadangkala, anda mungkin perlu menggunakan utiliti margin atau padding untuk mencipta penjajaran sempurna yang anda perlukan. Sebagai contoh, kami telah mengalih keluar padding-toplabel input radio bertindan kami untuk menjajarkan garis dasar teks dengan lebih baik.

Radio
Kotak semak 
<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>
Saiz label bentuk mendatar

Pastikan anda menggunakan .col-form-label-smatau .col-form-label-lgke <label>s atau <legend>s anda untuk mengikut saiz .form-control-lgdan .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>

Saiz lajur

Seperti yang ditunjukkan dalam contoh sebelumnya, sistem grid kami membenarkan anda meletakkan sebarang nombor .cols dalam a .rowatau .form-row. Mereka akan membahagikan lebar yang tersedia sama rata antara mereka. Anda juga boleh memilih subset lajur anda untuk menggunakan lebih atau kurang ruang, manakala .cols selebihnya membahagikan yang lain, dengan kelas lajur tertentu seperti .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-saiz

Contoh di bawah menggunakan utiliti flexbox untuk memusatkan kandungan secara menegak dan mengubahnya .colsupaya .col-autolajur anda hanya menggunakan ruang sebanyak yang diperlukan. Dengan kata lain, saiz lajur itu sendiri berdasarkan kandungannya.

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

Anda kemudian boleh mengadun semula itu sekali lagi dengan kelas lajur khusus saiz.

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

Dan sudah tentu kawalan borang tersuai disokong.

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

Borang sebaris

Gunakan .form-inlinekelas untuk memaparkan satu siri label, kawalan borang dan butang pada satu baris mendatar. Kawalan borang dalam borang sebaris berbeza sedikit daripada keadaan lalainya.

  • Kawalan ialah display: flex, meruntuhkan mana-mana ruang putih HTML dan membenarkan anda menyediakan kawalan penjajaran dengan utiliti jarak dan kotak fleksibel .
  • Kumpulan kawalan dan input diterima width: autountuk mengatasi lalai Bootstrap width: 100%.
  • Kawalan hanya kelihatan sebaris dalam port pandangan yang berukuran sekurang-kurangnya 576px lebar untuk mengambil kira port pandangan sempit pada peranti mudah alih.

Anda mungkin perlu menangani secara manual lebar dan penjajaran kawalan borang individu dengan utiliti jarak (seperti ditunjukkan di bawah). Akhir sekali, pastikan anda sentiasa menyertakan a <label>dengan setiap kawalan borang, walaupun anda perlu menyembunyikannya daripada pelawat bukan pembaca skrin dengan .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>

Kawalan dan pilihan borang tersuai juga disokong.

<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 kepada label tersembunyi

Teknologi bantuan seperti pembaca skrin akan menghadapi masalah dengan borang anda jika anda tidak menyertakan label untuk setiap input. Untuk borang sebaris ini, anda boleh menyembunyikan label menggunakan .sr-onlykelas. Terdapat kaedah alternatif selanjutnya untuk menyediakan label untuk teknologi bantuan, seperti aria-label, aria-labelledbyatau titleatribut. Jika tiada satu pun daripada ini hadir, teknologi bantuan boleh menggunakan placeholderatribut, jika ada, tetapi ambil perhatian bahawa penggunaan placeholdersebagai pengganti kaedah pelabelan lain tidak digalakkan.

Teks bantuan

Teks bantuan peringkat blok dalam borang boleh dibuat menggunakan .form-text(sebelum ini dikenali sebagai .help-blockdalam v3). Teks bantuan sebaris boleh dilaksanakan secara fleksibel menggunakan mana-mana elemen HTML sebaris dan kelas utiliti seperti .text-muted.

Mengaitkan teks bantuan dengan kawalan borang

Teks bantuan harus dikaitkan secara eksplisit dengan kawalan borang yang berkaitan dengan penggunaan aria-describedbyatribut. Ini akan memastikan bahawa teknologi bantuan—seperti pembaca skrin—akan mengumumkan teks bantuan ini apabila pengguna memfokus atau memasuki kawalan.

Teks bantuan di bawah input boleh digayakan dengan .form-text. Kelas ini termasuk display: blockdan menambah beberapa margin atas untuk jarak yang mudah daripada input di atas.

Kata laluan anda mestilah 8-20 aksara panjang, mengandungi huruf dan nombor dan tidak boleh mengandungi ruang, aksara khas atau 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>

Teks sebaris boleh menggunakan mana-mana elemen HTML sebaris biasa (sama ada <small>, <span>, atau sesuatu yang lain) dengan tidak lebih daripada kelas utiliti.

Mestilah 8-20 aksara panjang. 
<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>

Borang dilumpuhkan

Tambahkan disabledatribut boolean pada input untuk menghalang interaksi pengguna dan menjadikannya kelihatan lebih ringan.

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

Tambahkan disabledatribut pada a <fieldset>untuk melumpuhkan semua kawalan di dalamnya.

<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>
Kaveat dengan sauh

Secara lalai, penyemak imbas akan menganggap semua kawalan bentuk asli ( <input>, <select>dan <button>elemen) di dalam a <fieldset disabled>sebagai dilumpuhkan, menghalang interaksi papan kekunci dan tetikus padanya. Walau bagaimanapun, jika borang anda juga termasuk <a ... class="btn btn-*">elemen, ini hanya akan diberikan gaya pointer-events: none. Seperti yang dinyatakan dalam bahagian tentang keadaan dilumpuhkan untuk butang (dan khususnya dalam sub-bahagian untuk elemen utama), sifat CSS ini belum lagi diseragamkan dan tidak disokong sepenuhnya dalam Internet Explorer 10 dan tidak akan menghalang pengguna papan kekunci daripada menjadi dapat memfokuskan atau mengaktifkan pautan ini. Jadi untuk selamat, gunakan JavaScript tersuai untuk melumpuhkan pautan tersebut.

Keserasian merentas pelayar

Walaupun Bootstrap akan menggunakan gaya ini dalam semua penyemak imbas, Internet Explorer 11 dan ke bawah tidak menyokong sepenuhnya disabledatribut pada <fieldset>. Gunakan JavaScript tersuai untuk melumpuhkan set medan dalam penyemak imbas ini.

Pengesahan

Berikan maklum balas yang berharga dan boleh diambil tindakan kepada pengguna anda dengan pengesahan borang HTML5– tersedia dalam semua penyemak imbas kami yang disokong . Pilih daripada maklum balas pengesahan lalai penyemak imbas, atau laksanakan mesej tersuai dengan kelas terbina dalam dan JavaScript pemula kami.

Pada masa ini kami mengesyorkan menggunakan gaya pengesahan tersuai, kerana mesej pengesahan lalai penyemak imbas asli tidak terdedah secara konsisten kepada teknologi bantuan dalam semua penyemak imbas (terutamanya, Chrome pada desktop dan mudah alih).

Bagaimana ia berfungsi

Begini cara pengesahan borang berfungsi dengan Bootstrap:

  • Pengesahan borang HTML digunakan melalui dua kelas pseudo CSS :invaliddan :valid. Ia terpakai kepada <input>, <select>, dan <textarea>elemen.
  • Bootstrap merangkumi skop :invaliddan :validgaya kepada kelas induk .was-validated, biasanya digunakan pada <form>. Jika tidak, sebarang medan yang diperlukan tanpa nilai akan dipaparkan sebagai tidak sah pada pemuatan halaman. Dengan cara ini, anda boleh memilih masa untuk mengaktifkannya (biasanya selepas penyerahan borang cuba).
  • Untuk menetapkan semula penampilan borang (contohnya, dalam kes penyerahan borang dinamik menggunakan AJAX), alih keluar .was-validatedkelas daripada <form>sekali lagi selepas penyerahan.
  • Sebagai sandaran, .is-invaliddan .is-validkelas boleh digunakan dan bukannya kelas pseudo untuk pengesahan sisi pelayan . Mereka tidak memerlukan .was-validatedkelas ibu bapa.
  • Disebabkan oleh kekangan dalam cara CSS berfungsi, kami tidak boleh (pada masa ini) menggunakan gaya pada <label>yang datang sebelum kawalan borang dalam DOM tanpa bantuan JavaScript tersuai.
  • Semua penyemak imbas moden menyokong API pengesahan kekangan , satu siri kaedah JavaScript untuk mengesahkan kawalan borang.
  • Mesej maklum balas mungkin menggunakan lalai penyemak imbas (berbeza untuk setiap penyemak imbas, dan tidak boleh digayakan melalui CSS) atau gaya maklum balas tersuai kami dengan HTML dan CSS tambahan.
  • Anda boleh memberikan mesej kesahan tersuai dengan setCustomValiditydalam JavaScript.

Dengan itu, pertimbangkan tunjuk cara berikut untuk gaya pengesahan borang tersuai kami, kelas sisi pelayan pilihan dan lalai penyemak imbas.

Gaya tersuai

Untuk mesej pengesahan borang Bootstrap tersuai, anda perlu menambah novalidateatribut boolean pada <form>. Ini melumpuhkan petua alat maklum balas lalai penyemak imbas, tetapi masih menyediakan akses kepada API pengesahan borang dalam JavaScript. Cuba hantar borang di bawah; JavaScript kami akan memintas butang hantar dan menyampaikan maklum balas kepada anda. Apabila cuba menyerahkan, anda akan melihat gaya :invaliddan :validdigunakan pada kawalan borang anda.

Gaya maklum balas tersuai menggunakan warna tersuai, jidar, gaya fokus dan ikon latar belakang untuk menyampaikan maklum balas dengan lebih baik. Ikon latar belakang untuk <select>s hanya tersedia dengan .custom-select, dan bukan .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" 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>

Penyemak imbas lalai

Tidak berminat dengan mesej maklum balas pengesahan tersuai atau menulis JavaScript untuk menukar tingkah laku borang? Semua baik, anda boleh menggunakan lalai penyemak imbas. Cuba hantar borang di bawah. Bergantung pada penyemak imbas dan OS anda, anda akan melihat gaya maklum balas yang sedikit berbeza.

Walaupun gaya maklum balas ini tidak boleh digayakan dengan CSS, anda masih boleh menyesuaikan teks maklum balas melalui 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>

Bahagian pelayan

Kami mengesyorkan menggunakan pengesahan pihak klien, tetapi sekiranya anda memerlukan pengesahan pihak pelayan, anda boleh menunjukkan medan borang yang tidak sah dan sah dengan .is-invaliddan .is-valid. Ambil perhatian bahawa .invalid-feedbackjuga disokong dengan kelas ini.

Nampak bagus!
Nampak bagus!
@
Sila pilih nama pengguna.
Sila berikan bandar yang sah.
Sila pilih keadaan yang sah.
Sila berikan zip yang sah.
Anda mesti bersetuju sebelum menyerahkan. 
<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>

Elemen yang disokong

Gaya pengesahan tersedia untuk kawalan dan komponen borang berikut:

  • <input>s dan <textarea>s dengan .form-control(termasuk sehingga satu .form-controldalam kumpulan input)
  • <select>s dengan .form-controlatau.custom-select
  • .form-checks
  • .custom-checkboxs dan .custom-radios
  • .custom-file
Sila masukkan mesej dalam kawasan teks.
Contoh teks maklum balas tidak sah
Lagi contoh teks maklum balas tidak sah
Contoh maklum balas pilihan tersuai tidak sah
Contoh maklum balas fail tersuai tidak sah 
<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>

Petua alat

Jika reka letak borang anda membenarkannya, anda boleh menukar .{valid|invalid}-feedbackkelas untuk .{valid|invalid}-tooltipkelas untuk memaparkan maklum balas pengesahan dalam petua alat gaya. Pastikan anda mempunyai ibu bapa position: relativedengannya untuk kedudukan petua alat. Dalam contoh di bawah, kelas lajur kami sudah pun mempunyai ini, tetapi projek anda mungkin memerlukan persediaan alternatif.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select 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" 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>

Menyesuaikan

Keadaan pengesahan boleh disesuaikan melalui Sass dengan $form-validation-statespeta. Terletak dalam _variables.scssfail kami, peta Sass ini digelungkan untuk menjana keadaan lalai valid/ invalidpengesahan. Termasuk ialah peta bersarang untuk menyesuaikan warna dan ikon setiap negeri. Walaupun tiada negeri lain disokong oleh penyemak imbas, mereka yang menggunakan gaya tersuai boleh menambah maklum balas bentuk yang lebih kompleks dengan mudah.

Sila ambil perhatian bahawa kami tidak mengesyorkan menyesuaikan nilai ini tanpa mengubah suai 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));
}

Borang tersuai

Untuk lebih banyak penyesuaian dan ketekalan penyemak imbas silang, gunakan elemen borang tersuai sepenuhnya kami untuk menggantikan lalai penyemak imbas. Ia dibina di atas penanda semantik dan boleh diakses, jadi ia adalah pengganti yang kukuh untuk sebarang kawalan bentuk lalai.

Kotak semak dan radio

Setiap kotak pilihan dan radio <input>serta <label>gandingan dibalut dengan <div>untuk membuat kawalan tersuai kami. Dari segi struktur, ini adalah pendekatan yang sama seperti lalai kami .form-check.

Kami menggunakan pemilih adik-beradik ( ~) untuk semua <input>keadaan kami—seperti :checked—untuk menggayakan penunjuk bentuk tersuai kami dengan betul. Apabila digabungkan dengan .custom-control-labelkelas, kita juga boleh menggayakan teks untuk setiap item berdasarkan keadaan <input>'.

Kami menyembunyikan lalai <input>dengan opacitydan menggunakan .custom-control-labeluntuk membina penunjuk borang tersuai baharu di tempatnya dengan ::beforedan ::after. Malangnya kami tidak boleh membina satu tersuai hanya daripada <input>kerana CSS contenttidak berfungsi pada elemen itu.

Dalam keadaan yang ditandai, kami menggunakan ikon SVG terbenam base64 daripada Open Iconic . Ini memberikan kami kawalan terbaik untuk penggayaan dan kedudukan merentas penyemak imbas dan peranti.

Kotak semak

<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 pilihan tersuai juga boleh menggunakan :indeterminatekelas pseudo apabila ditetapkan secara manual melalui JavaScript (tiada atribut HTML tersedia untuk menentukannya).

Jika anda menggunakan jQuery, sesuatu seperti ini sudah memadai:

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

Radio

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

Dalam barisan

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

Dilumpuhkan

Kotak semak dan radio tersuai juga boleh dilumpuhkan. Tambahkan disabledatribut boolean pada <input>dan penunjuk tersuai serta perihalan label akan digayakan secara automatik.

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

Suis

Suis mempunyai penanda kotak semak tersuai tetapi menggunakan .custom-switchkelas untuk menghasilkan suis togol. Suis juga menyokong disabledatribut.

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

Pilih menu

Menu tersuai <select>hanya memerlukan kelas tersuai, .custom-selectuntuk mencetuskan gaya tersuai. Gaya tersuai terhad kepada <select>penampilan awal 's dan tidak boleh mengubah suai ' <option>s kerana had penyemak imbas.

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

Anda juga boleh memilih daripada pilihan tersuai kecil dan besar untuk memadankan input teks bersaiz serupa kami.

<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 multiplejuga disokong:

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

Seperti sizesifatnya:

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

Julat

<input type="range">Buat kawalan tersuai dengan .custom-range. Lagu (latar belakang) dan ibu jari (nilai) kedua-duanya digayakan untuk kelihatan sama merentas pelayar. Memandangkan hanya IE dan Firefox menyokong "mengisi" trek mereka dari kiri atau kanan ibu jari sebagai cara untuk menunjukkan kemajuan secara visual, kami tidak menyokongnya pada masa ini.

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

Input julat mempunyai nilai tersirat untuk mindan max— 0dan 100, masing-masing. Anda boleh menentukan nilai baharu untuk mereka yang menggunakan atribut mindan .max

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

Secara lalai, julat input "snap" kepada nilai integer. Untuk menukar ini, anda boleh menentukan stepnilai. Dalam contoh di bawah, kami menggandakan bilangan langkah dengan menggunakan step="0.5".

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

pelayar fail

Pemalam yang disyorkan untuk menghidupkan input fail tersuai: bs-custom-file-input , itulah yang kami gunakan pada masa ini di sini dalam dokumen kami.

Input fail adalah yang paling jelek daripada kumpulan itu dan memerlukan JavaScript tambahan jika anda ingin menyambungkannya dengan Pilih fail yang berfungsi… dan teks nama fail yang dipilih.

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

Kami menyembunyikan fail lalai <input>melalui opacitydan sebaliknya menggayakan <label>. Butang dijana dan diletakkan dengan ::after. Akhir sekali, kami mengisytiharkan a widthdan heightpada <input>untuk jarak yang sesuai untuk kandungan sekitar.

Menterjemah atau menyesuaikan rentetan dengan SCSS

Kelas :lang()pseudo digunakan untuk membenarkan terjemahan teks "Semak imbas" ke dalam bahasa lain. Ganti atau tambah entri pada $custom-file-textpembolehubah Sass dengan teg bahasa yang berkaitan dan rentetan setempat. Rentetan bahasa Inggeris boleh disesuaikan dengan cara yang sama. Sebagai contoh, berikut ialah cara seseorang boleh menambah terjemahan bahasa Sepanyol (kod bahasa Sepanyol ialah es):

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

Berikut adalah lang(es)tindakan pada input fail tersuai untuk terjemahan bahasa Sepanyol:

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

Anda perlu menetapkan bahasa dokumen anda (atau subpokoknya) dengan betul agar teks yang betul dapat ditunjukkan. Ini boleh dilakukan menggunakan atributlang pada elemen<html> atau Content-Languagepengepala HTTP , antara kaedah lain.

Menterjemah atau menyesuaikan rentetan dengan HTML

Bootstrap juga menyediakan cara untuk menterjemah teks "Semak imbas" dalam HTML dengan data-browseatribut yang boleh ditambahkan pada label input tersuai (contoh dalam bahasa Belanda):

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