Dalam pertemuan kali ini, saya akan memaparkan mengenai gambar dengan bootstrap.
Bootstrap Gambar
Sudut Tumpul
Tag kelas .img-rounded menambahkan sudut tumpul ke gambar (IE 8 tidak mendukung sudut tumpul.)
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Sudut tumpul</h2>
<p>Kelas img-bulat menambahkan sudut bulat untuk gambar (tidak tersedia di IE8):</p>
<img src="bootstrap.png" class="img-rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Hasil
Lingkaran
Tag kelas .img-circle membentuk gambar ke lingkaran (IE8 tidak mendukung sudut lingkaran).
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Lingkaran</h2>
<p>Kelas img-lingkaran membentuk gambar ke lingkaran (tidak tersedia di IE8):</p>
<img src="bootstrap.png" class="img-circle" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Hasil
Thumbnail
Tag kelas .img-thumbnail membentuk gambar untuk thumbnail.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Thumbnail</h2>
<p>Kelas img-thumbnail menciptakan thumbnail dari gambar:</p>
<img src="bootstrap.png" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Hasil
Gambar Responsif
Gambar hadir dalam semua ukuran. Jadi ukuran layar gambar responsif secara otomatis menyesuaikan agar sesuai dengan ukuran layar.
Membuat gambar responsif dengan menambahkan kelas .img-responsive ke tag <img>. Maka gambar akan menjadi skala baik utuki elemen induk.
Tag kelas .img-responsive berlaku display:block; dan max-width: 100%; dan height: auto; untuk gambar.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Kelas img-responsif membuat skala gambar baik untuk elemen induk (mengubah ukuran jendela browser untuk melihat efek):</p>
<img class="img-responsive" src="bootstrap.png" alt="Chania" width="460" height="345">
</div>
</body>
</html>
Hasil
Galeri Foto
Anda juga dapat menggunakan sistem grid Bootstrap dalam hubungannya dengan kelas .thumbnail untuk membuat galeri gambar.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Galeri Foto</h2>
<p>Kelas .thumbnail dapat digunakan untuk menampilkan galeri gambar. </p>
<p>Kelas .caption menambahkan bantalan yang tepat dan warna abu-abu gelap untuk teks dalam thumbnail.</p>
<p>Klik pada gambar untuk memperbesar mereka.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="bootstrap.png" target="_blank">
<img src="bootstrap.png" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="bootstrap.png" target="_blank">
<img src="bootstrap.png" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="bootstrap.png" target="_blank">
<img src="bootstrap.png" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil
Item Responsif
Juga membiarkan video atau slideshow skala besar pada perangkat apapun. Elemen Kelas dapat diterapkan langsung ke <iframe>, <embed>, <video>, dan <object>.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Contoh 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>Embed Responsif</h2>
<p>Membuat video responsif dan skala itu baik untuk elemen induk dengan aspek rasio 16: 9</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</div>
</body>
</html>
Anda dapat memilih antara dua kelas aspek rasio.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh 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>Embed Responsif</h2>
<p>Membuat video responsif dan skala itu baik untuk elemen induk.</p>
<h2>Aspek rasio 4: 3 </h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
<h2>Aspek rasio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</div>
</body>
</html>
Hasil
REFERENSI
http://www.w3schools.com/bootstrap/bootstrap_images.asp
No comments:
Post a Comment