Belajar Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap

Selasa, 13 Desember 2016

Belajar Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap

    Tidak ada komentar

 
MENGATUR TAMPILAN GAMBAR DENGAN BOOTSTRAP
Setelah sebelumnya kita belajar Pengertian dan Mengenal Bootstrap dan Membuat Table Dengan Bootstrap sekarang kita akan masuk ke Mengatur Tampilan Gambar Bootstrap . Yaitu membentuk tampilan gambar yang melengkung di sisi sudut, gambar berbentuk lingkaran, gambar tumbnail dan gambar responsive.

Bootstrap memiliki class untuk mengatur gambar sesuai keinginan kita. Kitahanya perlu mengingat dan memahami classnya saja. Adapun beberapa class Bootstap yang dapat digunakan untuk mendesain web
  • img-responsive : Untuk membuat gambar responsive pada saat dijalankan pada semua bentuk ukuran dan resolusi
  • img-rounded : Untuk membuat gambar berbentuk rounded yaitu sisi samping dari gambar akan melengkung
  • img-circle : Untuk membuat gambar menjadi bulat
  • img-thumbnail : Untuk membuat gambar tumbnail

MEMBUAT GAMBAR THUMBNAIL
Tampilan gambar dengan class ini sangat sesuai untuk keperluan thumbnailing sesuai namanya 

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 3 : Tampilan Gambar Dengan 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>
    <h1 style="text-align: center;">Membuat Tampilan Gambar Dengan Bootstrap<br></h1><center>
    <img src="blogger.png" class="img-thumbnail" alt="Contoh Gambar"></center>
</body>
</html>
Perhatikan contoh diatas. Saya menambahkan class="img-thumbnail" untuk membuat gambar thumbnail dan jangan lupa sediakan gambar yang satu file dengan program kerja
<img src="blogger.png" class="img-thumbnail" alt="Contoh Gambar">


MEMBUAT GAMBAR CIRCLE
Sama seperti membuat gambar tumbnail. Kita dapat menggunakan "img-circle" untuk membuat gambar dengan bentuk lingkaran / bulat. Class ini merupakan cara terbaik menampilkan gambar dalam sebuah lingkaran penuh. Jika anda pengguna aplikasi Blackberry Messenger di perangkat Android, tentu sudah terbiasa melihat tampilan profile picture dalam frame berbentuk lingkaran

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 3 : Tampilan Gambar Dengan 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>
    <h1 style="text-align: center;">Membuat Tampilan Gambar Dengan Bootstrap<br></h1><center>
    <img src="SK.jpg" class="img-circle" alt="Contoh Gambar"></center>
</body>
</html>


MEMBUAT GAMBAR ROUND DENGAN BOOTSTRAP
Class ini digunakan untuk menampilkan gambar yang memiliki sudut melengkung atau lebih dikenal dengan istilah rounded-corner. 

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 3 : Tampilan Gambar Dengan 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>
    <h1 style="text-align: center;">Membuat Tampilan Gambar Dengan Bootstrap<br></h1><center>
    <img src="SK.jpg" class="img-rounded" alt="Contoh Gambar"></center>
</body>
</html>


MEMBUAT GAMBAR RESPONSIVE
Untuk membuat gambar responsive sobat dapat menggunakan class "img-responsive" untuk membuat gambar tampil penuh di semua ukuran dan resolusi. Berikut contoh penggunaanya 
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 3 : Tampilan Gambar Dengan 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>
    <h1 style="text-align: center;">Membuat Tampilan Gambar Dengan Bootstrap<br></h1><center>
    <img src="SK.jpg" class="img-rounded img-responsive" alt="Contoh Gambar"><br>
    <img src="SK.jpg" class="img-circle img-responsive" alt="Contoh Gambar"><br>
    <img src="SK.jpg" class="img-thumbnail img-responsive" alt="Contoh Gambar"></center><br>
</body>
</html>


Ketika tab dikecilkan maka gambar - gambar tersebut akan mengikuti ukuran layar. Jadi sebuah website yang menggunakan Bootstrap ketika kita buka web tersebut menggunakan smartphone / hp ukuran gambar tersebut akan sesuai mengikuti layar.

KESIMPULAN
Kita dapat dengan mudah memanipulasi gambar dengan Bootstrap ini. Dan sedikit saran dari saya Anda tidak bisa menggunakan class "img-rounded" dan "img-circle" pada Internet Explorer 8 dan versi di bawahnya. Dua class bootstrap ini tidak bisa bekerja di browser bawaan Microsoft Windows tersebut, karena belum sepenuhnya mendukung property CSS

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :  

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )