CARA MEMBUAT TOMBOL DENGAN BOOTSTRAP (BOOTSTRAP PART4)

Guys saya sekarang akan memposting cara membuat tombol dengan bootstrap.

A. Pengertian
Bootstrap adalah framework atau tools untuk membuat aplikasi web atau website yang bersifat responsive secara cepat, mudah dan gratis. Kata 'responsive' disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai dengan lebar layar yang menampilkanya.
Salah satu website besar yang menggunakan framework bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut " Twitter Bootstrap" Dengan bootstrap, kita dapat membuat responsive website dengan cepat dan mudah  dapat berjalan sempurna pada browser-browser modern seperti Firefox, Google Chrome, Safari, Opera, Dan Internet Exploler.

B. Latar belakang
Salah satu kemudahan Botstrap yaitu Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Tifografi, Tabel, Form, Navigasi dan lain-lain. Di dalam Bootstrap juga sudah terdapat Javascript (jQuery Pluigns) untuk menghasilkan komponen UI yang cantik transtition, Modal, Dropdown, scroolspy, ToolTip, PopOver, Tab, Alert, Button, Carousel, dan lain-lain.

C. Alat dan Bahan

• PC / Laptop
• CSS Bootstrap

MEMBUAT TOMBOL DENGAN BOOTSTRAP
Selain mampu membuat tabel, Boostrap juga memiliki fungsi untuk membuat tombol yang responsive dan terlihat modern. Untuk membuat tombol cukup mnudah hanya memberikan class "btn" untuk mendefinisikan element. Kemudian kita tinggal mengatur warna element yang kita inginkan.
Bootstrap menyediakan beberapa class untuk membuat tombol yang responsive dan menarik. Adapun beberapa class yang digunakan untuk membuat tombol dan mengatur warna tombolnya dengan Bootstrap.

• .btn : Merupakan class Bootstrap yang digunakan untuk membuat tombol

• .btn-xs : Digunakan untuk membuat tombol dengan ukuran extra kecil

• .btn-sm : Digunakan untuk membuat tombol dengan ukuran kecil

• .btn-md : Digunakan untuk membuat tombol dengan ukuran sedang

• .btn-lg : Digunakan untuk membuat tombol dengan ukuran besar

• .btn-danger : Digunakan untuk membuat tombol berwarna merah

• .btn-warning : Digunakan untuk membuat tombol berwarna kuningg

• .btn-success : Digunakan untuk membuat tombol berwarna hijau

• .btn-primary : Digunakan untuk membuat tombol berwarna biru

• .btn-info : Digunakan untuk membuat tombol berwarna biru muda

• .btn-default : Digunakan untuk membuat tombol dengan warna standart bootstrap yaitu berwarna abu-abu

CARA MEMBUAT TOMBOL DENGAN BOOTSTRAP

Untuk membuat tombol dengan Bootstrap sobat dapat menggunakan tag <button> atau juga bisa menggunakan tag <a> alias hyperlink dan menyisipkan class Button pada Bootstrap. Berikut ini contoh penggunaan class - class Bootstrap yang telah dijelaskan di atas.

Dan hasilnya

D. Kesimpulan

Jadi untuk membuat tombol dengan Bootstrap kita dapat menggunakan class "btn" dan dapat kita atur warna dan ukuranya seperti yang sudah saya jelaskan.

E. Refrensi

Malas Ngoding

http://www.script-kiddies.org/2016/12/belajar-bootstrap-part-4-cara-membuat.html

F. Penutup

Sekian postingan kali ini semoga bermanfaat.