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
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

ke dalam

.

<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:

Memuatkan keadaan

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

Salin kod Kod adalah seperti berikut:

Togol Tunggal

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.
… 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> 

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

Label berkaitan：

Bootstrap按钮组 Bootstrap下拉按钮

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

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

javascript - Sila beritahu saya tentang masalah menukar fungsi panggil balik jq untuk menjanjikan pelaksanaan

daripada 1970-01-01 08:00:00

0

0

0

javascript - Kekeliruan tentang menghantar parameter dalam tindak balas

daripada 1970-01-01 08:00:00

0

0

0

javascript - gambar rajah tindanan atribut js

daripada 1970-01-01 08:00:00

0

0

0

javascript - aplikasi halaman tunggal angularjs Bagaimana untuk menyelesaikan masalah tidak menatal ke bahagian atas halaman selepas halaman menatal ke bawah dan navigasi melompat ke halaman baharu?

daripada 1970-01-01 08:00:00

0

0

0

javascript - Apabila membina projek dengan vue-cli, anda perlu memperkenalkan fail js dan CSS statik tempatan Bagaimana untuk membungkusnya?

daripada 1970-01-01 08:00:00

0

0

0

Topik-topik yang berkaitan

Lagi>

• Apakah program yang boleh dibangunkan dengan php
• 0x80070002 penyelesaian
• Syiling emas Toutiao hari ini bersamaan dengan 1 yuan
• Bagaimana untuk menyelesaikan masalah perisian antivirus win11 tidak boleh dibuka
• Apakah maksud memformat telefon mudah alih?
• Bagaimana untuk membenamkan gaya CSS dalam HTML
• vscode
• Apakah yang perlu saya lakukan jika tetapan mula semula bahasa Cina vscode tidak berkuat kuasa?