Bootstrap Forme imagine
Colturi rotunjite:
Cerc:
miniatură:
Colturi rotunjite
.img-rounded clasa colțuri rotunjite adaugă la o imagine (IE8 nu are suport pentru colturi rotunjite):
Exemplu
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Încearcă - l singur » Cerc
.img-circle clasa modelează imaginea unui cerc (IE8 nu are suport pentru colturi rotunjite):
Exemplu
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Încearcă - l singur » miniatură
.img-thumbnail clasa modelează imaginea într - o miniatură:
Exemplu
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Încearcă - l singur » Imagini Responsive
Imaginile vine în toate dimensiunile. La fel ecrane. imagini Responsive ajusta în mod automat pentru a se potrivi cu dimensiunea ecranului.
Crearea de imagini sensibile prin adăugarea unui .img-responsive clasă la <img> tag - ul. Imaginea va scala apoi frumos la elementul părinte.
.img-responsive clasă se aplică display: block; și max-width: 100%; și height: auto; la imaginea:
Galerie de imagini
Puteți utiliza , de asemenea Bootstrap's sistem grila coroborat cu .thumbnail clasa pentru a crea o galerie de imagini:
Exemplu
<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> Încearcă - l singur » Încorporări Responsive
De asemenea, permiteți clipuri video sau slideshow-uri la scară în mod corespunzător de pe orice dispozitiv.
Clasele pot fi aplicate direct la <iframe>, <embed>, <video> și <object> elemente.
Exemplul următor creează un film sensibil prin adăugarea unui .embed-responsive-item de clasă la o <iframe> tag (the video will then scale nicely to the parent element) . Conținutulului <div> definește raportul de aspect al video:
Exemplu
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Încearcă - l singur » Ce este raportul de aspect?
Raportul de aspect al unei imagini descrie relația proporțională dintre lățimea și înălțimea. Două rapoarte de aspect comun video sunt 4: 3 (formatul video universal al secolului 20), și 16: 9 (universal pentru televiziunea HD și televiziunea digitală europeană).
Puteți alege între două clase de aspect ratio:
<!-- 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>Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
Complet Bootstrap Imagine de referință
Pentru o referință completă a tuturor claselor de imagine, du - te pentru a finaliza noastre Bootstrap imagine de referință .