Belajar Bootstrap Part 4 Membuat Button Dengan Bootstrap
Assalamualaikum Wr. Wb.
Hai Sobat, Pada kesempatan kali ini saya akan menjelaskan tentang penggunaan bootstrap untuk membuat sebuat tombol atau biasa dikenal dengan button. Berikut penjelasannya.
PENGERTIAN
Bootstrap adalah sebuah framework CSS yang berfungsi untuk membuat tampilan website menjadi Responsive atau dapat menyesuaikan pada semua ukuran layar monitor. Pada Bootstrap sendiri sudah menyediakan UI (User Interface) bawaan dari Bootstrap salah satunya adalah Button.
Di Bootstrap Button terdapat 6 macam yaitu :
1. button-primary
2. button-info
3. button-default
4. button-success
5. button-danger
6. button-warning
LATAR BELAKANG
Ingin mempermudah dalam pembuat sebuah button, tanpa harus membuat CSS dalam mendesain tampilannya.
MAKSUD & TUJUAN
- Mempermudah dalam pembuatan button atau tombol di dalam HTML.
- Dapat menentukan desain sesuai keinginan kita tanpa membuat CSS terlebih dahulu.
ALAT & BAHAN
- PC/LAPTOP
- Text Editor
- Browser
LANGKAH KERJA
Untuk cara membuatnya anda bisa menggunakan Code Html menggunakan class atau type:
<body>
<button class=”btn btn-default”>Button</button>
<button class=”btn btn-info”>Button</button>
<button class=”btn btn-primaryt”>Button</button>
<button class=”btn btn-succes”>Button</button>
<button class=”btn btn-danger”>Button</button>
<button class=”btn btn-warning”>Button</button>
</body>
anda bisa juga menggunakan Code seperti ini :
<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”>Link</button>
Setelah anda membuat Code seperti itu coba anda save lalu lihat perubahannya di browser yang anda gunakan. Sekian untuk artikel mengenai button Bootstrap,semoga bermafaat.
Referensi
Post a Comment