HASANONTA - Setelah sebelumnya kita mengatur style gambar dengan BOOTSTRAP, kali ini kita akan men-design button dengan BOOTSTRAP menjadi lebih keren dan responsive. Membuat tombol dengan BOOTSTRAP sangat mudah yaitu hanya menggunakan class "btn" lalu kita tingal atur element tadi.
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 menbuat 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 ukurang 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 kuning
- .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
Untuk membuat button sendiri bisa digunakan tag <button> atau <a> alias hyperlink, lalu sisipkan class BOOTSTRAP di class tadi. Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h1>Cara Membuat tombol dengan Bootstrap</h1>
</body> </html><a href="#" class="btn btn-success btn-lg">Tombol</a> <a href="#" class="btn btn-success btn-md">Tombol</a> <a href="#" class="btn btn-success btn-sm">Tombol</a> <a href="#" class="btn btn-success btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-primary btn-lg">Tombol</a> <a href="#" class="btn btn-primary btn-md">Tombol</a> <a href="#" class="btn btn-primary btn-sm">Tombol</a> <a href="#" class="btn btn-primary btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-info btn-lg">Tombol</a> <a href="#" class="btn btn-info btn-md">Tombol</a> <a href="#" class="btn btn-info btn-sm">Tombol</a> <a href="#" class="btn btn-info btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-danger btn-lg">Tombol</a> <a href="#" class="btn btn-danger btn-md">Tombol</a> <a href="#" class="btn btn-danger btn-sm">Tombol</a> <a href="#" class="btn btn-danger btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-warning btn-lg">Tombol</a> <a href="#" class="btn btn-warning btn-md">Tombol</a> <a href="#" class="btn btn-warning btn-sm">Tombol</a> <a href="#" class="btn btn-warning btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-default btn-lg">Tombol</a> <a href="#" class="btn btn-default btn-md">Tombol</a> <a href="#" class="btn btn-default btn-sm">Tombol</a> <a href="#" class="btn btn-default btn-xs">Tombol</a>
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar