Bootstrap Forme Immagine
Angoli arrotondati:
Cerchio:
Miniatura:
Angoli arrotondati
Il .img-rounded classe aggiunge angoli arrotondati per un'immagine (IE8 non supporta gli angoli arrotondati):
Esempio
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Prova tu stesso " Cerchio
Il .img-circle di classe dà forma l'immagine di un cerchio (IE8 non supporta gli angoli arrotondati):
Esempio
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Prova tu stesso " Thumbnail
Il .img-thumbnail classe modella l'immagine di una miniatura:
Esempio
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Prova tu stesso " Immagini responsive
Immagini disponibile in tutte le taglie. Quindi fare schermi. immagini Responsive regolano automaticamente per adattarsi alle dimensioni dello schermo.
Creare immagini responsive con l'aggiunta di un .img-responsive classe al <img> tag. L'immagine viene poi scalare bene per l'elemento principale.
Il .img-responsive classe si applica display: block; e max-width: 100%; e height: auto; all'immagine:
galleria di immagini
È inoltre possibile utilizzare Bootstrap's sistema di griglia in collaborazione con il .thumbnail classe per creare una galleria di immagini:
Esempio
<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> Prova tu stesso " Incorpora responsive
consentono anche video o presentazioni scala correttamente su qualsiasi dispositivo.
Le classi possono essere applicati direttamente alle <iframe>, <embed>, <video> e <object> elementi.
L'esempio seguente crea un video di risposta con l'aggiunta di un .embed-responsive-item di classe a un <iframe> tag (il video sarà poi scalare bene per l'elemento principale). L'contenente <div> definisce il rapporto di aspetto del video:
Esempio
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Prova tu stesso " Qual è il rapporto di aspetto?
Le proporzioni di un'immagine descrive il rapporto proporzionale tra la larghezza e la sua altezza. Due proporzioni video più comuni sono 4: 3 (il formato video universale del 20 ° secolo), e 16: 9 (universale per la televisione HD e televisione digitale europea).
Si può scegliere tra due classi rapporto di formato:
<!-- 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>Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
Completa Bootstrap immagine di riferimento
Per un riferimento completo di tutte le classi di immagine, vai alla nostra completa Bootstrap immagine di riferimento .