Bootstrap 3 Image - Tutorial Bootstrap Indonesia
Tutorial Bootstrap Image
TrikSonic - Gambar sangat umum dipakai dalam desain sebuah web atau aplikasi. Kaprikornus penggunaan gaya pada sebuah gambar dan peletakkan gambar yang benar di halaman web sangatlah penting untuk meningkatkan pengalaman user/penggguna/pengunjung.
Dengan memakai class yang tersedia pada Bootstrap, kita sanggup dengan gampang menciptakan gambar ibarat menciptakan gambar responsive, melingkar, atau memberi pengaruh ibarat thumbnail.
Berikut pola dan tutorial bootstrap image yang sanggup dipelajari :
Image Responsive
Image Responsive pada bootstrap dipakai untuk menciptakan skala gambar secara sempurna di seluruh perangkat. Untuk menerapkannya tambahkan class
.img-responsive pada element <img>Class
.img-responsive mempunyai gaya css dengan max-width: 100%, height: auto, dan display: block..img-responsive akan menyesuaikan skala gambarnya pada elemen induk yang membungkusnya.Contoh :
<img class="img-responsive" alt="demo" src="/Trik%2BSonic.png"/> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Image Responsive</h2> <img class="img-responsive" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHid2k64IQ1h4axZqjRQ3u8cAjZEc61LhIIaXHVCk6AaSYtD6WsxdVwG73eR_gPG5oJwCcOwxSIOYyO4WNNvJtXI7BaB3KkPOA6qUKK2EEwOoodi1lHrXRhSqO3CDqnNgH3-WQaePHD5bF/s320/Trik+Sonic.png"/> <!--note--> <p style="margin-top:20px;"> Rubah lebar area preview untuk melihat responsive element </p> </div> </body> </html>
Image Rounded
Image Rounded dipakai untuk menawarkan tampilan sebuah gambar mempunyai sudut membulat pada bab ujungnya. Untuk menerapkannya gunakan class
.img-rounded pada element <img>.Contoh penulisannya sanggup ibarat ini :
<img class="img-rounded" alt="..." src="..."/> <!-- or --> <img class="img-responsive img-rounded" alt="..." src="..."/> Contoh :
<img class="img-responsive img-rounded" alt="demo" src="/Trik%2BSonic.png"/> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Image Rounded</h2> <img class="img-responsive img-rounded" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHid2k64IQ1h4axZqjRQ3u8cAjZEc61LhIIaXHVCk6AaSYtD6WsxdVwG73eR_gPG5oJwCcOwxSIOYyO4WNNvJtXI7BaB3KkPOA6qUKK2EEwOoodi1lHrXRhSqO3CDqnNgH3-WQaePHD5bF/s320/Trik+Sonic.png"/> </div> </body> </html>
Image Circle
Image Circle dipakai untuk menawarkan tampilan sebuah gambar berbentuk ibarat lingkaran. Untuk menerapkannya gunakan class
.img-circle pada element <img>.Contoh penulisannya sanggup ibarat ini :
<img class="img-circle" alt="..." src="..."/> <!-- or --> <img class="img-responsive img-circle" alt="..." src="..."/> Contoh :
<img class="img-responsive img-circle" alt="demo" src="/Trik%2BSonic.png"/> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Image Circle</h2> <img class="img-responsive img-circle" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHid2k64IQ1h4axZqjRQ3u8cAjZEc61LhIIaXHVCk6AaSYtD6WsxdVwG73eR_gPG5oJwCcOwxSIOYyO4WNNvJtXI7BaB3KkPOA6qUKK2EEwOoodi1lHrXRhSqO3CDqnNgH3-WQaePHD5bF/s320/Trik+Sonic.png"/> </div> </body> </html>
Image Thumbnail
Image Thumbnail dipakai untuk menawarkan tampilan sebuah gambar berbentuk thumbnail atau mempunyai sebuah bingkai. Untuk menerapkannya gunakan class
.img-thumbnail pada element <img>.Contoh penulisannya sanggup ibarat ini :
<img class="img-thumbnail" alt="..." src="..."/> <!-- or --> <img class="img-responsive img-thumbnail" alt="..." src="..."/> Contoh :
<figure style="padding:20px;background:#32798e"> <img class="img-responsive img-thumbnail" alt="demo" src="/Trik%2BSonic.png"/> </figure> Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap 3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Image Thumbnail</h2> <figure style="padding:20px;background:#32798e"> <img class="img-responsive img-thumbnail" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHid2k64IQ1h4axZqjRQ3u8cAjZEc61LhIIaXHVCk6AaSYtD6WsxdVwG73eR_gPG5oJwCcOwxSIOYyO4WNNvJtXI7BaB3KkPOA6qUKK2EEwOoodi1lHrXRhSqO3CDqnNgH3-WQaePHD5bF/s320/Trik+Sonic.png"/> </figure> </div> </body> </html>