Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang kumpulan butang Bootstrap komponen JS dan kemahiran button_javascript drop-down

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 09:00:21
asal
3782 orang telah melayarinya

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
dengan .btn

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 
Salin selepas log masuk

2. Kumpulan butang berbilang
Letakkan berbilang

ke dalam
.

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 
Salin selepas log masuk

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

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 
Salin selepas log masuk

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> 
Salin selepas log masuk

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> 
Salin selepas log masuk

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> 
Salin selepas log masuk

3. JavaScript

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

Salin kod Kod adalah seperti berikut:

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

Salin kod Kod adalah seperti berikut:

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> 
Salin selepas log masuk

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> 
Salin selepas log masuk

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


$().butang("memuatkan")


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> 
Salin selepas log masuk
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan