Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Monday, 3 April 2017

Belajar Bootstrap Part 4 Membuat Button Dengan 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



No comments:

Post a Comment

Adbox