Cara menggunakan button bootstrap

Button adalah bagian integral dari situs web dan aplikasi, yang digunakan untuk berbagai keperluan seperti submit atau mereset form HTML, melakukan tindakan interaktif seperti menunjukkan atau menyembunyikan sesuatu di halaman web dengan mengklik tombol, mengarahkan pengguna ke halaman lain, dan sebagainya. Bootstrap menyediakan cara yang cepat dan mudah untuk membuat dan meng-customize button.

1. Bootstrap Button Style

Button style dapat diterapkan ke elemen apa pun, namun ini diterapkan secara normal ke elemen , , dan untuk rendering.

Contoh cara membuat button style di Bootstrap :

Primary Secondary Success Danger Warning Info    Dark Light Link

Hasilnya :

2. Bootstrap Outline Button

Kita juga dapat membuat outline button dengan mengganti kelas button modifier, seperti ini :

    
        
        
        
    

    
        
        Primary
        Secondary
        Success
        Danger
        Warning
        Info
        Dark
        Light

    

Hasilnya :

3. Ukuran Button

Bootstrap memberi kita opsi untuk memperbesar button ke atas atau ke bawah, kita dapat membuat button lebih besar atau lebih kecil dengan menambahkan kelas tambahan .btn-lg atau .btn-sm, seperti ini :

    
        
        
        
    

    
        
        Large
        Default
        Small

    

Hasilnya :

Baca Juga  Tutorial Laravel 8 #7 : Template Blade Laravel

Kita juga dapat membuat button level blok (tombol yang menutupi lebar penuh elemen induk) dengan menambahkan kelas tambahan .btn-blok ke tombol, seperti ini :

    
        
        
        
    

    
        
        Block level button
        Block level button

    

Hasilnya :

4. Disabled Button

Terkadang kita perlu menonaktifkan button untuk alasan tertentu, misalnya pengguna (user) jika tidak memenuhi syarat untuk melakukan tindakan khusus ini atau ingin memastikan bahwa pengguna harus melakukan semua tindakan lain yang diperlukan sebelum melanjutkan ke tindakan khusus ini.

a. Membuat Disabled Button Menggunakan Button dan Input Elemen

Button yang dibuat melalui tag atau dapat dinonaktifkan dengan menambahkan atribut disabled ke masing-masing elemen.

Contoh :

Primary button Button

Hasilnya :

b. Membuat Disabled Button Menggunakan Element Anchor

Button yang dibuat melalui tag dapat dinonaktifkan (disabled) dengan menambahkan kelas .disabled, seperti ini :

    
        
        
        
    

    
        

        
        Primary link
        Link

    

Hasilnya :

5. Bootstrap Active Button

Kita dapat menerapkan kelas .active untuk memaksa tombol-tombolnya terlihat aktif (misal ketika ditekan). Biasanya kita tidak perlu menambahkan kelas ini ke dalam button, karena keadaan aktif mereka secara otomatis ditata oleh Bootstrap menggunakan CSS :active pseudo-class.

Baca Juga  Memasang Fans Page Facebook di WordPress dengan Facebook Page Plugin

Contoh :

    
        
        
        
    

    
        

        
        Primary link
        Link

    

Hasilnya :

6. Spinner Button

Bootstrap dapat memasukkan ikon spinner dalam sebuah button untuk menunjukkan status pemuatan di aplikasi.

Apa warna dari tombol dengan class primary pada bootstrap?

Class apa yang digunakan untuk membuat button yang besar?

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

Kelas apa yang digunakan dalam bootstrap untuk mengelompokkan Button dalam button group?