Analisis menyeluruh tentang cara menggunakan borang Bootstrap (kawalan borang)

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

WBOY

Lepaskan： 2016-05-16 15:30:25

asal

1309 orang telah melayarinya

1. Input kotak input

Kotak input satu baris, kotak input teks biasa, iaitu nilai atribut jenis input ialah teks.

Apabila menggunakan input dalam Bootstrap, anda juga mesti menambah jenis Jika jenis jenis tidak dinyatakan, anda tidak akan dapat mendapatkan gaya yang betul, kerana rangka kerja Bootstrap menggunakan input[type="?"]<.>

(di mana ? mewakili jenis jenis, seperti jenis teks, yang sepadan dengan input[type="text"]) untuk menentukan gaya.

Untuk menjadikan gaya kawalan betul dalam pelbagai gaya bentuk, anda perlu menambah nama kelas ".form-control".

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

Salin selepas log masuk

2. Pilih kotak pilihan lungsur turun

Penggunaan kotak pilihan lungsur turun dalam rangka kerja Bootstrap adalah konsisten dengan yang asal Untuk pemilihan berbilang baris, tetapkan nilai atribut berbilang kepada berbilang.

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

Salin selepas log masuk

3. Kawasan teks kawasan teks

Medan teks digunakan dengan cara yang sama seperti baris tetapan boleh menentukan ketinggiannya dan kol tetapan boleh menetapkan lebarnya.

Tetapi jika nama kelas ".form-control" ditambahkan pada elemen textarea, tidak perlu menetapkan atribut cols.

Kerana lebar kawalan borang dalam gaya "kawalan borang" dalam rangka kerja Bootstrap ialah 100% atau auto.

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

Salin selepas log masuk

4. Kotak semak dan butang radio

1. Kedua-dua kotak pilihan dan radio dibalut dengan label

2. Kotak semak dan label diletakkan dalam bekas bernama ".checkbox"
3. Radio dan tag label diletakkan di dalam bekas bernama ".radio"

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

Salin selepas log masuk

5. Kotak semak dan butang radio disusun secara mendatar
1. Jika kotak semak perlu disusun secara mendatar, cuma tambahkan nama kelas ".checkbox-inline" pada label 2. Jika radio perlu disusun secara mendatar, anda hanya perlu menambah nama kelas ".radio-inline" pada label

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

Salin selepas log masuk

6. Saiz kawalan bentuk
Rangka kerja Bootstrap juga menyediakan dua nama kelas yang berbeza untuk mengawal ketinggian kawalan borang. Dua nama kelas ini ialah: 1. input-sm: Jadikan kawalan lebih kecil daripada saiz biasa
2. input-lg: Jadikan kawalan lebih besar daripada saiz biasa
Kedua-dua kelas ini sesuai untuk input, textarea dan kawalan pilih dalam borang.

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

Salin selepas log masuk

Di atas ialah cara menggunakan kawalan borang Bootstrap Lebih banyak kandungan akan dikemas kini pada masa hadapan.