Artikel ini akan menginstruksikan Anda:
- Bagaimana Cara Membuat Tombol di Bootstrap?
- Bagaimana Cara Membuat Tombol Outline di Bootstrap?
- Bagaimana Cara Menyesuaikan Ukuran Tombol Bootstrap?
- Bagaimana Cara Membuat Tombol Tingkat Blok di Bootstrap?
- Bagaimana Cara Membuat Tombol Status Aktif di Bootstrap?
- Bagaimana Cara Membuat Tombol Status Dinonaktifkan di Bootstrap?
Bagaimana Cara Membuat Tombol di Bootstrap?
Bootstrap “ btn ” class digunakan untuk membuat tombol. Untuk menambahkan tombol bergaya, Anda dapat menggunakan tombol “ btn ” dengan kelas warna, seperti “ btn-sukses ” untuk membuat tombol hijau.
Dalam HTML, '
Untuk konsep yang jelas, lihat contoh di bawah ini.
Contoh
Di file HTML, ikuti langkah-langkah untuk membuat tombol menggunakan berbagai tag:
- Menambahkan '
' dan ' ' elemen dan tetapkan ' btn ' dan ' btn-primary ” kelas. - Kemudian, tambahkan “
” tag dengan jenis “ tombol ”. Tetapkan ' btn ' dan ' btn-sukses ” untuk menata dua tombol pertama berwarna biru, dan yang ketiga berwarna hijau:
< sebuah kelas = 'btn btn-primer' href = '#' > Membuka < / sebuah >
< memasukkan Tipe = 'tombol' kelas = 'btn btn-sukses' nilai = 'Mencari' >
Keluaran
Bagaimana Cara Membuat Tombol Outline di Bootstrap?
Untuk menambahkan garis besar tombol, Bootstrap “ btn-garis besar-* ” kelas digunakan. Dalam sintaksisnya, “ * ” di sini mewakili warna garis luar. Contohnya, ' btn-garis besar-bahaya ' menempatkan garis merah, ' btn-outline-primer ” menyetel garis biru, dan banyak lagi.
Analisis kode yang diberikan di bawah ini:
< tombol Tipe = 'tombol' kelas = 'btn btn-garis besar-primer' >Berikutnya< / tombol >< tombol Tipe = 'tombol' kelas = 'btn btn-garis besar-bahaya' > Batal < / tombol >
< tombol Tipe = 'tombol' kelas = 'btn btn-garis besar-sukses' >Sukses< / tombol >
Dapat diamati bahwa “ Lanjut ” memiliki garis tepi biru, tombol “ Membatalkan ” dengan garis tepi merah, dan tombol “ Kesuksesan ” telah diberi gaya dengan garis tepi hijau:
Bagaimana Cara Menyesuaikan Ukuran Tombol Bootstrap?
Beberapa kelas Bootstrap diterapkan untuk menyesuaikan ukuran tombol, seperti:
- “ btn-lg ” kelas diterapkan untuk membuat tombol besar. Kelas ini dapat meningkatkan ukuran font dan padding.
- “ btn-md ” membuat tombol berukuran sedang.
- “ btn-sm ” membuat tombol kecil.
Contoh
Sekarang, kita akan membuat tiga tombol dengan ukuran berbeda dan nama yang cukup jelas:
< tombol Tipe = 'tombol' kelas = 'btn btn-btn-lg sekunder' >Besar< / tombol >< tombol Tipe = 'tombol' kelas = 'btn btn-peringatan btn-md' >sedang< / tombol >
< tombol Tipe = 'tombol' kelas = 'btn btn-bahaya btn-sm' > Kecil < / tombol >
Keluaran
Bagaimana Cara Membuat Tombol Tingkat Blok di Bootstrap?
Tombol tingkat blok adalah tombol yang memiliki ukuran lebar penuh. Untuk membuat tombol tingkat blok, tombol “ btn-block ” kelas digunakan sebagai berikut
< tombol Tipe = 'tombol' kelas = 'btn btn-peringatan btn-blok' > tombol < / tombol >< tombol Tipe = 'tombol' kelas = 'btn btn-blok btn sekunder' >tombol< / tombol >
Keluaran
Bagaimana Cara Membuat Tombol Status Aktif di Bootstrap?
Tombol status aktif mengacu pada tombol yang sedang aktif. Tombol-tombol ini sedikit lebih gelap dari biasanya. Untuk membuat tombol seperti itu, Bootstrap “ aktif ” kelas digunakan.
Contoh
Kode di bawah ini membuat dua tombol. Yang pertama dalam keadaan normal sedangkan yang lainnya diterapkan dengan “ aktif ' kelas:
< tombol Tipe = 'tombol' kelas = 'btn btn-sukses' >Sukses< / tombol >< tombol Tipe = 'tombol' kelas = 'btn btn-sukses aktif' >Sukses< / tombol >
Keluaran
Bagaimana Cara Membuat Tombol Status Dinonaktifkan di Bootstrap?
Tombol status nonaktif mengacu pada tombol yang tidak dapat diklik dan tidak dapat digunakan. Di Bootstrap, ' dengan disabilitas ” class digunakan untuk membuat tombol status nonaktif. “ dengan disabilitas Atribut ” juga dapat digunakan untuk tujuan ini.
Contoh
Lihat contoh yang diberikan di bawah ini:
- Tombol pertama tidak dalam keadaan nonaktif.
- Yang kedua menggunakan ' dengan disabilitas ” untuk membuat tombol status nonaktif.
- Yang ketiga menggunakan “ dengan disabilitas ” atribut:
< tombol Tipe = 'tombol' kelas = 'btn btn-sukses dinonaktifkan' >Sukses< / tombol >
< tombol Tipe = 'tombol' kelas = 'btn btn-sukses' dinonaktifkan>Sukses< / tombol >
Keluaran
Kami telah membahas berbagai aspek yang terkait dengan tombol Bootstrap dan penataannya di CSS.
Kesimpulan
“ btn ” digunakan untuk membuat tombol Bootstrap dengan desain sederhana. Untuk membuat tombol berwarna dan kerangka, tombol “ btn-* ' dan ' btn-garis besar-* ” kelas digunakan di mana “ * ” melambangkan kelas warna apa pun. Contohnya, ' btn-warning ” membuat tombol kuning, “ btn-outline-warning ” membuat tombol bergaris kuning, dan banyak lagi. Untuk membuat tombol aktif atau nonaktif, kelas 'aktif' dan 'nonaktif' masing-masing diterapkan. Posting ini memberikan panduan komprehensif tentang tombol Bootstrap.