Home / Bootstrap / Tutorial Bootstrap Bagian 6: Mengatur Tampilan Gambar Dengan Bootstrap

Tutorial Bootstrap Bagian 6: Mengatur Tampilan Gambar Dengan Bootstrap

Setelah sebelumnya kita membahas tentang cara membuat tombol/ button dengan bootstrap dan merancang form dengan bootstrap, kali ini kita akan lanjutkan totorial bootstrap tentang cara mengatur tampilan gambar dengan bootstrap. Bootstrap menyediakan class untuk pengaturan gambar sehingga kita dapat dengan mudah menampilkan gambar dengan bentuk rounded, circle dan thumbnail maupun responsif mengikuti  resolusi layar pengguna.

Class-class untuk pengaturan gambar dalam bootstrap adalah sebagai berikut:

  • img-rounded
    Digunakan untuk membuat tampilan gambar bulat/melengkung pada ke empat sudutnya.
  • img-circle
    Digunakan untuk membuat tampilan gambar seperti lingkaran
  • img-thumbnail
    Digunakan untuk membuat tampilan thumbnail yang memiliki jarak pemisah seperti bingkai
  • img-responsive
    Digunakan untuk membuat tampilan gambar yang responsif, mengikuti lebar resolusi pengguna

Berikut ini contoh cara mengatur tampilan gambar dengan bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <title>Pengaturan Gambar dalam Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h4> Menggunakan class img-round</h4>
                <img src="itgeek.jpg" class="img-round" alt="Tampilan gambar dengan class img-round">
            </div>
            <div class="col-md-3">
                <h4> Menggunakan class img-circle</h4>
                <img src="itgeek.jpg" class="img-circle" alt="Tampilan gambar dengan class img-circle">
            </div>
            <div class="col-md-3">
                <h4> Menggunakan class img-thumbnail</h4>
                <img src="itgeek.jpg" class="img-thumbnail" alt="Tampilan gambar dengan class img-thumbnail">
            </div>
            <div class="col-md-3">
                <h4> Menggunakan class responsive</h4>
                <img src="itgeek.jpg" class="img-responsive" alt="Tampilan gambar dengan class img-responsive">
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Pada kode diatas adalah penerapan class pengaturan gambar menggunakan bootstrap. Sama dengan tutorial sebelumnya mengenai penggunaan bootstrap, baris 5 digunakan untuk memanggil file css bootstrap dan baris 28, 29 untuk menyertakan file JQuery dan Javascript bootstrap.
  • Perhatikan pada baris ke 12, gambar yang ditampilkan menggunakan class img-round. Pada baris ke 16, gambar menggunakan class img-circle. Pada baris ke 20, gambar menggunakan class img-thumbnail dan pada baris ke 24 gambar menggunakan class img-responsive. Hasilnya seperti gambar dibawah.

Tampilan gambar dengan bootstrap. Round, circle dan thumbnail

Dengan penggunaan class-class bootstrap, maka pengaturan gambar pada website akan lebih mudah dan hasilnya menarik. Demikian tutorial bootstrap tentang Mengatur tampilan gambar dengan Bootstrap. Selamat mencoba dan semoga bermanfaat.

Totorial selanjutnya adalah Membuat Pesan Alert dengan Bootstrap, disana kita akan membahas mengenai penggunaan class-class bootstrap untuk membuat pesan alert yang biasanya berisi informasi, peringatan atau juga sebagai notifikasi dalam sebuah website.

Comments

comments

About admin

admin

My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

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