Belajar Bootstrap (9. Button-group)

Belajar Bootstrap (9. Button-group)

Button Group Bootstrap

Pada kesempatan kali ini kita akan melanjutkan materi yaitu button-group. Button group digunakan untuk membuat button bergabung menjadi satu baris, kebanyakan digunakan pada menu sebuah website. Langsung saja tulis kode dibawah ini

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>button group</title>
</head>
<body>
	<div class="container">
		<h2>Button Group</h2>
		<nav class="btn-group">
			<button class="btn btn-primary">Button 1</button>
			<button class="btn btn-info">Button 2</button>
			<button class="btn btn-danger">Button 3</button>
		</nav>
	</div>
</body>
</html>

hasil

Sekarang kita bisa membentuk button group secara vertical

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>button group</title>
</head>
<body>
	<div class="container">
		<h2>Button Group Vertical</h2>
		<nav class="btn-group-vertical">
			<button class="btn btn-primary">Button 1</button>
			<button class="btn btn-info">Button 2</button>
			<button class="btn btn-danger">Button 3</button>
		</nav>
	</div>
</body>
</html>

hasil

Dengan menambahkan btn-group-justified, maka button group akan membuat selebar induknya

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>button group</title>
</head>
<body>
	<div class="container">
		<h2>Button Group Justified</h2>
		<div class="col-md-6">
			<nav class="btn-group btn-group-justified">
				<a href="#" class="btn btn-primary">Apple</a>
	   			<a href="#" class="btn btn-primary">Samsung</a>
	    		<a href="#" class="btn btn-primary">Sony</a>
			</nav>
		</div>
		<div class="col-md-6">
			<nav class="btn-group btn-group-justified">
				<a href="#" class="btn btn-primary">Apple</a>
	   			<a href="#" class="btn btn-primary">Samsung</a>
	    		<a href="#" class="btn btn-primary">Sony</a>
			</nav>
		</div>
			
		<nav class="btn-group btn-group-justified">
			<a href="#" class="btn btn-primary">Apple</a>
	   		<a href="#" class="btn btn-primary">Samsung</a>
	    	<a href="#" class="btn btn-primary">Sony</a>
		</nav>	
	</div>
</body>
</html>

hasil

Mengapa kode diatas menggunakan tag a? jika menggunaka tag button, kita harus membuat class btn-group baru pada setiap button contoh :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>button group</title>
</head>
<body>
	<div class="container">
		<h2>Button Group Justified</h2>
		 	<div class="btn-group btn-group-justified">
  				<div class="btn-group">
		    		<button type="button" class="btn btn-primary">Apple</button>
		  		</div>
		  		<div class="btn-group">
		    		<button type="button" class="btn btn-primary">Samsung</button>
		  		</div>
		  		<div class="btn-group">
		    		<button type="button" class="btn btn-primary">Sony</button>
		  		</div>
			</div>
	</div>
</body>
</html>

hasil

Mari kita membuat dropdown menu, Konsepnya yaitu kita membuat group-button didalam group-button. Check this code below

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  	<script src="../js/bootstrap.min.js"></script>
	<title>button group</title>
</head>
<body>
	<div class="container">
		<h2>Button Group (DROPDOWN)</h2>
		<nav class="btn-group btn-group-justified">
			<a href="#" class="btn btn-primary">Menu 1</a>
	   		<a href="#" class="btn btn-primary">Menu 2</a>
	   		<div class="btn-group">
	   			<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu 3<span class="caret"></span></button>
	   			<ul class="dropdown-menu" role="menu">
      				<li><a href="#">Dropdown 1</a></li>
      				<li><a href="#">Dropdown 2</a></li>
    			</ul>
	   		</div>	
		</nav>	
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *