Penjelasan terperinci tentang kumpulan butang Bootstrap komponen JS dan kemahiran button_javascript drop-down

Artikel ini mula-mula akan berkongsi dengan anda cara menggunakan Kumpulan Butang Kandungan khusus adalah seperti berikut

1. Kumpulan Butang

1. Kumpulan butang tunggal
Gunakan .btn-group untuk merangkum berbilang 07cb10094d7fc1aeafbde86dbf86ce42
dengan .btn

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

2. Kumpulan butang berbilang
Letakkan berbilang 684627b214c81cfd3ae37c425ce03d42 ke dalam efce18deda7b1499fa22da873b78ebdc.

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

3. Kumpulan butang menegak
Tambahkan .btn-kumpulan-menegak pada .btn-kumpulan.

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

2. Butang Jatuh turun

Contoh

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1. Saiz kawalan
Juga gunakan .btn-large, .btn-small, dan .btn-mini untuk mengawal saiz.

2. Pisahkan butang lungsur turun

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. Menu yang muncul ke atas

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. JavaScript

Contoh
Memuatkan status. Tambah data-loading-text="Loading...".

Salin kod Kod adalah seperti berikut:

4757df588322808470fb960e73ea116bMemuatkan keadaan65281c5ac262bf6d81768915a4a77ac0

Tukar status. Tambah data-toggle="button".

Salin kod Kod adalah seperti berikut:

cdb79c501104136df062df1ef56efd9cTogol Tunggal65281c5ac262bf6d81768915a4a77ac0

Kotak semak. Tambahkan data-toggle="buttons-checkbox" selepas btn-group.

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div> 

Pilihan tunggal. Tambah data-toggle="buttons-radio" selepas btn-group.

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div> 

Penggunaan
Kod JavaScript mencetuskan keadaan suis.
$().butang("togol")
Anda juga boleh menambah atribut togol data untuk mencetuskan secara automatik.
80de50797c035e4b05e5c13cbd950a75…65281c5ac262bf6d81768915a4a77ac0 Gunakan kod JavaScript untuk mencetuskan keadaan pemuatan dan butang memaparkan nilai yang ditentukan oleh atribut data-loading-text.

$().butang("memuatkan")

cf8abd368a2a023f5909892da2d92c6d...65281c5ac262bf6d81768915a4a77ac0

Nota: Firefox akan memastikan butang dilumpuhkan semasa halaman dimuatkan. Penyelesaiannya adalah dengan menggunakan autolengkap="mati" pada butang.
Tetapkan semula keadaan butang menggunakan kod JavaScript.

$().butang("set semula")
Tetapkan semula keadaan butang dan tukar teks butang kepada teks yang ditentukan. Lengkap dalam contoh berikut hanyalah contoh dan boleh diganti.

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script> 

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.