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 B
<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 .
<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
<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
Elemen pautan
Tambahkan kelas .disabled untuk .
<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 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 ,
<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
Atas sebab lain, pepijat Firefox ini menghalang kami daripada menetapkan ketinggian garisan untuk butang berdasarkan teg 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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
