Butang yang Bootstrap mesti pelajari setiap hari (1)_kemahiran javascript

Artikel ini menerangkan terutamanya gaya butang.
1. Pilihan
2. Saiz
3.Status aktiviti
4. Keadaan kurang upaya
5. Tag Html yang boleh digunakan sebagai butang

Pilihan

Gunakan kelas yang disenaraikan di atas untuk membuat butang gaya dengan cepat.

 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">链接</button>

Saiz
Perlukan butang untuk saiz yang berbeza? Gunakan .btn-lg, .btn-sm, .btn-xs untuk mendapatkan butang dengan saiz yang berbeza.

<p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Dengan menambahkan .btn-block pada butang, ia boleh mengisi 100% lebar nod induk dan butang itu juga menjadi elemen blok.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Status aktiviti
Apabila butang aktif, ia kelihatan ditekan (latar belakang lebih gelap, jidar lebih gelap, bayang terbina dalam). Untuk elemen Bbb9345e55eb71822850ff156dfde57c8 ia dilaksanakan melalui:aktif. Untuk elemen 3499910bf9dac5ae3c52d5ede7383485 ia dilaksanakan melalui .aktif. Walau bagaimanapun, anda juga boleh menggunakan .aktif bersama-sama dengan 07cb10094d7fc1aeafbde86dbf86ce42
Elemen butang
Memandangkan :active ialah keadaan pseudo, tidak perlu menambahnya, tetapi anda boleh menambah .active apabila anda perlu menunjukkan rupa yang sama.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Elemen pautan
Anda boleh menambah kelas .aktif untuk 3499910bf9dac5ae3c52d5ede7383485.

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Anda boleh membandingkannya dengan butang di atas.

Status dilumpuhkan
Dengan memudarkan warna latar belakang butang sebanyak 50%, anda boleh mencipta kesan tidak boleh diklik.
Elemen butang
Tambahkan atribut yang dilumpuhkan pada 07cb10094d7fc1aeafbde86dbf86ce42.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Anda boleh meletakkan tetikus pada butang dan klik untuk melihat kesannya.
Keserasian merentas pelayar

Jika anda menambah atribut yang dilumpuhkan pada 07cb10094d7fc1aeafbde86dbf86ce42, Internet Explorer 9 dan versi penyemak imbas yang lebih rendah akan melukis teks dalam butang kelabu dengan bayang-bayang yang menjijikkan pada masa ini.
Elemen pautan
Tambahkan kelas .disabled untuk 3499910bf9dac5ae3c52d5ede7383485.

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Ini adalah perbandingan dengan butang di atas.
Kami menggunakan .disabled sebagai kelas alat, sama seperti kelas .aktif, jadi tidak perlu menambah awalan.
Fungsi pautan tidak terjejas

Kelas yang dinyatakan di atas hanya mengubah rupa 3499910bf9dac5ae3c52d5ede7383485 Dalam dokumen ini, kami telah melumpuhkan fungsi lalai pautan melalui kod JavaScript.

Teg html yang boleh digunakan sebagai butang
Anda boleh menambah kelas butang pada 3499910bf9dac5ae3c52d5ede7383485, 07cb10094d7fc1aeafbde86dbf86ce42 atau d5fd7aea971a85678ba271703566ebfd

 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

Prestasi merentas penyemak imbas

Sebagai amalan terbaik, kami amat mengesyorkan menggunakan elemen 07cb10094d7fc1aeafbde86dbf86ce42 apabila boleh untuk memastikan penggayaan yang konsisten merentas penyemak imbas.

Atas sebab lain, pepijat Firefox ini menghalang kami daripada menetapkan ketinggian garisan untuk butang berdasarkan teg d5fd7aea971a85678ba271703566ebfd yang mengakibatkan ketinggiannya tidak konsisten dengan butang lain pada Firefox.
Kandungan utama bahagian ini ialah gaya butang Anda boleh menjalankan gaya ini secara fleksibel. Saya harap ia akan membantu pembelajaran anda.