Tutorial Belajar Bootstrap Bagian 15 : Cara Membuat Style Gambar di Botstrap

0
1501

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Botstrap Bagian 14 : Cara membuat Grup Tombol di Bootstrap, selanjutnya kita akan belajar cara membuat style gambar di Bootstrap.

Gambar sangat umum dalam desain web modern. Jadi mengatur style gambar dan menempatkannya dengan benar di halaman web sangat penting untuk meningkatkan pengalaman pengguna.

Dengan menggunakan class bawaan Bootstrap, Anda dapat dengan mudah mengatur style gambar seperti membuat gambar bersudut bulat atau melingkar, atau memberinya efek seperti gambar mini.

    <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" class="rounded" alt="Rounded Image">
    <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" class="rounded-circle" alt="Circular Image">
    <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" class="img-thumbnail" alt="Thumbnail Image">

Membuat Gambar dan Video yang Responsif

Dengan Bootstrap Anda juga dapat membuat gambar menjadi responsif. Cukup tambahkan class .img-fluid ke tag <img>.

Class ini terutama menerapkan style max-width: 100%; dan height: auto; ke gambar sehingga diskalakan dengan baik agar sesuai dengan elemen penampung – jika lebar gambar lebih besar dari elemen penampung itu sendiri. Lihat contoh berikut untuk melihat cara kerjanya:

    <div class="alert alert-info alert-dismissible fade show">
        <strong>Catatan!</strong> Ubah ukuran jendela browser untuk melihat cara kerja gambar responsif.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <h2>Non-Responsive Image</h2>
    <div class="box">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg" alt="Cloudy Sky">
    </div>
    <hr>
    <h2>Responsive Image</h2>
    <div class="box">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg" class="img-fluid" alt="Cloudy Sky">
    </div>
Catatan: Saat membuat layout responsif pertimbangkan untuk membuat gambar Anda juga responsif, jika tidak, jika lebar gambar lebih besar dari lebar elemen induk, gambar akan keluar dan dapat merusak layout  halaman web Anda.

Anda juga dapat membuat video atau tayangan slide yang disematkan di halaman web menjadi responsif tanpa memengaruhi rasio aspek aslinya.

Untuk melakukan ini, bungkus embed apa pun seperti <iframe>, atau <video> dalam elemen <div> dan terapkan class .embed-responsive, dan class rasio aspek seperti .embed-responsive-16by9.

Anda dapat secara opsional menerapkan class turunan eksplisit .embed-responsive-item pada elemen yang disematkan agar sesuai dengan style untuk atribut lain. Berikut ini contohnya:

<div class="alert alert-info alert-dismissible fade show">
        <strong>Catatan!</strong> Ubah ukuran jendela browser untuk melihat cara kerja video responsif.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    
    <h2 class="mt-4">Video with 21:9 aspect ratio</h2>
    <div class="embed-responsive embed-responsive-21by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
    
    <h2 class="mt-4">Video with 16:9 aspect ratio</h2>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>
    
    <h2 class="mt-4">Video with 4:3 aspect ratio</h2>
	<div class="embed-responsive embed-responsive-4by3">
		<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
	</div>
    
    <h2 class="mt-4">Video with 1:1 aspect ratio</h2>
    <div class="embed-responsive embed-responsive-1by1">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
    </div>

Dalam contoh di atas, kita telah membuat 4 video responsif dengan 4 rasio aspek berbeda (21: 9, 16: 9, 4: 3, dan 1: 1) menggunakan class .embed-responsive-21by9, .embed- responsive-16by9, .embed-responsive-4by3, dan .embed-responsive-1by1.

Tips: Rasio aspek gambar menjelaskan hubungan proporsional antara lebar dan tingginya. Dua rasio aspek videografik yang umum adalah 16: 9 dan 4: 3.

Penjajaran Horizontal Gambar

Anda dapat meratakan gambar ke kiri atau kanan dalam kotak yang lebih besar menggunakan class .pull-left atau .pull-right.

Anda juga dapat menggunakan class perataan teks seperti .text-left, .text-right, dan .text-center pada penampung induk untuk meratakan gambar sebaris secara horizontal ke kiri, kanan, dan tengah.

Namun, untuk meratakan tengah gambar tingkat blok, Anda perlu menggunakan class utilitas .mx-auto margin.

Mari kita lihat contoh berikut untuk melihat cara kerjanya:

    <h4> Perataan horizontal menggunakan class float </h4>
    <div class="box clearfix">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" class="pull-left" alt="Sample Image">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" class="pull-right" alt="Sample Image">
    </div>
    
    <h4> Perataan kiri menggunakan class perataan teks </h4>
    <div class="box text-left">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" alt="Sample Image">
    </div>
    
    <h4> Perataan kanan menggunakan class perataan teks </h4>
    <div class="box text-right">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" alt="Sample Image">
    </div>
    
    <h4> Perataan tengah menggunakan class perataan teks </h4>
    <div class="box text-center">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" alt="Sample Image">
    </div>
    
    <h4> Perataan tengah gambar level blok menggunakan margin otomatis </h4>
    <div class="box">
        <img src="https://mbahwp.com/wp-content/uploads/2021/04/avatar-ang.jpg" class="d-block mx-auto" alt="Sample Image">
    </div>

Semoga tutuorial ini membantu Anda belajar cara membuat style gambar di Bootstrap.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.