English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial Bootstrap Base

Plugin Bootstrap

Immagini Bootstrap

In questa sezione, impareremo il supporto di Bootstrap per le immagini. Bootstrap fornisce tre classi semplici che possono essere applicate alle immagini per aggiungere stili:

  • .img-rounded：Aggiungi border-radius:6px per ottenere angoli arrotondati dell'immagine.

  • .img-circle：Aggiungi border-radius:50% per rendere l'intera immagine rotonda.

  • .img-thumbnail：Aggiungi un padding interno (padding) e un bordo grigio.

Vediamo l'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Esempio - Immagine</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/run/images/download.png" class="img-rounded">
<img src="/run/images/download.png" class="img-circle">
<img src="/run/images/download.png" class="img-thumbnail">
</body>
</html>
Prova a Vedere ‹/›

Il risultato è come segue:

Classe <img>

Le seguenti classi possono essere utilizzate in qualsiasi immagine.

ClasseDescrizioneEsempio
.img-roundedAggiungi angoli arrotondati all'immagine (non supportato da IE8)Prova
.img-circleRende l'immagine rotonda (non supportato da IE8)Prova
.img-thumbnailFunzione di anteprimaProva
.img-responsiveImmagini responsive (si espanderanno bene al contenitore genitore)Prova

Immagini responsive

Aggiungendo la classe .img-responsive al tag <img> per rendere le immagini supportate dalla risposta. 　Le immagini si espanderanno bene al contenitore genitore.

.img-responsive aggiunge lo stile max-width: 100%; e height: auto; alle immagini:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Base Tutorial Website (oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2>Immagini</h2>
	<p>La classe .img-responsive rende le immagini supportate dalla risposta, si espanderà bene al contenitore genitore (visualizza l'effetto cambiando la dimensione della finestra):</p>　　　　　　　　　　　　　　　　　　
	<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>
Prova a Vedere ‹/›
Classi Ausiliarie BootstrapPulsanti Bootstrap