简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

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

WBOY
Lepaskan： 2016-05-16 09:00:21
asal
3674 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.
Label berkaitan：
Bootstrap按钮组 Bootstrap下拉按钮
sumber：php.cn
Artikel sebelumnya：Cara menggunakan AngularJs untuk membina sistem pengurusan kebenaran [Simple]_AngularJS Artikel seterusnya：Penjelasan terperinci tentang kemahiran menu lungsur butang Bootstrap component_javascript
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
Artikel terbaru oleh pengarang
Isu terkini
sql groupby tidak berfungsi, saya mahu kumpulan mengikut code_branch -&gt;pilih('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameasc...
daripada 2024-04-06 19:24:49
0
2
488
Kumpulkan hasil MySQL mengikut ID untuk menggelung Saya mempunyai jadual dengan data penerbangan dalam mysql. Saya sedang menulis kod php yan...
daripada 2024-04-06 17:27:56
0
1
406
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Cara terbaik untuk melaksanakan penukaran tiga keadaan dalam tindak balas? Saya sedang mencipta beberapa butang dalam React yang mencetuskan perubahan keadaan dari s...
daripada 2024-04-06 13:51:32
0
1
418
Cara mencetak nilai kotak pilihan yang dipilih selepas penyerahan Ini ialah senarai kotak pilihan saya dan butang yang saya perlukan untuk menyerahkan data....
daripada 2024-04-06 13:07:43
0
2
337
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！