Assalamualaikum Wr.Wb
Kali ini saya akan membahas tentang Button Group pada bootstrap,seperti namanya button group adalah beberapa kumpulan button yang style nya telah di sediakan bootstrap,oke mari kita mulai satu persatu karena ada beberapa jenis button group dengan catatan teman semua sudah mendownload bootstrap dan simpan filenya dalam satu folder dengan bootstrap.
Kali ini saya akan membahas tentang Button Group pada bootstrap,seperti namanya button group adalah beberapa kumpulan button yang style nya telah di sediakan bootstrap,oke mari kita mulai satu persatu karena ada beberapa jenis button group dengan catatan teman semua sudah mendownload bootstrap dan simpan filenya dalam satu folder dengan bootstrap.
- Button Groups(button biasa)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Button Groups</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-danger">Button1</button>
<button type="button" class="btn btn-primary">Button2</button>
<button type="button" class="btn btn-primary btn-warning">Button3</button>
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
- Vertical Button Group(button dengan gaya vertikal)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Button Groups Vertical</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-danger">Button1</button>
<button type="button" class="btn btn-primary">Button2</button>
<button type="button" class="btn btn-primary btn-warning">Button3</button>
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
- Justified Button Group(button ini modelnya agak lebar tergantung banyaknya button yang di buat)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Button Groups Justified</h2>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary btn-danger">Button1</a>
<a href="#" class="btn btn-primary ">Button2</a>
<a href="#" class="btn btn-primary btn-warning">Button3</a>
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
- Nesting Button Groups Dropdown Menu(button dengan dropdown)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Button Groups Dengan Dropdown</h2>
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-danger">Button1</button>
<button type="button" class="btn btn-primary">Button2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-warning dropdown-toggle" data-toggle="dropdown">
Button3<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
Ya mungkin sekian dulu postingan kali ini tentang Button Groups semoga bermanfaat di balik banyaknya kekurangan sampai jumpa di postingan berikutnya terimakasih.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar