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

1. Sokongan berbilang tag

Selain menggunakan elemen teg semasa membuat butang, anda juga boleh menggunakan teg

Begitu juga, apabila membuat butang dalam rangka kerja Bootstrap, sebagai tambahan kepada elemen label yang baru disebut, anda juga boleh menggunakannya pada elemen label lain Satu-satunya perkara yang perlu anda perhatikan ialah menambah kelas pada elemen label semasa membuat butang. Namakan ".btn".

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

2. Gaya tersuai

Gaya butang yang berbeza dalam rangka kerja Bootstrap dilaksanakan melalui nama kelas yang berbeza.

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

3. Saiz butang

Dalam rangka kerja Bootstrap, saiz butang juga boleh disesuaikan.

Tiga nama kelas disediakan dalam rangka kerja Bootstrap untuk mengawal saiz butang:

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

4. Butang sekat

Rangka kerja Bootstrap menyediakan nama kelas ".btn-block". Menggunakan nama kelas ini untuk butang membolehkan butang mengisi keseluruhan bekas dan butang itu tidak akan mempunyai sebarang nilai padding atau margin. Dalam amalan, butang jenis ini sering dipanggil butang blok.

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

5. Keadaan dilumpuhkan butang

Dalam rangka kerja Bootstrap, terdapat dua cara untuk melumpuhkan butang:

　Kaedah 1: Tambah atribut yang dilumpuhkan dalam teg

　Kaedah 2: Tambahkan nama kelas "dilumpuhkan" dalam tag elemen

　Perbezaan utama antara keduanya ialah:

Gaya ".disabled" tidak akan melumpuhkan gelagat lalai butang, seperti gelagat serah dan set semula.

Menambah atribut "dilumpuhkan" pada teg elemen boleh melumpuhkan gelagat lalai elemen.

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

Hari ini saya akan menambah beberapa pengetahuan baharu untuk anda: Maklumat segera borang Bootstrap

Biasanya apabila membuat pengesahan borang, maklumat segera yang berbeza harus disediakan. Kesan ini juga disediakan dalam rangka kerja Bootstrap. Gaya "help-block" digunakan untuk memaparkan maklumat segera dalam blok dan di bahagian bawah kawalan.

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

Di atas adalah pengenalan terperinci kepada butang borang Bootstrap Lebih banyak kandungan akan dikemas kini pada masa hadapan.