Analisis menyeluruh tentang cara menggunakan borang Bootstrap (status kawalan borang)_kemahiran javascript

Artikel ini menganalisis secara menyeluruh cara menggunakan borang Bootstrap Artikel ini memfokuskan pada tiga situasi keadaan kawalan borang Bootstrap boleh merujuk kepada

1 Keadaan fokus dicapai melalui pseudo-class ":focus". Keadaan fokus kawalan borang dalam rangka kerja Bootstrap memadamkan gaya lalai garis besar dan menambah semula kesan bayang-bayang.

<form role="form" class="form-horizontal">
 <p class="form-group">
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
 </p>
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
 </p>
 </p>
</form>

Keadaan dilumpuhkan

Keadaan dilumpuhkan kawalan borang dalam rangka kerja Bootstrap dilaksanakan dengan cara yang sama seperti keadaan dilumpuhkan borang biasa Tambahkan atribut "dilumpuhkan" pada kawalan borang yang sepadan.

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
 <fieldset disabled>
 <p class="form-group">
 <label for="disabledTextInput">禁用的输入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </p>
 <p class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可选择</option>
 </select>
 </p>
 <p class="checkbox">
 <label>
 <input type="checkbox"> 无法选择
 </label>
 </p>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

3. Status pengesahan

Semasa membuat borang , tidak dapat dielakkan untuk melakukan pengesahan borang. Ia juga perlu untuk menyediakan gaya status pengesahan, dan kesan ini juga disediakan dalam rangka kerja Bootstrap. 1. .telah-amaran: Status amaran (kuning)
2. .telah-ralat: Status ralat (merah)
3. .telah-kejayaan: Status kejayaan (hijau)
Menggunakan Anda hanya perlu menambah nama kelas status

<form role="form">
 <p class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </p>
 <p class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </p>
 <p class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </p>
</form>

pada bekas kumpulan borang masih Jika anda ingin belajar secara mendalam, anda boleh klik di sini untuk belajar, dan berikut adalah dua topik menarik untuk anda: Tutorial pembelajaran Bootstrap Tutorial praktikal Bootstrap

Di atas adalah pengenalan terperinci kepada status kawalan borang Bootstrap , dan akan ada lebih banyak kandungan kemudian dikemas kini secara berterusan, saya harap semua orang akan terus memberi perhatian.