Artikel ini terutama akan memperkenalkan keterampilan menggunakan formulir bootstrap.
1. Formulir Dasar Bootsstrap
Elemen umum dalam bentuk terutama meliputi: kotak input teks, kotak pemilihan drop-down, tombol radio, tombol periksa, bidang teks dan tombol, dll.
Pertama -tama mari kita lihat bentuk dasar:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Formulir Dasar </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/poottrapcdn.com/bootstrap/3.1/.m. <Form role = "Form"> <div> <label for = "exampleInputeMail1"> Email: </label> <input type = "email" id = "exampleInputeMail1" placeholder = "Harap masukkan alamat email Anda"> </Div> <ver> <label for = "ContohPassWord1"> Kata Sandi: </Label> <Div> <label fogi = "Contoh" Contoh "" Label "" PLACEPERS = "PLACEPERS =" LABEL "" PLACEPERPREDS = "LABEL" "PLACEPOR" "PLACEPERPASPASPASSWORD1"> </div> <div> <label> <input type = "checkbox"> Ingat kata sandi </label> </div> <typute type = "kirim"> Login </button> </form> </body> </html>
Rendering adalah sebagai berikut:
Kami juga dapat mencapai efek yang berbeda dengan menambahkan nama kelas yang berbeda untuk terbentuk. Aturan bentuk spesifik ditampilkan dalam tabel berikut:
Misalnya:
<bentuk role = "Form"> ... </form>
2.BootStrap Kontrol formulir
1) Input kotak input
<Form role = "Form"> <div> <!-Jenis tipe harus ditambahkan. Jika tipe tipe tidak ditentukan, gaya yang benar tidak akan diperoleh -> <input type = "email" placeholder = "masukkan email"> </div> </form>
2) Tarik Kotak Pilihan Pilih
<Form role = "Form"> <div> <!-kotak pemilihan drop-down baris tunggal-> <pect> <pection> 1 </pection> <pection> 2 </pection> </sfect> </div> <div> <!-kotak pemilihan multi-line-> <pilih Multiple> </Form
3) Teks Teks Teks Teks
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> <!-ROWS = "3" Atur ketinggian tiga baris-> <textarea baris = "3"> </pextarea> </div> </form>
4) Kotak centang
Pengaturan Vertikal:
<Form role = "Form"> <div> <label> <input type = "checkbox" value = ""> centang kotak </label> </div> </form>
Pengaturan Horizontal:
<Form role = "Form"> <div> <label> <input type = "checkbox" value = "option1"> checkbox1 </label> <label> <input type = "checkbox" value = "option2"> checkbox2 </label> </div> </form>
5) Radio tombol pilih tunggal
Pengaturan Vertikal:
<Form role = "Form"> <div> <label> <input type = "Radio" name = "optionsradios" id = "optionsradios1" value = "love" checked> a </label> </div> <viv> <!-apakah itu kotak centang atau radio, mereka dibungkus dalam label-> <label> <input type "name =" Radio "=" Radio "name =" Radio "" Radio "," Radio "=" Radio "name =" Radio "=" Radio "=" Radio "=" Radio "=" Radio "" Radio "" value = "Benci"> B </LABEL> </DIV> </form>
Pengaturan Horizontal:
<Form role = "Form"> <div> <label> <input type = "Radio" value = "option1" name = "sex"> a </label> <label> <input type = "Radio" value = "option2" name = "sex"> B </label> </div> </form>
Catatan: Kotak centang dan label ditempatkan dalam wadah yang disebut ".CheckBox"; Radio dan label ditempatkan dalam wadah yang disebut ".Radio".
3. Bootstrap Status Kontrol Formulir
1) Status fokus
Keadaan fokus dicapai dengan menambahkan nama-control nama kelas ke input. Keadaan fokus kontrol formulir dalam kerangka bootstrap menghapus gaya default garis besar dan menambahkan efek bayangan lagi.
<!-Form-horizontal mencapai efek bentuk horizontal-> <bentuk role = "Form"> <div> <div> <input type = "text" placeholder = "status fokus"> </div> </div> </form>
2) Nonaktifkan status
Cukup tambahkan "dinonaktifkan" ke kontrol formulir yang perlu dinonaktifkan:
<Input type = "teks" placeholder = "formulir dinonaktifkan, tidak dapat dimasukkan" dinonaktifkan>
3) Status verifikasi
Untuk verifikasi formulir, Anda juga perlu memberikan gaya status verifikasi. Efek ini juga disediakan di Bootstrap:
Saat menggunakannya, Anda hanya perlu menambahkan nama kelas status yang sesuai dengan wadah grup formulir.
<Form role = "Form"> <div> <label for = "inputwarning1"> status peringatan </label> <input type = "text" id = "inputwarning1" placeholder = "status peringatan"> </div> <ver> <label for = "inputerror1"> status kesalahan </label> <input type = "TEXT =" TEKS = "TEKS =" TEKS = " <Label untuk = "InputSucCess1"> Status Sukses </LABEL> <INPUT TYPE = "TEXT" ID = "INPUTSUCCESS1" Placeholder = "Success"> </div> </form>
Rendering adalah sebagai berikut:
Jika Anda ingin formulir menampilkan ikon dalam keadaan yang sesuai, Anda hanya perlu menambahkan nama kelas "Has-Feedback" dalam keadaan yang sesuai (nama kelas ini harus disertai dengan "HAD-ERROR", "Had Warning" dan "Has-Success").
4.Bootstrap Bentuk tombol
1) Tombol Gaya Kustom
<typute type = "tombol"> tombol dasar </attond> <tombol type = "tombol"> tombol default </button> <tombol type = "tombol"> tombol utama </atton> <tombol type = "Tombol"> tombol keberhasilan </button> <tombol type = "Tombol"> Tombol "> Tombol Tombol" Tombol "Tombol/Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol </Tombol <" Tombol </Tombol </"Tombol" Tombol "> Tombol" Tombol "> Tombol" Tombol "> Tombol" Tombol ">
Rendering adalah sebagai berikut:
2) Tombol bootstrap mendukung beberapa label, dan tombol yang dibuat oleh label lain adalah sebagai berikut:
<typon type = "Tombol"> Tombol Tag Tombol </button> <Input type = "Kirim" value = "Tombol tag input"/> <span> Tombol tag rentang </span> <div> Tombol tag div </div> <a href = "##"> Tombol tag </a>
3) Ukuran tombol
Kontrol ukuran tombol dengan menambahkan nama kelas ke tombol dasar ".btn".
<tombol type = "Tombol"> tombol normal </button> <tombol type = "tombol"> Tombol besar </button> <tombol type = "tombol"> tombol kecil </button>
4) Tombol blok (lebih banyak digunakan pada terminal seluler)
Tombol Blok: Lebar tombol mengisi seluruh wadah induk (Lebar: 100%) dan tidak akan memiliki nilai bantalan dan margin.
Bootstrap menyediakan nama kelas "BTN-block". Tombol dapat menggunakan nama kelas ini untuk mengimplementasikan tombol blok (untuk detail, silakan merujuk ke baris file bootstrap.css 2340 ke baris 2353)
<tombol type = "Tombol"> Tombol besar </attones> <tombol type = "tombol"> tombol normal </button> <tombol type = "tombol"> tombol kecil </button>
Rendering adalah sebagai berikut:
5. BOTTRAP FORMULIR STATUS TUTHTON
Di Bootstrap, efek status tombol terutama dibagi menjadi dua jenis: keadaan aktif dan keadaan cacat.
1) Keadaan aktif: terutama mencakup beberapa jenis status suspensi tombol (: hover), klik status (: aktif) dan status fokus (: fokus).
2) Nonaktifkan status
Ada dua cara untuk menonaktifkan tombol:
Metode 1: Tambahkan atribut yang dinonaktifkan di tag
Metode 2: Tambahkan nama kelas "Dinonaktifkan" ke label elemen
Perbedaan utama antara keduanya adalah:
Gaya ".disabled" tidak melarang perilaku default tombol. Metode menambahkan atribut "dinonaktifkan" ke label elemen dapat melarang perilaku default elemen.
6.BootStrap Image
Di Bootstrap, gaya berikut disediakan untuk gaya gambar:
Cara menggunakan: Cukup tambahkan nama kelas yang sesuai ke tag IMG, sebagai berikut:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2016072615143225"> <csdn.net/2016072615143225 "> <csdn.net/2016072615143225"> <csdn.net src = "http://img.blog.csdn.net/20160726151432225">
Efek berjalan adalah sebagai berikut atau melihat jendela hasil di sebelah kanan:
7.Bootstrap Ikon
Bootstrap menyediakan 200 ikon yang berbeda, sebagai berikut:
Cara menggunakan: Cukup tambahkan nama kelas ikon yang sesuai ke tag, sebagai berikut:
<span> </span>
<span> </span>
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Serangkaian artikel:
Pertama kali saya bersentuhan dengan Magical Bootstrap Basic Layout //www.vevb.com/article/89278.htm
Pertama kali saya bersentuhan dengan Sistem Grid Magical Bootstrap //www.vevb.com/article/89333.htm
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.