Membentuk
Bentuk dasar
Untuk input, textarea, dan pilih dalam formulir, saya biasanya menambahkan kelas "Form-Control", yang menetapkan lebar default elemen menjadi 100% (tidak absolut, seperti formulir inline yang disebutkan di bawah). Dan setiap elemen (termasuk label dan elemen yang akan dimasukkan) akan ditambahkan dengan "kelompok-kelompok". Itu hanya memiliki satu gaya. margin-bottom: 15px.
<Form Action = ""> <div> <label for = ""> nama pengguna: </label> <input type = "text"/> </div> <ve> <label for = ""> kata sandi: </label> <input type = "password"/> </div> </form>
Bentuk inline
Dengan menambahkan "bentuk-inline" ke elemen terluar (elemen induk dari kelompok bentuk). Menunjukkan bahwa semua elemen bentuk ditampilkan pada satu baris (dengan lebar yang cukup). Dan ".Form-inline .Form-group" ditampilkan sebagai blok inline. Dan lebar ".Form-inline .Form-control" adalah otomatis. Ini memastikan bahwa itu ditampilkan dalam satu baris.
<Form Action = ""> <div> <label for = ""> nama pengguna: </label> <input type = "text"/> </div> <ve> <label for = ""> kata sandi: </label> <input type = "password"/> </div> </form>
Bentuk horizontal
Tidak seperti bentuk normal dan inline. Jika Anda ingin menampilkan elemen formulir label dan input pada satu baris, Anda perlu menggunakan "Formulir-Horizontal". Jenis "kelompok formulir" semacam ini setara dengan "baris" dalam sistem grid. Jadi subkelasnya memiliki "col-md-*", dan label "kontrol-label"-". Formulir-horizontal .control-label" memiliki efek teks yang sejajar dengan kanan. Jika Anda tidak menambahkan ini, label dan input akan tampak tidak kompatibel.
<Form Action = ""> <div> <label for = ""> nama pengguna: </label> <ver> <input type = "text"/> </div> </div> <div> <label for = ""> kata sandi: </label> <Div> <input type = "password"/> </Div> </Div> </form>
Ukuran bentuk
Yang mengontrol ukuran input adalah "input-sm" dan "input-lg", yang membuat kotak input input terlihat lebih kecil atau lebih besar dari biasanya. Sesuai dengan ini adalah ukuran teks dalam label. Anda perlu menambahkan "Form-Group-SM" dan "Form-Group-LG" ke "Form-Group" induk pada saat yang sama. Seperti pada kotak input kata sandi demo di atas.
Kotak input
Di HTML5, tipe dalam tag kotak input mendukung lebih banyak jenis. Ada teks, kata sandi, data, data-lokal, tanggal, bulan, waktu, minggu, nomor, email, url, pencarian, tel, dan warna. Gaya yang benar hanya dapat ditampilkan pada label <Sput> jika jenis tertentu ditetapkan. Beberapa elemen hanya dapat menunjukkan efeknya pada ponsel Anda.
Kotak drop-down Pilih
Mirip dengan kotak input. Itu hanya mengubah input untuk memilih dan menambahkan kelas "Form-Control".
<Form Action = ""> <div> <label for = ""> Pilih: </label> <veT> <pilih name = "" id = ""> <opsi value = ""> html </pection> <option value = ""> css </pection> <opsi value = "" option = "> opsi </option> </option> </option> </option> </option> opsi </option> </option> </option> </option> </option> </option> </option> </option> </option> option </option> </option> </option> </option> </Option ="> Option = "> Option ="> Option = "> Option ="> Option = "> Option ="> Option = "> Option ="> OPTION </Option> value = ""> nodeJs </pection> </dectle> </div> </form>
col-md-pull-* adalah offset kiri.
Bidang teks
Mirip dengan yang di atas.
<Form Action = ""> <div> <label for = ""> textarea: </label> <verv> <textarea name = "" id = "" biling = "3"> halo </textarea> </div> </div> </form>
Kotak Radio dan Radio
Untuk membuat elemen radio dan kotak centang muncul di satu baris dan sejajar dengan label. Bootstrap menawarkan dua opsi. Satu:
<Div> <label for = ""> <input type = "Radio" name = "sex"/> jantan <input type = "Radio" name = "sex"/> betina <input type = "Radio" name = "sex"/> Confidential </Label> <label for = "" <input type = "centang kotak"/> html <input type = "centang" type = "centang kotak"/> JavaScript </label> </div>
Label itu sendiri adalah blok inline. Tapi .Radio, .Checkbox itu sendiri diblokir.
Jadi bungkus beberapa kotak radio atau centang dengan satu label, yang akan tampak tidak profesional (haha). Juga, banyak yang juga sangat tidak sedap dipandang. Jadi, cara menulis kedua ada di sini.
<Div> <label for = ""> <input type = "Radio" name = "sex"/> jantan </label> <label for = ""> <input type = "Radio" name = "sex"/> female </label> <label for = "> <input type =" Radio "name =" sex "/Confidential </label label> <bR/label <" name "name =" sex "/> Confidential </Label> <Br/Label <" LABEL "" NAME = " untuk = ""> <input type = "centang kotak"/> css </label> <label for = ""> <input type = "centang kotak"/> javascript </label> </div>
Verifikasi bentuk
HAD-SUCCESS: Sukses, hijau.
Hading-warning: peringatan, kuning.
HAS-ERROR: Kesalahan, merah.
Cukup tambahkan gaya yang sesuai ke "kelompok bentuk". Untuk verifikasi yang lebih baik, kami dapat terus menambahkan "Has-Feedback". Kemudian tambahkan "Form-kontrol-umpan balik" ke tingkat elemen setelah input ("Form-Control"). Semantiknya jelas dan jelas. Kodenya adalah sebagai berikut:
<Form Action = ""> <div> <label for = ""> nama pengguna: </label> <ver> <input type = "text"/> <span> </span> </div> </div> <v> <label untuk = ""> Kata sandi: </LABEL> <DIV> <Input Type = "Text"/ </label> <div> <input type = "text"/> <span> </span> </span> </form>
Tombol
Gaya multi-tombol dan tombol
Ada berbagai gaya tombol di Bootstrap. Tombol, a, input, span, div, dll. Semua bisa menjadi tombol selama memiliki "btn btn-style". Namun, untuk kompatibilitas dan keterbacaan yang lebih baik, sebaiknya tidak menggunakan cara ini, coba gunakan tag tombol.
<button> Tombol </button> <button> Tombol </button> <button> Tombol </button> <button> Tombol </button> <button> Tombol </button> <button> </button> <!-BTN-Block membuat tombol eksklusif untuk satu Baris-> <button> tombol </button> <button> Tombol </button> <button> Tombol </button> <button> Tombol </button> <button> Tombol </button> <button> </button> <button> Tombol </button> <button> </button> <button> Tombol </button> <button> </button>
Ukuran tombol
Seperti disebutkan di atas, gunakan "btn-xs", "btn-sm", "btn-lg" untuk mengatur ukuran tombol.
Status tombol
Seperti disebutkan di atas, yang efektif adalah "aktif" dan "fokus".
gambar
IMG-responsif: gambar responsif, terutama ditujukan untuk desain responsif.
IMG-ROUNDED: sudut bulat.
IMG-Circle: Round.
IMG-Thumbnail: Thumbnail, diwakili oleh perbatasan yang ditambahkan ke lapisan luar.
ikon
BootStart memiliki banyak ikon kecil yang dibangun. Metode penggunaan adalah sebagai berikut. Bahkan, telah digunakan dalam "Form-Kontrol-Feedback" di atas. Di antara mereka, "Glyphicon" adalah suatu keharusan.
<span> </span>
Grup kotak input
Grup kotak input adalah "kelompok input". Kita perlu menambahkan beberapa sufiks (seperti sufiks email) dan awalan (simbol uang ￥, $, dll.) Untuk menggunakan "input-grup-addon" atau "input-group-btn". Semantik sederhana dan jelas. sebagai berikut:
<!--Email-box--><div><input type="text" /><span>@gmail.com</span></div><!--Currency--><div><span>$</span><input type="text"><span>.00</span></div><!--Single choice--><div><span><input type="radio"/></span><input type="text"/></div><!--Multiple choice--><div><span><input type="checkbox"/></span><input type="text" /></div><!--Taobao input box group--><div><div><button data-toggle="dropdown">Please select <span></span></button><ul><li><a href = "JavaScript: void (0)"> baby </a> </li> <li> <a href = "javascript: void (0)"> shop </a> </li> </ul> </div> <input type = "text"/> <span> <utute> Cari </button> </span> </Div>
ringkasan
"Formulir-horizontal" dan "bentuk-inline" keduanya merupakan label terluar dari grup bentuk.
Grup bentuk mengambil "kelompok bentuk" sebagai elemen induk. Yang serupa adalah "kelompok input" dan "kelompok tombol" yang dapat digunakan di masa depan. Mereka semua bisa berukuran.
"Form-group-lg", "input-lg", "input-group-lg", "btn-lg", dll.
Gaya verifikasi memiliki "HAD-ERROR", "HAD-SUCCESS", "HAD-WARNING". "Has-feedback" dapat ditambahkan ke elemen yang sama. Untuk membuat verifikasi lebih lengkap.
Ada banyak gaya untuk tombol dan ukuran dapat diatur.
Empat gaya umum untuk gambar.
Bootstarp memiliki banyak ikon bawaan.
Grup kotak input dimulai dengan "kelompok input", dan elemen anak termasuk "input-grup-addon", "input-group-btn", dll.
Di atas adalah koleksi lengkap formulir di bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!