Bootstrap’e Medya Ekleme: Kapsamlı Bir Kılavuz
Bootstrap, web geliştirmeyi kolaylaştıran güçlü bir CSS çerçevesidir. Medya öğelerini web sayfalarınıza sorunsuz bir şekilde eklemenize olanak tanıyan çeşitli özellikler sunar. Bu kapsamlı kılavuzda, Bootstrap’e medya ekleme sürecini adım adım inceleyeceğiz.
Görüntüler Ekleme
Bootstrap, görüntüler eklemek için <img> etiketini kullanır. Görüntü boyutunu ve hizalamasını kontrol etmek için aşağıdaki yardımcı sınıfları kullanabilirsiniz:
- Görüntü Boyutu:
.img-fluid: Görüntüyü kapsayıcıya sığacak şekilde genişletir..img-thumbnail: Görüntüye kenarlık ve yuvarlatılmış köşeler ekler.
- Görüntü Hizalaması:
.float-left: Görüntüyü sola hizalar..float-right: Görüntüyü sağa hizalar..mx-auto: Görüntüyü yatay olarak ortalar.
Örnek:
html
<img src="image.jpg" class="img-fluid mx-auto" alt="Resim Açıklaması">
Videolar Ekleme
Bootstrap, videoları eklemek için <video> etiketini kullanır. Videonun boyutunu ve oynatma kontrollerini kontrol etmek için aşağıdaki yardımcı sınıfları kullanabilirsiniz:
- Video Boyutu:
.embed-responsive: Videoyu kapsayıcıya sığacak şekilde genişletir..embed-responsive-16by9: Videoyu 16:9 en boy oranına ayarlar..embed-responsive-21by9: Videoyu 21:9 en boy oranına ayarlar.
- Oynatma Kontrolleri:
.video-fluid: Videonun kapsayıcıya sığacak şekilde genişlemesini ve oynatma kontrollerini gizlemesini sağlar.
Örnek:
“`html
“`
Ses Dosyaları Ekleme
Bootstrap, ses dosyalarını eklemek için <audio> etiketini kullanır. Ses dosyasının oynatma kontrollerini kontrol etmek için aşağıdaki yardımcı sınıfı kullanabilirsiniz:
- Oynatma Kontrolleri:
.audio-fluid: Ses dosyasının kapsayıcıya sığacak şekilde genişlemesini ve oynatma kontrollerini gizlemesini sağlar.
Örnek:
“`html
“`
Medya Nesneleri Oluşturma
Bootstrap, metin ve medya öğelerini bir araya getirerek medya nesneleri oluşturmanıza olanak tanır. Medya nesneleri, blog gönderileri, haber makaleleri ve diğer içerik türleri için idealdir.
Medya nesneleri oluşturmak için aşağıdaki yardımcı sınıfları kullanabilirsiniz:
.media: Medya nesnesinin ana kapsayıcısını tanımlar..media-body: Medya nesnesinin metin içeriğini içerir..media-leftve.media-right: Medya öğesini sola veya sağa hizalar.
Örnek:
“`html
Medya Nesnesi Başlığı
Medya nesnesi metin içeriği…
“`