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 B ia dilaksanakan melalui:aktif. Untuk elemen ia dilaksanakan melalui .aktif. Walau bagaimanapun, anda juga boleh menggunakan .aktif bersama-sama dengan
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 .

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

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

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