Bootstrap kształty zdjęcie
Zaokrąglone rogi:
Okrąg:
Miniaturka:
Zaokrąglone rogi
.img-rounded klasy dodaje zaokrąglone narożniki do obrazka (IE8 nie obsługuje zaokrąglone narożniki):
Przykład
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Spróbuj sam " okrąg
.img-circle klasy kształtuje obraz do okręgu (IE8 nie obsługuje zaokrąglone narożniki):
Przykład
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Spróbuj sam " Miniaturka
.img-thumbnail klasy kształtuje obraz na miniaturkę:
Przykład
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Spróbuj sam " reagujących Images
Obrazy przychodzi we wszystkich rozmiarach. Więc ekranów. Elastyczne obrazy automatycznie dostosować do rozmiaru ekranu.
Tworzenie obrazów reagujących dodając .img-responsive klasę do <img> tagu. Obraz będzie skalować ładnie do elementu nadrzędnego.
.img-responsive klasa ma zastosowanie display: block; i max-width: 100%; i height: auto; do obrazka:
Galeria obrazów
Można również użyć Bootstrap's konstrukcję nośną w połączeniu z .thumbnail klasy do tworzenia galerii zdjęć:
Przykład
<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> Spróbuj sam " reagujących Umieszczone
Także daj filmy lub pokazy slajdów skalować poprawnie na każdym urządzeniu.
Zajęcia mogą być stosowane bezpośrednio do <iframe>, <embed>, <video> i <object> elementów.
Poniższy przykład tworzy elastyczne wideo dodając .embed-responsive-item klasę do <iframe> Tag (film będzie skalować ładnie elementu nadrzędnego). Zawierający <div> określa proporcje filmu wideo:
Przykład
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Spróbuj sam " Co to jest współczynnik proporcji?
Współczynnik kształtu obrazu opisuje proporcjonalną zależność pomiędzy jej szerokości i jego wysokości. Dwa proporcje wspólne wideo są 4: 3 (uniwersalny format wideo z 20. wieku), i 16: 9 (uniwersalne dla telewizji HD i europejskiej telewizji cyfrowej).
Można wybierać pomiędzy dwoma klasami Format obrazu:
<!-- 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>Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»
Kompletna Bootstrap Obraz odniesienia
Pełną odniesienia wszystkich klas graficznych, przejdź do naszej pełnej Bootstrap obraz odniesienia .