Artikel ini terutama memperkenalkan pengetahuan menggunakan gaya bentuk bootstrap untuk Anda. Ini sangat bagus, mari kita lihat bersama!
Membentuk
<Form role = "Form"> <div> <label for = "exampleInputeMail1"> Email: </label> <input type = "email" id = "exampleInputeMail1" placeholder = "Harap masukkan alamat email Anda"> </Div> <Div> <label for = "Contoh ContohPassword1"> label </label> <div> <Div> sound = "pleas =" contoh = "contoh kata sandi "> </div> <label> <input type =" centang kotak "> Ingat kata sandi Anda </label> </div> <typute type =" kirim "> masukkan email </atton> </form>
Gambar reproduksi:
Kelas: Bentuk-Kontrol
1. Lebar telah menjadi 100%, 2. Perbatasan abu -abu muda (#CCC) diatur, 3. Sudut bulat dengan 4px, 4. Efek bayangan diatur, dan ketika elemen mendapat fokus, efek bayangan dan batas akan berubah, 5. Warna placeholder diatur ke #999
2. Bentuk horizontal:
Bentuk default dari kerangka bootstrap adalah gaya tampilan vertikal, tetapi seringkali kita membutuhkan gaya bentuk horizontal (label ada di sebelah kiri dan kontrol bentuk di sebelah kanan)
<Form role = "Form"> <div> <label for = "inputeMail3"> Email </label> <vi> <input type = "email" id = "inputeMail3" placeholder = "Harap masukkan alamat email Anda"> </Div> </Div> <Div> <label for = "inputpassword3"> Kata sandi </div> </div> <inputer = label = "inputpassword3"> Kata sandi </div> </Div> <inputer = "label =" inputpassword3 "> kata sandi </div> </div> <inputer = label =" inputpassword "Kata sandi </label> </div> <inputer = label =" inputpassword3 "> kata sandi </label> </div> <inputer = label =" inputpassword "Data Email Kata Sandi "> </div> </div> <div> <div> <label> <input type =" checkbox "> Ingat kata sandi </label> </div> </div> </div> <div> <v> <typy type =" kirim "> Masukkan email </div> </div> </div> </formulir>
Gambar reproduksi:
Untuk mencapai efek bentuk horizontal dalam kerangka bootstrap, dua kondisi berikut harus dipenuhi:
1. Nama kelas "bentuk-horizontal" digunakan dalam elemen.
2. Sistem mesh sesuai dengan kerangka bootstrap.
Menggunakan nama kelas "bentuk-horizontal" pada elemen memiliki fungsi berikut:
- Atur nilai bantalan kontrol dan margin.
- Ubah ekspresi "kelompok bentuk", mirip dengan "baris" sistem grid.
3. Bentuk horizontal:
Menerapkan efek bentuk seperti itu dalam kerangka bootstrap sangat mudah, Anda hanya perlu menambahkan nama kelas "Form-Inline" ke elemen.
Prinsip implementasi formulir inline sangat sederhana. Untuk menampilkan kontrol formulir pada satu baris, Anda perlu mengatur kontrol formulir ke elemen blok inline (tampilan: blok inline).
<form role="form"><div><label for="exampleInputEmail2">Email</label><input type="email" id="exampleInputEmail2" placeholder="Please enter your email address"></div><div><label for="exampleInputPassword2">Password</label><input type="password" id="exampleInputPassword2" placeholder="Please enter your email kata sandi "> </div> <label> <input type =" centang kotak "> Ingat kata sandi Anda </label> </div> <typute type =" kirim "> masukkan email </atton> </form>
Gambar reproduksi:
4. Input kotak input
Kotak input baris tunggal, kotak input teks umum, yaitu, nilai atribut tipe input adalah teks. Saat menggunakan input di bootstrap, Anda juga harus menambahkan jenis jenis. Jika Anda tidak menentukan jenis jenisnya, Anda tidak akan mendapatkan gaya yang benar.
<Form role = "Form"> <div> <input type = "email" placeholder = "masukkan email"> </div> <ver> <input type = "text" placeholder = "Harap masukkan nama pengguna"/> </div> </form>
Gambar reproduksi:
5. Kotak pilihan pull down pilih
Kotak pemilihan drop-down dalam kerangka bootstrap konsisten dengan penggunaan asli, dan seleksi multi-line menetapkan nilai dari beberapa atribut ke beberapa. Kerangka Bootstrap menyediakan gaya terpadu untuk elemen -elemen ini.
<Form role = "Form"> <div> <pilect> <pection> 1 </pection> <pection> 2 </pection> <pection> 3 </pection> <pection> 4 </pection> <pection> 5 </pection> </tect> </div> <Div> </Opsi Multiple> Opsi 1 </opsi> </opsi </opsi </Opsi </Opsi </Opsi> </Option> </3 </pilih> </div> </form>
Gambar reproduksi:
6. Teks Teks TexTarea
Bidang teks sama dengan metode penggunaan asli, pengaturan baris dapat menentukan tinggi badannya, dan pengaturan cols dapat mengatur lebarnya. Tetapi jika nama kelas "Bentuk-Kontrol" ditambahkan ke elemen TextArea, tidak perlu mengatur atribut Cols. Karena kontrol bentuk gaya "bentuk-kontrol" dalam kerangka bootstrap adalah 100% atau otomatis.
<Form role = "Form"> <div> <textarea rows = "3"> </textarea> </div> </form>
Gambar reproduksi:
7. Kotak centang dan Radio Tombol Pilih Single
Kotak centang dan radio dalam kerangka bootstrap agak istimewa. Bootstrap telah membuat beberapa perawatan khusus untuk mereka. Alasan utamanya adalah bahwa kotak centang dan radio akan memiliki beberapa masalah kecil ketika digunakan dengan label label (sakit kepala paling adalah masalah penyelarasan). Dengan kerangka bootstrap, pengembang tidak perlu terlalu banyak berpikir, mereka hanya perlu mengikuti metode berikut.
<form role="form"><h3>Case 1</h3><div><label><input type="checkbox" value="">Remember the password</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>Like</label></div><label><input type="radio" name = "OptionsRadiOS" id = "optionsRadios2" value = "hate"> Don't Like </LABEL> </SIV> </form>
Gambar reproduksi:
8. Centang kotak dan tombol radio secara horizontal
Terkadang, untuk tujuan tata letak, kotak centang dan tombol radio perlu diatur secara horizontal. Kerangka Bootstrap juga membuat pertimbangan dalam hal ini:
1. Jika kotak centang perlu diatur secara horizontal, Anda hanya perlu menambahkan nama kelas "kotak centang-inline" ke label label.
2. Jika radio perlu diatur secara horizontal, Anda hanya perlu menambahkan nama kelas "Radio-Inline" ke label label.
<Form role = "Form"> <div> <label> <input type = "checkbox" value = "option1"> game </label> <label> <input type = "checkbox" value = "option2"> fotografi </label> <label> <input type = "centang" value = "option3"> pariwisata </label> <Div> <input type = "value =" pariwisata "> pariwisata </label> <Div> <Input type =" value = "pariwisata"> pariwisata </label> <Div> <Input type = Input "value =" Radio "> pariwisata </label> <Div> <Input type = Input" value = "Radio" name = "sex"> pria </label> <label> <input type = "Radio" value = "option2" name = "sex"> betina </label> <label> <input type = "radio" value = "option3" name = "sex"> netral </label> </div> </form>
Gambar reproduksi:
9. Tombol
Tombol -tombol dalam kerangka bootstrap semuanya diterapkan
<table><thead><tr><th>Button</th><th>class=""</th><th>Description</th></tr></tbody><tr><td><button href="#">Default</button></td><td><code>btn</code></td><td>Standard gray button with gradien </td> </tr> <td> <td> <button href = "#"> primer </button> </td> <td> <code> btn btn-primary </code> </td> </tr> </tr> </tr> </tr> </tr> </tr> </td> </td> </td> </td> </tr> </tr> </tr> </tr> </tr> </tr> </td> </td> </tr> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> href = "#"> Info </button> </td> <td> <code> btn btn-info </code> </td> <td> Digunakan sebagai alternatif untuk gaya default </td> </tr> <td> <td> <bute href = "#"> SUCCESS </TOMBOT> </TD> <td> <ton> <Tombol = "#"> SUCCESS </TOMBOT> </TD> <td> <td> BTN-SUCCESS </code> </td> <td> menunjukkan tindakan yang berhasil atau positif </td> </tr> <tr> <td> <button href = "#"> Peringatan </button> </td> <td> <code> BTN yang harus diperhatikan dengan ini dengan warning </code> </td> <td> <tdn. Tindakan </td> </tr> <td> <td> <button href = "#"> bahaya </button> </td> <td> <code> btn btn-danger </code> </td> <td> <TDR> </TD> </TD> </TD> </TD> </TD> href="#">Inverse</button></td><td><code>btn</verse</button></td><td><code>btn btn-inverse</code></td><td>Alternate dark gray button, not tied to a semantic action or use</td></tr></tbody></table>
Gambar reproduksi:
10. Ukuran Kontrol Bentuk
Kontrol bentuk yang terlihat sebelumnya berukuran normal. Anda dapat mengatur ketinggian kontrol dengan mengatur ketinggian kontrol, setinggi garis, bantalan, dan ukuran font. Namun, kerangka kerja bootstrap juga menyediakan dua nama kelas yang berbeda untuk mengontrol ketinggian kontrol bentuk. Dua nama kelas ini adalah:
1. Input-SM: Buat kontrol lebih kecil dari ukuran normal
2. Input-LG: Buat kontrol lebih besar dari ukuran normal
Kedua kelas ini cocok untuk input, textarea, dan pilih kontrol dalam bentuk.
<form role="form"><div><label>Control becomes larger</label><input type="text" placeholder="Add.input-lg, the control becomes larger"></div><div><label>Normal size</label><input type="text" placeholder="Normal size"></div> <div><label>Control becomes smaller</label><input type="text" placeholder="Add.input-sm, the Kontrol menjadi lebih kecil "> </div> </form>
Gambar reproduksi:
11. Status Kontrol Bentuk (Status Dinonaktifkan)
Keadaan yang dinonaktifkan dari kontrol formulir dalam kerangka bootstrap sama dengan metode implementasi status dinonaktifkan bentuk normal, menambahkan atribut "dinonaktifkan" ke kontrol formulir yang sesuai. Lihat kode berikut untuk detailnya
Nonaktifkan tag formulir tunggal, cukup tambahkan dinonaktifkan ke atribut tag.
<Form role = "Form"> <div> <div> <input id = "disabledInput" type = "text" placeholder = "Form telah dinonaktifkan dan tidak dapat dimasukkan" Dinonaktifkan> </div> </div> </form>
Gambar reproduksi:
Dalam kerangka bootstrap, jika bidang telah menonaktifkan set properti, seluruh domain akan dinonaktifkan.
<Form role = "Form"> <Fieldset Disabled> <div> <label for = "disableDtextInput"> kotak input dinonaktifkan </label> <input type = "text" id = "disableDtextInput" placeholder = "disabled input"> </Div> <div> <label label for = "disabledSelect"> Disabled input "> ID = "DisableDselect"> <pection> tidak dapat dipilih </pection> </tect> </div> <ver> <label> <input type = "checkbox"> tidak dapat memilih </label> </div> <tombol type = "Kirim"> Kirim </attond </fieldset> </div> </form.
Gambar reproduksi:
Dikatakan bahwa untuk seluruh bidang yang dinonaktifkan, jika ada kotak input di legenda, kotak input ini tidak dapat dinonaktifkan.
bentuk bentuk = "form"> <fieldset disabled> <legend> <input type = "text" placeholder = "Jelas warna saya telah berubah menjadi abu -abu, tapi saya tidak dinonaktifkan, jangan percaya? Klik untuk mencoba"/> </legend> <vel> <label untuk = "disabledtextInput"> tidak dapat disambungkan </label> <Input = "DisableDtext" Disabled Box Input </Label> <Input = "DisabledTix" Disabled Box Disabled </label> <Input = "DisabledPinput"> Disabled Input Box </Label> <Input = "Disabled" Disabled Box Input </Label> <Input = "Disabled" Disabled Box Tidak input "> </div> <viv> <label for =" disabledselect "> kotak drop-down dinonaktifkan </label> <pilih id =" disabledselect "> <pection> Tidak dapat dipilih </pect> </tectan> </div> <vol> </type =" KUMPLOK "> tidak dapat dipilih </label> </Div> </format =" KUMPLOK "> KUMPLOK"> tidak dapat dipilih </label> </Div> </form = "
Gambar reproduksi:
Status verifikasi bentuk
Saat membuat formulir, Anda harus melakukan verifikasi formulir. Penting juga untuk memberikan gaya status verifikasi, dan efek ini juga disediakan dalam kerangka bootstrap.
1.Has-warning: Status peringatan (kuning)
2. .Has-error: status kesalahan (merah)
3. .has-success: status keberhasilan (hijau)
Sering kali, ketika memverifikasi formulir, keadaan yang berbeda akan memberikan ikon yang berbeda, seperti keberhasilan adalah tanda cek (√), kesalahan adalah tanda silang (×), dll. Efek ini juga disediakan dalam kotak bootstrap. Jika Anda ingin formulir menampilkan ikon dalam keadaan yang sesuai, Anda hanya perlu menambahkan nama kelas "have-feedback" di negara yang sesuai. Perhatikan bahwa nama-nama seperti itu harus bersama "HAD-ERROR", "Had Warning" dan "Hading-Success":
<Form role = "Form"> <div> <label for = "inputsuccess1"> status sukses </label> <input type = "text" id = "inputSucCess1" placeholder = "Success"> </Div> <v> <label for = "inputwarning1"> status PlateNing </label> <input "iD =" TEKS = " Status "> </div> <ver> <label untuk =" inputerror1 "> status kesalahan </label> <input type =" text "id =" inputerror1 "placeholder =" status kesalahan "> </div> </form> <br> <br> <br> <bentuk peran =" formulir "> <div> <label for =" inputscess1 "SUCKUT1> SUCKUT1" SUCKUT = "LABE" INDUCUT = "LABEL" INPUT1 " id="inputSuccess1" placeholder="success Status"><span></span></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="Warning Status"><span></span></div><div><label for="inputError1">Error Status</label><input type = "text" id = "inputerror1" placeholder = "status kesalahan"> <span> </span> </div> </form>
Gambar reproduksi:
Membentuk informasi prompt
Biasanya, informasi cepat yang berbeda harus disediakan saat membuat verifikasi formulir. Efek ini juga disediakan dalam kerangka bootstrap. Gaya "bantuan blok" digunakan, dan pesan cepat ditampilkan dalam blok dan ditampilkan di bagian bawah kontrol.
<form role="form"><div><label for="inputSuccess1">Success Status</label><input type="text" id="inputSuccess1" placeholder="success"><span>The information you entered is correct</span><span></span></div><div><label for="inputWarning1">Warning Status</label><input type="text" id="inputWarning1" placeholder="warning status"><span>Please enter the correct information</span><span></span></div><div><label for="inputError1">Error Status</label><input type="text" id="inputError1" placeholder="Error status"><span>The information you entered is Salah </span> <span> </span> </div> </form>
Gambar reproduksi:
Di atas adalah penggunaan gaya bentuk 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!