Bootstrap ile media sınıfı kullanımı hakkında kısa bir bilgi anlatacağım.
Media Sınıfı nedir?
Bloglarda, Haber Sitelerinde v.b bir çok projenizde kullanabileceğiniz görsel ve yazının hizalanması yerleştirilmesi için media sınıfına ihtiyaç vardı. Lafı daha fazla uzatmadan media sınıfını örneklerle size anlatmaya başlayalım.
Basit Kullanımı
<!doctype html>
<html lang="en">
<head>
<title>Merhaba Dünya!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/customize.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Bootstrap Media Class</h1>
<!-- ÖRNEK 1 -->
<div class="media">
<img class="mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0">Medya Başlık</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies. Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu. Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae. Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.
</div>
</div>
<!-- ÖRNEK 1 // -->
<hr />
<!-- ÖRNEK 2 -->
<div class="media">
<img class="mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0">Medya Başlık</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies. Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu. Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae. Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.
<div class="media mt-3">
<a class="pr-3" href="#">
<img class="mr-3" src="img/sample.jpg" alt="Örnek Görsel">
</a>
<div class="media-body">
<h5 class="mt-0">Medya Başlık</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies. Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu. Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae. Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.
</div>
</div>
</div>
</div>
<!-- ÖRNEK 2 // -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sonuç:
Hizalamalar
Hizalamalar eklediğiniz görsel ile yazının hizalanmasında size yardımcı sınıflar vermektedir.
.align-self-start – Yazıya göre görseli en üste yerleştirir.
.align-self-center – Yazıya göre görseli ortalar.
.align-self-end – Yazıya göre görseli en alta yerleştirir.
<!doctype html>
<html lang="en">
<head>
<title>Merhaba Dünya!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/customize.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Bootstrap Media Class</h1>
<!-- ÖRNEK 1 -->
<div class="media">
<img class="align-self-start mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies.</p>
<p>Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu.</p>
<p>Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae.</p>
<p>Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.</p>
</div>
</div>
<!-- ÖRNEK 1 // -->
<hr />
<!-- ÖRNEK 2 -->
<div class="media">
<img class="align-self-center mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies.</p>
<p>Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu.</p>
<p>Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae.</p>
<p>Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.</p>
</div>
</div>
<!-- ÖRNEK 2 // -->
<hr />
<!-- ÖRNEK 3 -->
<div class="media">
<img class="align-self-end mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies.</p>
<p>Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu.</p>
<p>Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae.</p>
<p>Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.</p>
</div>
</div>
<!-- ÖRNEK 3 // -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sonuç:
Sıralama
Yukarıdaki örneklerde görselimizi sola yazımızıda sağa eklemiştik tabii ki bunun tam tersini de yapmamız mümkün küçük bir yer değişikliği ile nasıl görselimizi sağa yazımızı sola nasıl alabiliriz örnekle görelim.
<!doctype html>
<html lang="en">
<head>
<title>Merhaba Dünya!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/customize.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Bootstrap Media Class</h1>
<!-- ÖRNEK 1 -->
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Top-aligned media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus lacus ipsum, fermentum viverra nulla sodales non. Integer finibus posuere ultricies.</p>
<p>Vivamus hendrerit ligula nulla, lobortis commodo lacus aliquam nec. Cras odio dui, ultricies sed vestibulum eu, vehicula et arcu.</p>
<p>Praesent sed sapien eget eros sodales iaculis. Cras hendrerit laoreet quam, quis molestie libero pretium vitae.</p>
<p>Vivamus maximus quam id ipsum ornare scelerisque. Pellentesque sagittis erat at ornare sagittis.</p>
</div>
<img class="ml-3" src="img/sample.jpg" alt="Örnek Görsel">
</div>
<!-- ÖRNEK 1 // -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sonuç:
Listeleme
Projelerinizde kullanabileceğiniz listeleme olacak öğeleriniz için en son örneğimizi de yapalım.
<!doctype html>
<html lang="en">
<head>
<title>Merhaba Dünya!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/customize.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Bootstrap Media Class</h1>
<!-- ÖRNEK 1 -->
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="img/sample.jpg" alt="Örnek Görsel">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
<!-- ÖRNEK 1 // -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sonuç:
Bu yazı yorumlara kapalı.