Rumah  >  Artikel  >  hujung hadapan web  >  Apakah butang gaya bootstrap?

Apakah butang gaya bootstrap?

青灯夜游
青灯夜游asal
2021-12-28 15:39:455817semak imbas

Butang gaya Bootstrap termasuk: 1. butang kelabu bulat “.btn”; 2. butang besar “.btn-lg”; " butang ultra-kecil; 5. ".btn-block" butang peringkat blok; 6. ".disabled" butang gaya dilumpuhkan, dsb.

Apakah butang gaya bootstrap?

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Ringkasan gaya butang Bootstrap

Gaya kelas Penerangan
.btn Butang kelabu bulat, untuk menjadikan butang kurang tajam, butang kami harus menggunakan gaya ini untuk mendapatkan bucu bulat, dan kemudian menutupnya dengan ciri lain.
.btn-default Butang lalai/standard, yang putih berwarna kelabu apabila ditekan.
.btn-primary Gaya butang asal (tidak dikendalikan), ini sepadan dengan aktif, iaitu gaya butang yang belum dikendalikan, semasa aktif ialah Gaya yang sepadan dipaparkan apabila butang diklik.
.btn-success Aksi yang berjaya
.btn-info Butang gaya ini yang boleh digunakan untuk memaparkan maklumat
.btn-warning Butang yang memerlukan operasi berhati-hati
.btn- bahaya Tindakan butang yang mewakili tindakan berbahaya
.btn-link Menjadikan butang kelihatan seperti pautan (masih mengekalkan tingkah laku butang )
.btn-lg Butang besar
.btn-sm Butang kecil
.btn-xs Butang super kecil
.btn-block Butang tahap blok ( menghulurkan hingga 100% daripada lebar elemen induk)
.aktif Butang diklik dan butang itu akan mengambil rupa yang ditekan (latar belakang gelap, sempadan berwarna gelap, bayang-bayang).
.dilumpuhkan Melumpuhkan butang, menjadikan warna 50% lebih cerah dan kehilangan kecerunan.

Kumpulan butang asas

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

Apakah butang gaya bootstrap?

Saiz butang

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Button 1</button>
	<button type="button" class="btn btn-default">Button 2</button>
	<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Button 4</button>
	<button type="button" class="btn btn-default">Button 5</button>
	<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Button 7</button>
	<button type="button" class="btn btn-default">Button 8</button>
	<button type="button" class="btn btn-default">Button 9</button>
</div>

Apakah butang gaya bootstrap?

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: Tutorial Asas Bootstrap! !

Atas ialah kandungan terperinci Apakah butang gaya bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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 sebelumnya:Adakah bootstrap bahasa?Artikel seterusnya:Adakah bootstrap bahasa?