Artikel ini akan mengarahkan anda:
- Bagaimana untuk membuat butang dalam Bootstrap?
- Bagaimana untuk Membuat Butang Outline dalam Bootstrap?
- Bagaimana untuk Melaraskan Saiz Butang Bootstrap?
- Bagaimana untuk Membuat Butang Tahap Blok dalam Bootstrap?
- Bagaimana untuk Mencipta Butang Keadaan Aktif dalam Bootstrap?
- Bagaimana untuk Mencipta Butang Keadaan Kurang Upaya dalam Bootstrap?
Bagaimana untuk membuat butang dalam Bootstrap?
Bootstrap ' btn ” kelas digunakan untuk mencipta butang. Untuk menambah butang gaya, anda boleh menggunakan ' btn kelas ” dengan kelas warna, seperti “ btn-berjaya ” untuk mencipta butang hijau.
Dalam HTML, '
Untuk konsep yang jelas, lihat contoh di bawah.
Contoh
Dalam fail HTML, ikuti langkah untuk membuat butang menggunakan teg yang berbeza:
- Tambah '
” dan “ 'elemen dan berikannya' btn ” dan “ btn-utama ” kelas. - Kemudian, tambahkan ' 'tag dengan jenis' butang ”. Tetapkan ia ' btn ” dan “ btn-berjaya ” untuk menggayakan sebagai dua butang pertama sebagai biru, dan yang ketiga sebagai hijau:
< a kelas = 'btn btn-utama' href = '#' > Buka < / a >
< input menaip = 'butang' kelas = 'btn btn-berjaya' nilai = 'Cari' >
Pengeluaran
Bagaimana untuk Membuat Butang Outline dalam Bootstrap?
Untuk menambah garis besar butang, Bootstrap “ btn-outline-* ” kelas digunakan. Dalam sintaksnya, ' * ” di sini mewakili warna garis besar. Sebagai contoh, ' btn-garis-bahaya 'meletakkan garis besar merah,' btn-garis-utama ” menetapkan garis besar biru dan banyak lagi.
Analisis kod yang diberikan di bawah:
< butang menaip = 'butang' kelas = 'btn btn-garis-utama' >Seterusnya< / butang >< butang menaip = 'butang' kelas = 'btn btn-garis-bahaya' >Batalkan< / butang >
< butang menaip = 'butang' kelas = 'btn btn-garis-kejayaan' >Kejayaan< / butang >
Dapat diperhatikan bahawa ' Seterusnya butang ' mempunyai garis besar biru, ' Batal butang ” dengan garis besar merah, dan “ Kejayaan butang ” telah digayakan dengan garis besar hijau:
Bagaimana untuk Melaraskan Saiz Butang Bootstrap?
Beberapa kelas Bootstrap digunakan untuk melaraskan saiz butang, seperti:
- “ btn-lg ” kelas digunakan untuk mencipta butang besar. Kelas ini boleh meningkatkan saiz fon dan padding.
- “ btn-md ” mencipta butang bersaiz sederhana.
- “ btn-sm ” mencipta butang kecil.
Contoh
Sekarang, kami akan mencipta tiga butang dengan saiz yang berbeza dan nama yang jelas:
< butang menaip = 'butang' kelas = 'btn btn-secondary btn-lg' >Besar< / butang >< butang menaip = 'butang' kelas = 'btn btn-amaran btn-md' >sederhana< / butang >
< butang menaip = 'butang' kelas = 'btn btn-bahaya btn-sm' >Kecil< / butang >
Pengeluaran
Bagaimana untuk Membuat Butang Tahap Blok dalam Bootstrap?
Butang peringkat blok ialah butang yang memegang saiz lebar penuh. Untuk mencipta butang peringkat blok, ' btn-blok ” kelas digunakan seperti berikut
< butang menaip = 'butang' kelas = 'btn btn-amaran btn-block' > butang< / butang >< butang menaip = 'butang' kelas = 'btn btn-sekunder btn-blok' >butang< / butang >
Pengeluaran
Bagaimana untuk Mencipta Butang Keadaan Aktif dalam Bootstrap?
Butang keadaan aktif merujuk kepada butang yang sedang aktif. Butang ini lebih gelap sedikit daripada biasa. Untuk mencipta butang sedemikian, Bootstrap “ aktif ” kelas digunakan.
Contoh
Kod di bawah mencipta dua butang. Yang pertama berada dalam keadaan normal manakala yang satu lagi digunakan dengan “ aktif ” kelas:
< butang menaip = 'butang' kelas = 'btn btn-berjaya' >Kejayaan< / butang >< butang menaip = 'butang' kelas = 'btn btn-kejayaan aktif' >Kejayaan< / butang >
Pengeluaran
Bagaimana untuk Mencipta Butang Keadaan Kurang Upaya dalam Bootstrap?
Butang keadaan dilumpuhkan merujuk kepada butang yang tidak boleh diklik dan tidak boleh digunakan. Dalam Bootstrap, ' kurang upaya ” kelas digunakan untuk mencipta butang keadaan dilumpuhkan. ' kurang upaya ” atribut juga boleh digunakan untuk tujuan ini.
Contoh
Lihat contoh yang disediakan di bawah:
- Butang pertama tidak berada dalam keadaan dilumpuhkan.
- Yang kedua menggunakan ' kurang upaya ” kelas untuk mencipta butang keadaan dilumpuhkan.
- Yang ketiga menggunakan ' kurang upaya ” atribut:
< butang menaip = 'butang' kelas = 'btn btn-kejayaan dilumpuhkan' >Kejayaan< / butang >
< butang menaip = 'butang' kelas = 'btn btn-berjaya' dilumpuhkan>Kejayaan< / butang >
Pengeluaran
Kami telah merangkumi pelbagai aspek yang berkaitan dengan butang Bootstrap dan penggayaannya dalam CSS.
Kesimpulan
' btn kelas ” digunakan untuk mencipta butang Bootstrap dengan reka bentuk yang ringkas. Untuk membuat butang berwarna dan garis besar, ' btn-* ” dan “ btn-outline-* kelas ' digunakan di mana ' * ” melambangkan mana-mana kelas warna. Sebagai contoh, ' btn-amaran ' mencipta butang kuning, ' btn-garis-amaran ” mencipta butang bergaris kuning, dan banyak lagi. Untuk menjadikan butang aktif atau dilumpuhkan, kelas 'aktif' dan 'dilumpuhkan' digunakan, masing-masing. Siaran ini memberikan panduan komprehensif tentang butang Bootstrap.