Belajar Bootstrap (8. Button)

Belajar Bootstrap (8. Button)

Button dalam bootstrap

Berjumpa lagi di pesonainformatika, pada kesempatan ini kita belajar tentang button pada bootstrap.
Button merupakan tombol untuk proses tertentu. Bootstrap menyediakan 7 jenis button yaitu default, primary, success, info, warning, danger, dan link. Untuk mengetahui perbedaannya praktekan kode berikut.

<!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>belajar button</title>
</head>
<body>
	<div class="container">
		<h2>Mencoba button pada bootstrap</h2>
		<button class="btn">default</button>
		<button class="btn btn-primary">Primary</button>
		<button class="btn btn-success">Success</button>
		<button class="btn btn-info">Info</button>
		<button class="btn btn-warning">Warning</button>
		<button class="btn btn-danger">Danger</button>
		<button class="btn btn-link">Link</button>
	</div>
</body>
</html>

hasil

Selain menggunakan tag button, kita juga bisa menggunakan tag a, dan input.
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>belajar button</title>
</head>
<body>
	<div class="container">
		<h2>Mencoba button pada bootstrap</h2>
		<a href="#" class="btn btn-primary">Ini Link</a>
		<input type="button" class="btn btn-info" value="Input Button">
		<input type="submit" class="btn btn-danger" value="Submit Button">
	</div>
</body>
</html>

hasil

Kita dapat mengatur besar kecil suatu button dengan ukuran yang disediakan oleh bootstrap yaitu large, medium, small, dan xsmall.
Tulis dan lihat hasil 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>belajar button</title>
</head>
<body>
	<div class="container">
		<h2>Mencoba button pada bootstrap</h2>
		<button class="btn btn-primary btn-lg">Large</button>
		<button class="btn btn-success btn-md">Medium</button>
		<button class="btn btn-info btn-sm">Small</button>
		<button class="btn btn-warning btn-xs">Xsmall</button>
	</div>
</body>
</html>

hasil

Block level button kita gunakan untuk membuat button mempunyai lebar penuh terhadap induknya.
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>belajar button</title>
</head>
<body>
	<div class="container">
		<h2>Mencoba button pada bootstrap</h2>
		<div class="col-md-6">
			<button class="btn btn-primary btn-lg btn-block">Large</button>
			<button class="btn btn-success btn-md btn-block">Medium</button>
		</div>
		<div class="col-md-3">
			<button class="btn btn-info btn-sm btn-block">Small</button>
		</div>
		<div class="col-md-3">
			<button class="btn btn-warning btn-xs btn-block">Xsmall</button>
		</div>
	</div>
</body>
</html>

hasil

Jika kita ingin menjadikan tombol tidak bisa ditekan/disable kita cuma menambahkan disabled didalam class.

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

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 *