Corso di base Bootstrap4

Forme di immagini Bootstrap4

Le immagini sono molto comuni nel design dei siti web moderni. Pertanto, impostare correttamente lo stile delle immagini e posizionarle correttamente sul sito web è molto importante per migliorare l'esperienza utente.

Utilizzando le classi integrate di Bootstrap, è possibile impostare facilmente lo stile delle immagini, ad esempio creare immagini circolari o dare loro un effetto simile a miniature.

Immagine con angoli arrotondati

.rounded classe può far apparire un'immagine con angoli arrotondati:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Immagine con angoli arrotondati</h2>
　　<p>.rounded classe può far apparire un'immagine con angoli arrotondati:</p>　　　　　　　　　　　　
　　<img src="https://it.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

Prova a vedere ‹/›

Immagine circolare

.rounded-circle classe può impostare un'immagine circolare:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Immagine circolare</h2>
　　<p>.rounded-circle classe può impostare un'immagine circolare:</p>　　　　　　　　　　　　
　　<img src="https://it.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">　
</div>
</body>
</html>

Prova a vedere ‹/›

Anteprima delle immagini

La classe .immagine-anteprima viene usata per impostare l'anteprima delle immagini (le immagini hanno bordi):

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Anteprima delle immagini</h2>
　　<p>La classe .immagine-anteprima viene usata per impostare l'anteprima delle immagini (le immagini hanno bordi):</p>　　　　　　　　　　　　
　　<img src="https://it.oldtoolbag.com/run/images/cinqueterre.jpg" class="immagine-anteprima" alt="Cinque Terre">
</div>
</body>
</html>

Prova a vedere ‹/›

Modalità di allineamento delle immagini

Usa la classe .destra-alla-stra per allineare a destra l'immagine, usa la classe .sinistra-alla-stra per allineare a sinistra l'immagine:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Modalità di allineamento delle immagini</h2>
　　<p>Usa la classe .destra-alla-stra per allineare a destra l'immagine, usa la classe .sinistra-alla-stra per allineare a sinistra l'immagine:</p>
　　<img src="https://it.oldtoolbag.com/run/images/paris.jpg" class="sinistra-alla-stra">　
　　<img src="https://it.oldtoolbag.com/run/images/cinqueterre.jpg" class="destra-alla-stra">
</div>
</body>
</html>

Prova a vedere ‹/›

Immagine responsive

Le immagini hanno diverse dimensioni, dobbiamo adattarci automaticamente alle dimensioni dello schermo.

Possiamo aggiungere la classe .img-fluid al tag <img> per impostare un'immagine responsive.

.classe-fluid setta max-width: 100%; , altezza: auto; :

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Immagine responsive</h2>
　　<p>La classe .img-fluid può impostare un'immagine responsive, riduci la dimensione del browser per vedere l'effetto:</p>
　　<img src="https://it.oldtoolbag.com/run/images/paris.jpg" class="img-fluid">
</div>
</body>
</html>

Prova a vedere ‹/›

Jumbotron Bootstrap4 Tabelle Bootstrap4