HASANONTA - 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 thumbnail dan gambar responsive.
BOOTSTRAP memiliki beberapa class yang berfungsi untuk mengatur gambar, diantaranya :
- 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
Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</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>Mengatur Gambar Dengan Bootstrap | HasanOnta</h1> <img src="4.png" class="img-rounded"> </body> </html>Output :
- img-circle : Untuk membuat gambar menjadi bulat
Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</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>Mengatur Gambar Dengan Bootstrap | HasanOnta</h1> <img src="4.png" class="img-circle"> </body> </html>Output :
- img-thumbnail : Untuk membuat gambar tumbnail
Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</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>Mengatur Gambar Dengan Bootstrap | HasanOnta</h1> <img src="4.png" class="img-thumbnail"> </body> </html>
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar