Pada kesepatan kali ini kita akan membahas mengenai salah satu komponen dari bootstrap yaitu Media Object. Media object ini merupakan hal yang lumrah ditemui dalam halaman depan website atau blog dan saya yakin banyak dari teman – teman yang melihat nya. Apa itu Media object dan Bagaimana cara membuatnya akan kita bahas seengkapnya pada tutorial kali ini.
Section Artikel
Dasar Media Object
Media Object adalah salah satu komponen bootstrap yang digunakan untuk membuat kumpulan komponen yang komplek dan berulang dimana beberapa media (Seperti gambar) biasanya ditempatkan di samping nya.
Kebanyakan Media Object ditempatkan di awal suatu website atau pada blok untuk membuat komentar. Karena sifatnya yang lebih cocok digunakan sebagai highlight dari sebuah website.
Dibawah ini adalah suatu contoh object media tunggal. Untuk membuat nya kita hanya perlu 2 class yaitu .media dan .media-body. Class .media ditambahkan pada elemen induk seperti div dan class .media-body ada didalamnya.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap/title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Media Object</h2> <div class="media border p-3"> <img src="https://dosenit.com/wp-content/uploads/2020/11/avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John <small><i>Diposting pada 16 November 2020</i></small></h4> <p>Ini adalah body atau isi dari media object dengan class media-body.</p> </div> </div> </div> </body> </html>
Sedikit penjelasan:
- class
.mt-3berarti element tersebut memiliki margin top=3rem (“m” menandakan margin, t menandakan top) - class
.p-3berarti element tersebut memiliki padding sebesar 3 rem.
Media Object Bersarang
Media object juga dapat digunakan bersarang, yaitu dengan menambahkan tag div (atau tag lain) dengan class .media didalam tag yang memiliki class .media-body.
contohnya seperti dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Nested Media Objects</h2>
<div class="media border p-3">
<img src="https://dosenit.com/wp-content/uploads/2020/11/avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John <small><i>Diposting pada 16 November 2020</i></small></h4>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<div class="media p-3">
<img src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>John <small><i>Diposting pada 16 November 2020</i></small></h4>
<p>Ini adalah body atau isi dari media object bersarang dengan class media-body.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Media Object dengan gambar rata kanan
Untuk membuat media object dengan rata kanan, yaitu dengan menempatkan gambar setelah element dengan class .media-body. contohnya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Media Object dengan rata kanan</h2>
<div class="media border p-3">
<div class="media-body">
<h4>John <small><i>Diposting pada 16 November 2020</i></small></h4>
<p>Ini adalah body atau isi dari media object dengan class media-body. Dan dikanan akan muncul gambar</p>
</div>
<img src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
</div>
</body>
</html>
Perataan atas, bawah, dan tengah
Untuk membuat perataan menggunakan komponen utilitas dari bootstrap yaitu flex, dengan class .align-self-* .untuk menempatkan content media di atas (start), tengah (center), atau dibawah (end). Lebih lengkapnya dapat teman – teman lihat di CSS reference align-self.
contoh penggunaannya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Media Object</h2>
<!-- Media top -->
<div class="media">
<img src="https://dosenit.com/wp-content/uploads/2020/11/avatar.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>edia dengan class align-self-start</h4>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
</div>
</div>
<!-- Media middle -->
<div class="media mt-3">
<img src="https://dosenit.com/wp-content/uploads/2020/11/avatar.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>edia dengan class align-self-center</h4>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
</div>
</div>
<!-- Media bottom -->
<div class="media mt-3">
<img src="https://dosenit.com/wp-content/uploads/2020/11/avatar.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media dengan class align-self-end</h4>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
<p>Ini adalah body atau isi dari media object dengan class media-body.</p>
</div>
</div>
</div>
</body>
</html>Sekian penjelasan mengenai media object dari saya, teman – teman dapat modifikasi sendiri sesuai dengan kebutuhan dari website teman – teman. Terima kasih
