Analisis menyeluruh tentang cara menggunakan borang Bootstrap (gaya bentuk)

Analisis menyeluruh tentang cara menggunakan borang Bootstrap (gaya bentuk)_kemahiran javascript

WBOY

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

asal

1464 orang telah melayarinya

1. Borang asas

 <form >
 <div class="form-group">
 <label>邮箱：</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

Salin selepas log masuk

Selain elemen ini, borang juga mempunyai input, pilih, textarea dan elemen lain Dalam rangka kerja Bootstrap, nama kelas `form-control` adalah tersuai, jika elemen ini menggunakan nama kelas "kawalan bentuk" akan mencapai beberapa kesan penyesuaian reka bentuk.

1. Lebar menjadi 100%

2. Tetapkan jidar kelabu muda (#ccc)

3 Penjuru bulat dengan 4px

4 Tetapkan kesan bayang, dan apabila elemen mendapat fokus, kesan bayang dan sempadan akan berubah

5 Tetapkan warna pemegang tempat kepada #999

2. Bentuk Mendatar
Bentuk lalai rangka kerja Bootstrap ialah gaya paparan menegak, tetapi banyak kali kita memerlukan gaya bentuk mendatar (label di sebelah kiri, kawalan borang di sebelah kanan).

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

Salin selepas log masuk

Untuk mencapai kesan bentuk mendatar dalam rangka kerja Bootstrap, dua syarat berikut mesti dipenuhi:
1. Dalam elemen

, gunakan nama kelas ".form-horizontal".
2. Sistem grid yang bekerjasama dengan rangka kerja Bootstrap.

Menggunakan nama kelas ".form-horizontal" pada elemen terutamanya mempunyai fungsi berikut:
1. Tetapkan nilai padding dan margin kawalan borang.
2. Tukar ungkapan "kumpulan bentuk" supaya serupa dengan "baris" sistem grid.

3. Borang sebaris
Kadangkala kita perlu memaparkan semua kawalan borang dalam satu baris

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">邮箱</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

Salin selepas log masuk

Adalah mudah untuk melaksanakan kesan bentuk sedemikian dalam rangka kerja Bootstrap Anda hanya perlu menambah nama kelas ".form-inline" pada elemen

Jika anda menambah label di hadapan input, ia akan menyebabkan input dibalut dalam baris lain. Jika anda mesti menambah label sedemikian dan tidak mahu input dibalut, anda juga perlu meletakkan label dalam bekas "kumpulan-bentuk".

Di atas adalah artikel pertama analisis komprehensif tentang cara menggunakan borang Bootstrap Lebih banyak kandungan akan dikemas kini pada masa hadapan.