Dalam membuat aplikasi kita mungkin menemukan adanya suatu form dengan button yang kalau diklik akan masuk ke suatu halaman tertentu. Ini terjadi misalnya pada form Submit dan Cancel, pada submit melakukan pemrosesan data sedangkan pada Cancel akan masuk ke halaman tertentu. Pada kasus tersebut kita ingin membuat link dengan tampilan button.
Kita dapat membuat link dengan tampilan button menggunakan bootstrap seperti tampilan di bawah ini:
Source code utama adalah seperti berikut ini:
<a href=”#” class=”btn btn-primary btn-xs”>Klik primary – extra small</a> .
Demo dapat dilihat di http://aris.proweb.asia/dist/coba17.html .
Souce code lengkapnya:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Link dengan tampilan button</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<br/>
<a href=”#” class=”btn btn-default”>Klik default</a> <br/><br/>
<a href=”#” class=”btn btn-primary btn-xs”>Klik primary – extra small</a> <br/><br/>
<a href=”#” class=”btn btn-success btn-sm”>Klik success – small</a> <br/><br/>
<a href=”#” class=”btn btn-info btn-lg”>Klik info – large</a> <br/><br/>
<a href=”#” class=”btn btn-warning”>Klik warning</a> <br/><br/>
<a href=”#” class=”btn btn-danger”>Klik danger</a> <br/><br/>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/css/#buttons .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.