Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Button Group
Button group pada Bootstrap dipakai untuk megelompokkan beberapa tombol atau button kesatu wadah container/pembungkus.
Cara Penggunaan Button Group
Untuk menerapkan button group gunakan element HTML
<div> dengan nama class .btn-group : <div class="btn-group">...</div>.Contoh :
<div class="btn-group"> <button class="btn btn-success">Button 1</button> <button class="btn btn-success">Button 2</button> <button class="btn btn-success">Button 3</button> </div> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 <code>Button Group</code></h2> <div class="btn-group"> <button class="btn btn-success">Button 1</button> <button class="btn btn-success">Button 2</button> <button class="btn btn-success">Button 3</button> </div> </div> </body> </html>
Ukuran Button Group
Untuk memilih ukuran button pada button group, tambahkan class
.btn-group-xs, .btn-group-sm atau .btn-group-lg pada container.- .btn-group-xs : paling kecil
- .btn-group-sm : kecil
- .btn-group-lg : besar
Contoh :
<h3>Normal</h3> <div class="btn-group"> <button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button> </div> <h3>.btn-group-xs</h3> <div class="btn-group btn-group-xs"> <button class="btn btn-success">Button</button> <button class="btn btn-success">Button</button> <button class="btn btn-success">Button</button> </div> <h3>.btn-group-sm</h3> <div class="btn-group btn-group-sm"> <button class="btn btn-info">Button</button> <button class="btn btn-info">Button</button> <button class="btn btn-info">Button</button> </div> <h3>.btn-group-lg</h3> <div class="btn-group btn-group-lg"> <button class="btn btn-danger">Button</button> <button class="btn btn-danger">Button</button> <button class="btn btn-danger">Button</button> </div> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Ukuran <code>Button Group</code></h2> <h3>Normal</h3> <div class="btn-group"> <button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button> </div> <h3>.btn-group-xs</h3> <div class="btn-group btn-group-xs"> <button class="btn btn-success">Button</button> <button class="btn btn-success">Button</button> <button class="btn btn-success">Button</button> </div> <h3>.btn-group-sm</h3> <div class="btn-group btn-group-sm"> <button class="btn btn-info">Button</button> <button class="btn btn-info">Button</button> <button class="btn btn-info">Button</button> </div> <h3>.btn-group-lg</h3> <div class="btn-group btn-group-lg"> <button class="btn btn-danger">Button</button> <button class="btn btn-danger">Button</button> <button class="btn btn-danger">Button</button> </div> </div> </body> </html>
Vertical Button Group
Untuk menciptakan button secara vertical gunakan class
.btn-group-vertical pada containerContoh :
<div class="btn-group-vertical"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-primary">Button 2</button> <button class="btn btn-primary">Button 3</button> <button class="btn btn-primary">Button 4</button> <button class="btn btn-primary">Button 5</button> </div> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - <code>Vertical Button Group</code></h2> <div class="btn-group-vertical"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-primary">Button 2</button> <button class="btn btn-primary">Button 3</button> <button class="btn btn-primary">Button 4</button> <button class="btn btn-primary">Button 5</button> </div> </div> </body> </html>
Justified Button Group
Digunakan untuk menciptakan lebar pada button otomatis menyesuaikan dengan lebar kiri dan kanan container. Perhitungannya ; (Lebar container dibagi jumlah button = lebar button per 1 button)
Untuk menerapkannya tambahkan class
.btn-group-justified pada containerContoh :
<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Button 1</a> <a href="#" class="btn btn-primary">Button 2</a> <a href="#" class="btn btn-primary">Button 3</a> </div> <br/> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-danger">Button 1</a> <a href="#" class="btn btn-danger">Button 2</a> <a href="#" class="btn btn-danger">Button 3</a> <a href="#" class="btn btn-danger">Button 4</a> </div> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - <code>Justified Button Group</code></h2> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Button 1</a> <a href="#" class="btn btn-primary">Button 2</a> <a href="#" class="btn btn-primary">Button 3</a> </div> <br/> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-danger">Button 1</a> <a href="#" class="btn btn-danger">Button 2</a> <a href="#" class="btn btn-danger">Button 3</a> <a href="#" class="btn btn-danger">Button 4</a> </div> </div> </body> </html>
Tips : untuk penerapan mennggunkan element
<button> caranya sebagai berikut : <div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-info">Button 1</button> </div> <div class="btn-group"> <button class="btn btn-info">Button 2</button> </div> <div class="btn-group"> <button class="btn btn-info">Button 3</button> </div> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - <code>Justified Button Group</code></h2> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-info">Button 1</button> </div> <div class="btn-group"> <button class="btn btn-info">Button 2</button> </div> <div class="btn-group"> <button class="btn btn-info">Button 3</button> </div> </div> </div> </body> </html>
Button Group Dropdown Menu
Untuk menciptakan dropdown sajian pada button, gunakan pola berikut :
Contoh 1 Button Group Dropdown Menu:
<div class="btn-group"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-primary">Button 2</button> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle active" data-toggle="dropdown"> Menu <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> <button class="btn btn-primary">Button 4</button> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2> <div class="btn-group"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-primary">Button 2</button> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle active" data-toggle="dropdown"> Menu <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> <button class="btn btn-primary">Button 4</button> </div> <hr> <div class="alert alert-info"> <strong>Catatan :</strong> Untuk Dropdown Menu diharapkan jQuery dan JavaScript Bootstrap3 </div> </div> <!-- jquery dan Bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Contoh 2 Button Group Dropdown Menu:
<div class="btn-group"> <button class="btn btn-danger">Menu</button> <button class="btn btn-danger dropdown-toggle active" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2> <div class="btn-group"> <button class="btn btn-danger">Menu</button> <button class="btn btn-danger dropdown-toggle active" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 1</a></li> </ul> </div> <hr> <div class="alert alert-info"> <strong>Catatan :</strong> Untuk Dropdown Menu diharapkan jQuery dan JavaScript Bootstrap3 </div> </div> <!-- jquery dan Bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Contoh 3 Button Group Dropdown Menu:
<div class="btn-group"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-primary">Button 2</button> <button class="btn btn-primary">Button 3</button> <div class="btn-group"> <button class="btn btn-primary">Button 4</button> <button class="btn btn-primary active dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2> <div class="btn-group"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-primary">Button 2</button> <button class="btn btn-primary">Button 3</button> <div class="btn-group"> <button class="btn btn-primary">Button 4</button> <button class="btn btn-primary active dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </div> <hr> <div class="alert alert-info"> <strong>Catatan :</strong> jQuery dan JavaScript Bootstrap3 diharapkan </div> </div><!-- close container --> <!-- jquery dan Bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Contoh 4 Button Group Dropdown Menu:
<div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-default">Menu 1</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </div> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-primary">Menu 2</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </div> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-info">Menu 3</button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </div> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <style> /*untuk demo*/ .triksonic-body .btn-toolbar { margin: 15px 0px; } </style> </head> <body class="triksonic-body"> <div class="container"> <h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-default">Menu 1</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </div> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-primary">Menu 2</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </div> </div> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button class="btn btn-info">Menu 3</button> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> </ul> </div> </div> <hr> <div class="alert alert-info"> <strong>Catatan :</strong> jQuery dan JavaScript Bootstrap3 diharapkan </div> </div><!-- close container --> <!-- jquery dan Bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> Button Group DropUp Menu
Untuk menciptakan dropup sajian pada button, gunakan pola berikut :
Contoh 1 Button Group DropUp Menu:
<div class="btn-group dropup"> <button class="btn btn-default">DropUp Menu</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li class="divider"></li> <li><a href="#">Menu 4</a></li> </ul> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="triksonic-body"> <div class="container"> <h2>Bootstrap 3 - <code>Button Group DropUp Menu</code></h2> <hr/> <hr/> <div class="btn-group dropup"> <button class="btn btn-default">DropUp Menu</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li class="divider"></li> <li><a href="#">Menu 4</a></li> </ul> </div> <hr> <div class="alert alert-info"> <strong>Catatan :</strong> jQuery dan JavaScript Bootstrap3 diharapkan </div> </div><!-- close container --> <!-- jquery dan Bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Contoh 2 Button Group DropUp Menu:
<div class="btn-group dropup"> <button class="btn btn-default">DropUp Menu</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li class="divider"></li> <li><a href="#">Menu 4</a></li> </ul> </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 css--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="triksonic-body"> <div class="container"> <h2>Bootstrap 3 - <code>Button Group DropUp Menu</code></h2> <hr/> <hr/> <div class="btn-group dropup"> <button class="btn btn-default">DropUp Menu</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li class="divider"></li> <li><a href="#">Menu 4</a></li> </ul> </div> <hr> <div class="alert alert-info"> <strong>Catatan :</strong> jQuery dan JavaScript Bootstrap3 diharapkan </div> </div><!-- close container --> <!-- jquery dan Bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>