Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Saat merevisi latar belakang saya sendiri, saya menggunakan Bootstrap dalam tata letak umum, dan tidak ada alasan untuk tidak menggunakan bagian formulir yang tersisa. Untuk kecantikan dan tata letak formulir, bootstrap juga sangat bagus, dengan perbatasan atmosfer, tombol multi-fungsi dan tata letak bentuk makro, semuanya sangat lengkap dan sempurna!
Bentuk normal
Kita perlu membungkus elemen formulir ke dalam kelas Form-Group, yang umumnya disimpan dalam <SEV> ... </Div>, dan konten nama elemen formulir umumnya ditempatkan dalam label label, dan nama kelas label input adalah kontrol-formulir. Perlu dicatat bahwa kotak centang dan elemen radio Anda perlu ditulis di div Anda sendiri.
Misalnya, formulir berikut
<form> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for = "exampleInputFile"> Input file </label> <input type = "password" id = "exampleInputPassWord1" placeholder = "password"> </div> <ver> <label for = "exampleInputFile"> </label> <input type = "file" id = "exampleInputFile"> </label> <input type = "file" id = "exampleInputFile"> </label> <input type = "file" id = "exampleInputFile"> <p> label> <input level = "file" id = "contoh type = "checkbox"> periksa saya </label> </div> <tombol type = "kirim"> kirim </attond> </form>
Efek setelah berlari
Bentuk emisi horizontal
Jika elemen formulir Anda perlu dikeluarkan secara horizontal, Anda dapat menambahkan class.Form-inline ke formulir. Bentuk ini umumnya lebih cocok ketika ada lebih sedikit elemen.
Misalnya
<form> <div> <label for="exampleInputEmail3">Email address</label> <input type="email" id="exampleInputEmail3" placeholder="Email"> </div> <div> <label for="exampleInputPassword3">Password</label> <input type="password" id="exampleInputPassword3" placeholder="Password"> </div> <div> <label> <input type = "centang kotak"> ingat saya </label> </div> <tombol type = "kirim"> Masuk </button> </form>
Bentuk biasa + elemen emisi horizontal
Bentuk ini adalah yang paling umum digunakan. Ketika pengguna biasa mendaftar dan mengisi informasi, mereka sering dapat melihat efek formulir berikut.
Menerapkan formulir ini menggunakan kelas .Form-horizontal, dan setiap baris elemen dibungkus dalam <viv> ... </div>
Formulir> <div> <label for = "inputeMail3"> Email </label> <ver> <input type = "email" id = "inputeMail3" placeholder = "email"> </div> </div> <ver> <label for = "inputpassword3"> kata sandi </label> <div> <input type = "kata sandi"/inputpass3 "> </label> <div> <input type =" kata sandi "ID =" inputpass3 "> </label> <Div> <input type =" kata sandi "ID =" inputpass3 "> Placing3 </label> <Div> <input type =" password "ID =" inputpass3 "> PRWORCING3" <div> <div> <label> <input type = "checkbox"> ingat saya </label> </div> </div> </div> </div> <div> <div> <typute type = "kirim"> Masuk </button> </div> </div> </div> </form
Kami juga dapat melihat melalui kode bahwa ketika melakukan tata letak formulir, Anda juga dapat menggunakan Col-SM dan Col-SM-Offset untuk tata letak grid !
Di atas adalah analisis komprehensif dari bentuk bentuk bootstrap yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!