Bootstrap's Pengaturan Default
Bentuk kontrol individu secara otomatis menerima beberapa styling global dengan Bootstrap .
Semua tekstual <input>, <textarea> , dan <select> elemen dengan class="form-control" diatur ke width: 100%; secara default.
Aturan standar untuk Bootstrap bentuk:
- Tambahkan role="form" ke <form> elemen (membantu meningkatkan aksesibilitas untuk orang-orang menggunakan pembaca layar)
- Bungkus label dan bentuk kontrol dalam <div> elemen dengan class="form-group" (yang dibutuhkan untuk jarak optimal)
- Tambahkan class="form-control" untuk semua tekstual <input>, <textarea> , dan <select> elemen
Contoh berikut membuat bentuk Bootstrap sederhana dengan dua bidang input, satu kotak centang, dan sebuah tombol submit:
Form Bootstrap Contoh
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Cobalah sendiri " <form> Kelas
| Kelas | Deskripsi | Contoh |
|---|---|---|
| .form-inline | Membuat <form> kiri-blok dengan kontrol inline-block (ini hanya berlaku untuk bentuk dalam viewports yang setidaknya 768px lebar) | Cobalah |
| .form-horizontal | Sejalan label dan kelompok kontrol bentuk dalam tata letak horisontal | Cobalah |