Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Merubah Tampilan Gambar dengan Bootstrap.
Bootstrap menyadiakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rouded, circle (lingkaran) dan gambar yang responsive.
Berikut beberapa class untuk membuat tampilah gambar dengan bootstrap:
- .img-responsive
class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi. - .img-rounded
class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung. - .img-circle
class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran. - .img-thumbnail
class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap.
Contoh:
Gambar Responsive
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Gambar</h2>
<p>class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi:</p>
<img class="img-responsive" src="gambar/linux.png" alt="Linux" width="460" height="345">
</div>
</body>
</html>
Gambar Rounded
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Gambar Rounded</h2>
<p>class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.</p>
<img src="gambar/linux.png" class="img-rounded" alt="Linux" width="304" height="236">
</div>
</body>
</html>
Gambar Circle (Lingkaran)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>Gambar Circle</h2>
<p>class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.</p>
<img src="gambar/linux.png" class="img-circle" alt="Linux" width="304" height="236">
</div>
</body>
</html>
Gambar Thumbnail
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>Gambar Thumbnail</h1>
<p>class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap:</p>
<img src="gambar/linux.png" class="img-thumbnail" alt="Linux" width="304" height="236">
</div>
</body>
</html>
Sekian Cara Membuat Tampilan Gambar dengan Bootstrap.
Semoga Bermanfaat...!!!
Referensi:www.w3schools.com
Wassalam'alaikum wr.wb
EmoticonEmoticon