Kontrol formulir yang didukung oleh bootstrap adalah sebagai berikut:
Bootstrap mendukung kontrol formulir yang paling umum, terutama input, textarea, kotak centang, radio dan pilih.
Kotak input
Bidang teks bentuk yang paling umum adalah input kotak input. Pengguna dapat memasukkan sebagian besar data formulir yang diperlukan di dalamnya. Bootstrap menyediakan dukungan untuk semua jenis input HTML5 asli, termasuk: teks, kata sandi, datetime, datetime-lokal, tanggal, bulan, waktu, minggu, nomor, email, url, pencarian, tel, dan warna. Deklarasi tipe yang sesuai diperlukan sehingga input dapat sepenuhnya ditata.
<! Doctype html> <html> <head> <title> bootstrap instance - kotak input </iteme> <tautan rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3. src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.min.js"> </script "> </scrips src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> </ptript> </head> <body> <form role = "form"> <div> <label untuk = "name"> Tag </label> <input type = "teks" Teks " input "> </div> </form> </body> </html>
Hasilnya adalah sebagai berikut:
TexTarea
Ketika Anda perlu membuat beberapa baris input, Anda dapat menggunakan kotak teks TextArea. Properti baris dapat diubah jika perlu.
<! Doctype html> <html> <head> <title> Bootstrap Instance - kotak teks </iteme> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3.0/csss/bootstrap src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.min.js"> </script "> </scrips src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> </cript> </head> <body> <bentuk role = "form"> <label untuk = "nama"> kotak teks </label> <textarea baris = "3"> </pextarea> </div> </form> </body> </html>
Hasilnya adalah sebagai berikut:
Kotak centang ((kotak centang) dan kotak radio (radio)
Kotak centang dan tombol radio digunakan untuk memungkinkan pengguna memilih dari serangkaian opsi preset.
Saat membuat formulir, gunakan kotak centang jika Anda ingin pengguna memilih beberapa opsi dari daftar. Jika Anda membatasi pengguna dari memilih hanya satu opsi, gunakan radio.
Gunakan .CheckBox-Inline atau .Radio-Inline kelas untuk serangkaian kotak centang dan kotak radio untuk mengontrolnya untuk muncul di baris yang sama.
Contoh berikut menunjukkan kedua jenis ini (default dan inline):
<! Doctype html> <html> <head> <title> instance bootstrap - centang kotak dan tombol radio </iteme> <tautan rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3.0/css/call src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.min.js"> </script "> </scrips src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> </script> </head> <body> <label for = "name"> Opsi centang/"Tombol centang"> </label> <Div> <Label> <Input Type = " 1</label></div><div><label><input type="checkbox" value="">Option 2</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2 - Selecting it will deselect option 1</label></div><label for="name">Inlined checkbox and radio button instance</label><div><label><input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1</label><label><input type="checkbox" id="inlineCheckbox2" value = "option2"> Opsi 2 </label> <label> <input type = "centang kotak" id = "inlinecheckbox3" value = "option3"> Opsi 3 </label> <label> <input type = "radio" name = "optionRadiOsinline" id = "optionradioSinline" id = "optionRadiOsinline" id = "optionRadiosinline" id = "optionRadiOsinline" ID = "optionRadiosinline" ID = "OptionsRadiOsinline" ID = "" OptionRadiOS4 " 2 </label> </div> </body> </html>
Hasilnya adalah sebagai berikut:
Centang kotak dan tombol radio
Gunakan kotak pemilihan saat Anda ingin pengguna memilih dari beberapa opsi, tetapi hanya satu opsi yang dapat dipilih secara default.
Gunakan opsi Daftar Tampilan <CILECT>, yang biasanya merupakan daftar pilihan yang akrab bagi pengguna, seperti keadaan atau angka.
Gunakan Multiple = "Multiple" untuk memungkinkan pengguna memilih beberapa opsi.
Contoh berikut menunjukkan kedua jenis ini (pilih dan beberapa):
<! Doctype html> <html> <head> <title> instance bootstrap - pilih kotak </iteme> <tautan rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3.0/csss/bootstrap src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <skrip src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/boottrap.min.min ROLE = "Form"> <div> <label for = "name"> SELECT LIST </LABEL> <CILTER> <POPTION> 1 </pection> <pection> 2 </pection> <pection> 3 </pection> <pection> 4 </pection> <pection> 5 </pect> </pilih> <label for = "name"> Daftar seleksi ganda-select </label> <pilih Multiple> <pection> 1 </pection> <pection> 2 </pection> <pection> 3 </pection> <pection> 4 </pection> <pection> 5 </pection> </decter> </div> </form> </body> </html>
Hasilnya adalah sebagai berikut:
Kontrol statis
Ketika Anda perlu menempatkan teks biasa di belakang tag formulir dalam bentuk horizontal, gunakan kelas .Form-control-statis pada <p>.
<! Doctype html> <html> <head> <title> bootstrap instance - Kontrol statis </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3. src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <skrip src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/boottrap.min.min ROLE = "Form"> <div> <label> Email </LABEL> <IV> <P> [email protected] </p> </div> </div> <ver> <label untuk = "inputpassword"> kata sandi </label> <Div> <input type = "kata sandi" id = "inputpassword" placeholder = "silakan masukkan kata sandi"> </div>
Hasilnya adalah sebagai berikut:
Status Kontrol Bentuk
Selain: Status Fokus (mis., Pengguna mengklik input atau menggunakan tombol tab untuk fokus pada input), bootstrap mendefinisikan gaya untuk kotak input yang dinonaktifkan dan menyediakan kelas untuk validasi formulir.
Fokus bingkai input
Ketika input input menerima: fokus, garis besar kotak input dilepas dan kotak-bayar diterapkan.
Input kotak input yang dinonaktifkan
Jika Anda ingin menonaktifkan input kotak input, cukup tambahkan atribut yang dinonaktifkan, yang tidak hanya menonaktifkan kotak input, tetapi juga mengubah gaya kotak input dan gaya penunjuk mouse ketika penunjuk mouse melayang di atas elemen.
Fieldset Fieldset Dinonaktifkan
Tambahkan Atribut Dinonaktifkan ke <TieldSet> untuk menonaktifkan semua kontrol di dalam <fieldset>.
Status verifikasi
Bootstrap berisi gaya verifikasi untuk kesalahan, peringatan, dan pesan sukses. Cukup tambahkan kelas yang sesuai (.has-warning, .has-error, atau .has-success) ke elemen induk untuk menggunakan status verifikasi.
<! Doctype html> <html> <head> <title> instance bootstrap - status kontrol formulir </title> <tautan rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3. src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.min.js"> </script "> </scrips src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> </script> </adeph> <body> <bentuk peran = "bentuk"> <v> <label> fokus </label> <Div> <input id = "focusedInput" <Div> <label> fokus </LABEL> <DIV> <input id iD = "focusedInput" focus..."></div></div><div><label for="inputPassword">Disable</label><div><input id="disabledInput" type="text" placeholder="This input box prohibits input..." disabled></div></div><fieldset disabled><div><label for="disabledTextInput">Disable input (Fieldset dinonaktifkan) </label> <vet> <input type = "text" id = "disableDtextInput" placeholder = "disabled"> </div> <ver> <label untuk = "disabledSelect"> menonaktifkan menu pemilihan (fieldset dinonaktif selection</option></select></div></fieldset><div><label for="inputSuccess">Enter successful</label><div><input type="text" id="inputSuccess"></div></div><div><label for="inputWarning">Input warning</label><div><input type="text" id = "inputwarning"> </div> </div> <v div> <label untuk = "inputerror"> masukkan kesalahan </label> <vert> <input type = "text" id = "inputerror"> </div> </form> </body> </html>
Hasilnya adalah sebagai berikut:
Ukuran Kontrol Bentuk
Anda dapat menggunakan kelas .input-lg dan .col-lg-* untuk mengatur tinggi dan lebar formulir, masing-masing. Contoh berikut menunjukkan ini:
<! Doctype html> <html> <head> <title> instance bootstrap - Ukuran kontrol formulir </title> <tautan rel = "stylesheet" href = "http://apps.bdimg.com/libs/boottrap/3.3.0/csss/boottrap src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.min.js"> </script "> </scrips src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> </script> </head> <body> <bentuk peran = "Form"> <Div> <input tipe = "Text" Placeholder = " input"></div><div><input type="text" placeholder=".input-sm"></div><div></div><div><select><option value="">.input-lg</option></select></div><div><select><option value="">Default selection</option></select></div><div><select><option value = "">. Input-sm </pection> </dect> </div> <div> <div> <input type = "text" placeholder = ". col-lg-2"> </div> <Div> <input type = "text" placeholder = ". placeholder = ". col-lg-4"> </div> </div> </form> </body> </html>
Hasilnya adalah sebagai berikut:
Editor Wulin.com merekomendasikan topik terkait kepada Anda:
Keterampilan operasi komponen bootstrap
Ringkasan Pengetahuan Terkait Bootstrap
Di atas adalah kontrol formulir yang didukung oleh Bootstrap. Semua orang memahaminya. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas semua orang tepat waktu. Pada saat yang sama, saya ingin mengucapkan terima kasih kepada semua orang atas dukungan mereka untuk situs web Wulin.com.