Artikel ini pertama -tama akan berbagi dengan Anda cara menggunakan grup tombol . Konten spesifiknya adalah sebagai berikut
1. Grup tombol
1. Grup tombol tunggal
Gunakan .btn-group untuk merangkum beberapa <ngtons> dengan .btn
<div> <button> 1 </button> <button> 2 </button> <buton> 3 </button> </div>
2. Grup Tombol Banyak
Masukkan beberapa <div> ke dalam <div>.
<div> <div> ... </div> <div> ... </div> </div> </div>
3. Grup Tombol Vertikal
Tambahkan .btn-group-vertikal ke .btn-group.
<div> ... </div>
2. Tombol pull-down (dropdown tombol)
contoh
<div> <a data-koggle = "dropdown" href = "#"> Tindakan <span> </span> </a> <ul> <!-tautan menu dropdown-> </ul> </div>
1. Kontrol ukurannya
Juga gunakan .btn-besar, .btn-small, dan .btn-mini untuk mengontrol ukurannya.
2. Tombol pull-down split
<div> <button> Action </attond> <tombol data-kilat = "dropdown"> <span> </span> </button> <ul> <!-tautan menu dropdown-> </ul> </div>
3. Menu yang muncul ke atas
<div> <button> dropup </buttonder> <tombol data-kilatgle = "dropdown"> <span> </span> </button> <ul> <!-tautan menu dropdown-> </ul> </div>
3. Javascript
contoh
Status pemuatan. Tambahkan data-loading-text = "memuat ...".
Salin kode sebagai berikut: <tombol type = "tombol" data-loading-text = "memuat ..."> memuat status </button>
Status beralih. Tambahkan data-soggle = "tombol".
Salin kode sebagai berikut: <tombol type = "tombol" data-kilat = "tombol"> sakelar tunggal </button>
Kotak centang. Tambahkan data-soggle = "tombol-checkbox" setelah kelompok BTN.
<Div Data-koggle = "tombol-checkbox"> <tombol type = "Tombol"> Kiri </button> <tombol type = "tombol"> Middle </button> <tombol type = "tombol"> kanan </button> </div>
Pilihan tunggal. Tambahkan data-soggle = "Tombol-Radio" setelah kelompok BTN.
<Div Data-koggle = "Tombol-Radio"> <tombol type = "Tombol"> Kiri </button> <tombol type = "Tombol"> Middle </button> <tombol type = "tombol"> Kanan </button> </div>
penggunaan
Kode JavaScript memicu status sakelar.
$ (). Tombol ("sakelar")
Anda juga dapat menambahkan atribut data-kilat ke pemicu secara otomatis.
<typon type = "tombol" data-koggle = "tombol"> ... </button>
Gunakan kode JavaScript untuk memicu status pemuatan, dan tombol menampilkan nilai yang ditentukan oleh properti data-loading-teks.
$ (). Tombol ("Memuat")
<typon type = "tombol" data-loading-text = "memuat barang ..."> ... </button>
Catatan: Firefox akan menjaga tombol tidak valid saat halaman dimuat. Penanganan solusi adalah menerapkan AutoComplete = "off" pada tombol.
Gunakan kode JavaScript untuk mereset status tombol.
$ (). Tombol ("Reset")
Reset status tombol dan ubah teks tombol menjadi teks yang ditentukan. Lengkap dalam contoh berikut hanyalah contoh dan dapat diganti.
<tombol Data-complete-text = "Finish!" > ... </button> <script> $ ('. Btn'). Tombol ('Lengkap') </script>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.