Cara Merubah Bentuk Lingkaran Pada Gambar dengan Bootstrap
Banyak yang mempertanyakan bagaimana cara merubah gambar yang tadinya berbentuk persegi panjang, maupun persegi menjadi lingkaran, hal ini sering jadi pertanyaan di murid, sewaktu kita belajar HTML dan CSS bagi merubah gambar membutuhkan property CSS yaitu border radius, apakah teman-teman masih ingat, apabila telah lupa caranya nanti akan saya contohkan ketika menggunakan HTML dan CSS saja dan menggunakan bootstrap, caranya lumayan gampang ko teman-teman apa lagi menggunakan bootstrap, oke jangan kemana-mana cara merubah wujud lingkaran di gambar dengan bootstrap, akan kita bahas sesaat lagi.
Di dasarnya ketika kita ingin merubah gambar menjadi lingkaran sesungguhnya telah lumayan menggunakan HTML dan CSS saja, tapi kita mesti tau pun bagaimana cara membuatnya dengan boostrap, apa lagi kita telah menggunakan framework bootstrap, oke seperti janji saya di paragraf pertama-tama bagi belajar cara merubah wujud lingkaran di gambar dengan bootstrap, kita bahas terlebih dahulu menggunakan HTML dan CSS, oke seketika saja teman-teman lihat struktrunya:
DIsini saya mempunyai sebuah gambar facebook yang berbentuk persegi, object ini yang akan kita gunakan sesaat lagi, apabila teman-teman ingin sama dapat cari seperti ini atau gambar apa saja yang berbentuk persegi, supaya kita tau perbedaannya, oke seketika saja:
<!DOCTYPE html>
<html>
<head>
<title><strong>cara merubah wujud lingkaran di gambar dengan bootstrap</strong></title>
<-e-style type=text/css>
img{
border-radius: 50%; /*property ini yang membangun efek menjadi lingkaran*/
}
<-e-/style>
</head>
<body>
<img src=facebook.png>
</body>
</html>
Telah jadi menjadi lingkaran ya teman-teman, oke sekarang ini kita coba menggunakan bootstrap:
Teman-teman tinggal pilih bagian yang tengah ya teman-teman, dengan menggunakan class=”img-circle” kita telah dapat menyusun lingkaran di gambar facebook di atas, tinggal teman-teman cari saja gambarnya kasih class tersebut:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Theme</title>
<!-- Bootstrap -->
<link href=css/bootstrap.min.css rel=stylesheet>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<-e-script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js><-e-/script>
<-e-script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js><-e-/script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<span style=color: #ff0000><img src=../facebook.png class=img-circle> <--ini ya teman-teman </span>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<-e-script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js><-e-/script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<-e-script src=js/bootstrap.min.js><-e-/script>
</body>
</html>
seperti lazimnya hilangkan tanda -e- , oke karenanya hasilnya akan sama seperti di atas ya teman-teman, saya rasa lumayan hingga disini dulu belajar kita mengenai cara merubah wujud lingkaran di gambar dengan bootstrap, semoga bermanfaat dan hingga jumpa.
Sumber https://kursuswebsite.org
