Bootstrap Görüntü Şekilleri
Yuvarlatılmış köşeler:
Daire:
Küçük resim:
Yuvarlatılmış köşeler
.img-rounded sınıfı (IE8 köşeleri yuvarlatılmış desteklemez) bir görüntü için yuvarlatılmış köşelere ekler:
Örnek
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Kendin dene " Daire
.img-circle sınıfı bir daire (IE8 köşeleri yuvarlatılmış desteklemez) görüntü şekiller:
Örnek
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Kendin dene " başparmak tırnağı
.img-thumbnail sınıfı küçük resim görüntüyü şekiller:
Örnek
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Kendin dene " duyarlı Görüntüler
Görüntüler tüm boyutlarda gelir. Yani ekranları yapmak. Duyarlı resimler otomatik ekranın boyutuna sığacak şekilde ayarlanır.
Bir ekleyerek duyarlı görüntüler oluşturun .img-responsive etmek sınıfını <img> etiketinin. Görüntü ardından üst elemana güzel dönüşebilecek.
.img-responsive sınıfı uygular display: block; ve max-width: 100%; ve height: auto; Resme:
Resim Galerisi
Ayrıca kullanabilirsiniz Bootstrap's bağlantılı olarak ızgara sistemini .thumbnail bir resim galerisi oluşturmak için sınıfının:
Örnek
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> Kendin dene " duyarlı Gömmeler
Ayrıca video veya slayt herhangi bir cihaz üzerinde düzgün ölçek edelim.
Sınıflar doğrudan uygulanabilir <iframe>, <embed>, <video> ve <object> elemanlar.
Aşağıdaki örnek, bir ekleyerek duyarlı video oluşturur .embed-responsive-item bir etmek sınıfını <iframe> etiketi (the video will then scale nicely to the parent element) . Içeren <div> videonun en boy oranı tanımlar:
Örnek
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Kendin dene " En boy oranı nedir?
Bir görüntünün görüntü oranı genişliği ve yüksekliği arasındaki oransal ilişkiyi açıklar. İki yaygın video boy oranları şunlardır 4: 3 (20. yüzyılın evrensel video formatı) ve 16: (HD televizyon ve Avrupa dijital televizyonu için üniversal) 9.
İki boy oranı sınıfları arasında seçim yapabilirsiniz:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»
Komple Bootstrap Görüntü Referans
Tüm resim sınıflarının tam referans için lütfen tüm gidin Bootstrap Görüntü Referans .