Belajar Bootstrap Part 4 Membuat Button Dengan Bootstrap

by Unknown on April 03, 2017 in Bootstrap

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

www.w3schools.com