Elemen-elemen umum dari formulir terutama meliputi: kotak input teks, kotak pemilihan drop-down, kotak radio, kotak centang, bidang teks, tombol, dll. Berikut adalah versi bootstrap yang berbeda:
Kurang: forms.Less
Sass: _forms.scss
Bootstrap hanya menyesuaikan tag bidang, legenda, dan label dalam formulir
Fieldset {Min-Width: 0; Padding: 0; Margin: 0; Border: 0;} Legend {display: block; lebar: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: wol warna: #333; perbatasan: 0; Border-Bottom: 1px: wol warna: #333; Border: 0; Border-Bottom: 1px: inherit; inline-block; margin-bottom: 5px; font-weight: bold;}Selain elemen -elemen ini, ada juga input, SELECT, TextArea dan elemen lainnya. Dalam kerangka bootstrap, efeknya dicapai dengan menyesuaikan nama kelas. Form-control.
1. Lebar menjadi 100%;
2. Tetapkan perbatasan abu -abu muda (#CCC)
3. sudut bundar dengan 4px
4. Atur efek bayangan dan elemen mendapat fokus, efek bayangan dan batas akan berubah.
5. Atur warna PalceHolder ke #999
Bentuk inline
Jika Anda ingin menambahkan tag label sebelum input, itu akan menyebabkan jeda garis input ditampilkan; Jika Anda harus menambahkan tag label seperti itu dan tidak ingin jeda baris input, Anda harus meletakkan tag label di wadah.Form-group, misalnya:
<div> <label> Alamat email </label> </div> <div> <input type = "email" placeholder = "Harap masukkan nomor email Anda"> </div>
Efeknya adalah sebagai berikut:
Untuk mencapai efek dari formulir bergabung, cukup tambahkan nama kelas. Form-inline ke elemen formulir. Prinsip implementasi adalah:
Atur kontrol formulir ke elemen blok inline (tampilan: blok inline) untuk menampilkan kontrol formulir pada satu baris.
contoh:
<form><div><label>Email</label><input type="email" placeholder="Please enter the email number"></div><div><label>Password</label><input type="password" placeholder="Please enter the password"></div><label><input type="checkbox" > Remember the password</label></div><div><button>Enter the email</button></div></form>
Efeknya adalah sebagai berikut:
Apakah Anda menemukan bahwa kode tersebut jelas memiliki tag label dan tidak ditempatkan di dalam wadah. GROUP, dan input tidak akan dibungkus. Yang lebih aneh lagi adalah konten label label tidak ditampilkan! Bahkan, jika Anda melihat dengan cermat, tag label telah menambahkan nama kelas.sr saja, yang berarti menyembunyikan label. Mari kita lihat kode sumbernya:
.sr saja {posisi: absolute; lebar: 1px; tinggi: 1px; padding: 0; margin: -1px; overflow: tersembunyi; klip: rect (0, 0, 0, 0); perbatasan: 0;}Karena tag label telah ditambahkan dan nama kelas .sr saja telah ditambahkan untuk menyembunyikan label, bukankah tidak perlu? ? ? Tapi ini persis salah satu keuntungan dari kerangka kerja bootstrap. Jika label tidak diatur untuk kontrol input, pembaca layar tidak akan dikenali dengan benar, dan juga memiliki pertimbangan tertentu untuk penyandang cacat.
Bentuk horizontal
Menerapkan efek bentuk horizontal di bootstrap membutuhkan dua kondisi berikut:
1. Gunakan nama kelas. Formulir-horizontal pada elemen formulir
2. Sistem Grid dengan Kerangka Bootstrap (Detail: Penjelasan Detail Sistem Grid Bootstrap)
Gunakan nama kelas. Formontal dalam elemen bentuk terutama memiliki fungsi berikut:
1. Atur nilai bantalan dan margin dari kontrol formulir
2. Ubah bentuk ekspresi. Dari kelompok, mirip dengan baris sistem grid
Kode Sumber CSS:
.Form-horizontal .Control-label, .Form-horizontal .radio, .Form-horizontal .Checkbox, .Form-horizontal .radio-inline, .Form-horizontal .Checkbox-inline {padding-top: 7px; margin-top: 0; margin-botin: 0;}. {Min-height: 27px;}. Formulir-horizontal .Form-group {margin-right: -15px; margin-left: -15px;}. Formulir-horizontal .Form-control-static {padding-top: 7px;}@media (MinForm: 768px) {padding-top: 7px; benar;}}. Formulir-horizontal .has-feedback .Form-control-feedback {top: 0; kanan: 15px;}contoh:
<corm> <div> <label> Email </label> <viv> <input type = "email" placeholder = "Harap masukkan email Anda"> </div> </div> <ver> <label> Kata sandi </label> <viT> <input type = "kata sandi" tipe = "Harap masukkan kata sandi Anda"> </Div> </Div> <Div> <Div> <paceholder = Input = " Kata Sandi </LABEL> </SEV> </SIV> <SIV> <SIV> <TOMTON> Masukkan email Anda </button> </div> </form>
Efeknya adalah sebagai berikut:
Kotak input baris tunggal
Saat menggunakan input di bootstrap, Anda juga harus menambahkan jenis jenis. Jika Anda tidak menentukan tipe tipe, Anda tidak akan mendapatkan gaya yang benar, karena kerangka bootstrap mendefinisikan gaya melalui bentuk input [type = "?"], Seperti: tipe teks, yang sesuai dengan input [type = "text"]
Untuk membuat kontrol terlihat bagus dalam berbagai gaya bentuk, Anda perlu menambahkan nama kelas. Form-control
<Form role = "Form"> <div> <input type = "email" placeholder = "masukkan email"> </div> </form>
Tarik Kotak Pilihan Pilih
Seleksi multi-line menetapkan nilai atribut berganda ke beberapa
<Form role = "Form"> <div> <pilect> <pection> 1 </tiption> <pection> 2 </pection> <pection> 3 </pection> <pection> 4 </pection> <pection> 5 </pection> </dectt> </div> <v div> <pilih Multiple> <pection> 1 </pection> <pection> 2 </pection> <pection> 3 </pection> <pection> 4 </pection> <pection> 5 </pection> </decter> </div> </form>
Teks Teks Teks TextArea
Bidang teks sama dengan metode penggunaan asli. Pengaturan baris dapat menentukan ketinggiannya, pengaturan COLS dapat menentukan lebarnya. Jika nama kelas .FORM-CONTROL ditambahkan ke elemen TextArea, tidak perlu mengatur atribut COLS, karena lebar ruang target gaya kontrol-kontrol dalam kerangka bootstrap adalah 100% atau otomatis.
<Form role = "Form"> <div> <textarea rows = "3"> </textarea> </div> </form>
Kotak centang dan radio kotak radio
Akan ada beberapa masalah kecil dengan kotak centang dan radio bersama dengan tag label (seperti masalah perataan)
<sorm> <verv> <label> <input type = "checkbox"> Ingat kata sandi </label> </div> <div> <label> <input type = "Radio" name = "optionsradios" id = "optionsradios1" checked> LUCKET </label> </Div> <Div> <label> <input type = "Radio" name = "id" iD "iD" <Div> <label> <input type = "Radio" name = "none =" ID "ID" iD "iD" IBOOS2 " seperti </label> </div> </form>
1. Apakah itu kotak centang atau radio, mereka dibungkus dengan label.
2. Kotak centang dan tag label ditempatkan di wadah yang disebut .CheckBox
3. Radio dan label ditempatkan dalam wadah bernama .Radio. Bootstrap terutama menggunakan .CheckBox dan .Radio Styles untuk menangani penyelarasan kotak centang, tombol radio, dan label.
.radio, .checkbox {display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px;}. Label radio, .Checkbox Label {Display: inline; font-weight: normal; Kursor: pointer;}. Radio, "Radio," Radio, "Radio." input [type = "centang kotak"],. Input kotak-centang-input [type = "centang kotak"] {float: kiri; margin-left: -20px;}. Radio + .radio, .checkbox + .checkbox {margin-top: -5px;}Centang kotak dan tombol radio secara horizontal
1. Jika kotak centang perlu diatur secara horizontal, Anda hanya perlu menambahkan nama kelas pada label label.checkbox-inline
2. Jika radio membutuhkan pengaturan horizontal, cukup tambahkan nama kelas.
Ini kode sumber CSS:
.radio-inline, .Checkbox-inline {display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: normal; vertikal-align: tengah; kursor: pointer;}. Radio-inline + .radio-inline, .CheckBox-Inline + .Checkbox-inline {margin-top: 0; mutgox-left: 0; mutgox-left: 0; mutgox-left: 0; mutgox-inline: 0; mutgox-inline: 0; mutgox-inline: 0; mutgox-inline: 0; mutgox-inline: 0; mutgox-inline: 0; <div><label><input type="radio" name="sex"value="option1"> Male</label><label><input type="radio" name="sex" value="option2"> Female</label><label><input type="radio" name="sex" value="option3">Neutral</label></div>Status Kontrol Bentuk
1. Status Fokus:
Keadaan fokus diimplementasikan melalui kelas semu: fokus. Keadaan fokus dalam kontrol bentuk bootstrap menghapus gaya garis besar default dan menambahkan efek bayangan lagi. Berikut ini
Kode Sumber CSS:
.form-control:focus {border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 8px RGBA (102, 175, 233, .6);}Seperti yang dapat dilihat dari kode sumber, untuk membuat kontrol memiliki efek gaya di atas dalam keadaan fokus, Anda perlu menambahkan nama kelas ke kontrol.
<norm> <div> <div> <input type = "text" placeholder = "bukan efek dalam fokus"> </div> <vert> <input type = "text" placeholder = "Effect in focus"> </div> </div> </form>
Efek kontrol file, radio, dan kotak centang dalam fokus juga berbeda dari kontrol input biasa. Berikut ini adalah kode sumber
input [type = "file"]: fokus, input [type = "Radio"]: fokus, input [type = "centang kotak"]: fokus {outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}2. Nonaktifkan Status:
Cukup tambahkan properti yang dinonaktifkan pada kontrol formulir yang sesuai, dan berikut ini adalah kode sumber CSS:
.Form-control [Dinonaktifkan],. Form-control [readonly], Fieldset [Disabled] .Form-control {kursor: tidak diizinkan; latar belakang-warna: #eee; opacity: 1;} input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio, fieldset [dinonaktifkan] .radio-inline, fieldset [dinonaktifkan] .checkbox, fieldset [dinonaktifkan] .checkbox-inline {kursor: tidak diizinkan;}contoh:
<input type = "text" placeholder = "Form dinonaktifkan" dinonaktifkan>
Jika Fieldset menetapkan properti yang dinonaktifkan, seluruh domain akan dinonaktifkan
contoh:
<Form role = "Form"> <fieldset dinonaktifkan> <div> <label> Kotak input dinonaktifkan </label> <input type = "text" placeholder = "nonput input"> </div> <verv> <label> kotak drop-down adalah disabled</label><select><option>1</option><option>2</option><option>3</option><option>4</option></select></div><div><label ><input type="checkbox">Option box is disabled</label></div><button type="submit">Submit</button></fieldset></form>
Efeknya adalah sebagai berikut: (ikon yang dinonaktifkan muncul ketika mouse dipindahkan ke atas. Berikut adalah tangkapan layar langsung yang tidak dapat dilihat)
3. Status Verifikasi
Bootstrap memberikan efek berikut:
1.Has-warning: Status peringatan kuning
2. .Has-error: status kesalahan merah
3. .has-success: status sukses hijau
Saat menggunakannya, cukup tambahkan nama kelas status ke wadah grup formulir. Efeknya sama di tiga negara bagian, tetapi warnanya berbeda.
contoh:
<sorm> <verv> <label> Status Sukses </Label> <Input type = "Text" Placeholder = "Status Sukses"> </Div> <veN> <Label> Status Kesalahan </Label> <Input Type = "Teks" Placeholder = "Status Kesalahan"> </Div> <Div> Status PERINGATAN </Label </Label> <Input Type = "Text" Teks "PlacHolder ="
Efeknya adalah sebagai berikut:
Terkadang, negara bagian yang berbeda menyediakan ikon yang berbeda saat memvalidasi formulir. Jika Anda ingin menampilkan ikon dalam keadaan yang sesuai, Anda hanya perlu menambahkan nama kelas. Perhatikan bahwa itu harus digunakan dengan .has-error, .has-success, .has-warning.
Ikon kecil bootstrap semuanya dibuat menggunakan @font-face. menyukai:
<span class = ”form-control-control-feedback"> </span>
contoh:
<sorm> <div> <label> Status Sukses </Label> <input type = "text" placeholder = "Status Sukses"> <span> </span> </div> <verv> <label> Status kesalahan </label> <input type = "Text" Placeholder = "Status Kesalahan"> <pan> </span> </Div> Text <Div> </Text Label </Status PERINGATAN "> </span> </span> </Div> Text <Div> </Text Label </STATUS WARNING </SPANET> </span" </Div> TEXT <DIV> <LABEL> </LABEL </STATUS PLACHOP = "PLACHOPER =" Status "> <span> </span> </div> </form>
Efeknya adalah sebagai berikut:
Membentuk informasi prompt
Secara umum, saat membuat verifikasi formulir, diperlukan informasi prompt yang berbeda. Gunakan .Help-block dalam kerangka Bootstrap untuk menampilkan informasi prompt di blok dan menampilkannya di bagian bawah kontrol.
Ini kode sumber CSS:
.help-block {display: block; margin-top: 5px; margin-bottom: 10px; warna: #737373;}contoh:
<sorm> <div> <label> status berhasil </label> <input type = "text" placeholder = "status berhasil"> <span> Input informasi benar </span> <span> </span> </div> <vet> <label> status kesalahan </label> <input type = "text" placeholder = "status kesalahan"> <span> Input Inpute adalah Input <pacpaceholder "Teks" salah </span> <span> </span> </div> <veT> <label> Status peringatan </label> <input type = "text" placeholder = "status peringatan"> <span> Harap masukkan informasi yang benar </span> <span> </span> </div> </form>
Efeknya adalah sebagai berikut:
Jika Anda tidak ingin menambahkan kode sendiri ke bootstrap.css, dan desainnya membutuhkan ini, Anda dapat menggunakan sistem grid Bootstrap, misalnya:
<Form role = "Form"> <div> <label for = "inputsuccess1"> status sukses </label> <ver> <ver> <input type = "text" id = "InputSucCess1" placeholder = "Success Status"> </Div> <span> Informasi yang Anda masukkan adalah benar </span> </div> </Div> </Form
Di atas adalah konten yang relevan dari komponen bentuk bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!