Card Bootstrap4

Bootstrap4 ha introdotto un nuovo componente di contenitore flessibile e estensibile chiamato card per sostituire i vecchi componenti panel, well e thumbnail. Include opzioni di intestazione e piè di pagina, vari contenuti, colori di sfondo contestuali e opzioni di visualizzazione potenti. Nella parte seguente, vedrete come utilizzare il componente card.

Scheda semplice

Possiamo creare una scheda semplice utilizzando le classi .card e .card-body di Bootstrap4, come mostrato nell'esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-larghezza, iniziale-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>Carta semplice</h2>
　　<div class="card">
　　　　<div class="card-body">Carta semplice</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Bootstrap4 le carte sono simili a Bootstrap 3 le pannelli, le miniature delle immagini, i well.

Testa e piede

.card-header classe viene utilizzata per creare lo stile della testa della carta, .card-footer classe viene utilizzata per creare lo stile del piede della carta:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-larghezza, iniziale-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>Testa e piede delle carte</h2>
　　<div class="card">
　　　　<div class="card-header">Testa</div>
　　　　<div class="card-body">Contenuto</div>　
　　　　<div class="card-footer">Piede</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Carte a più colori

Bootstrap 4 offre una varietà di classi di sfondo per le carte: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark e .bg-light。

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-larghezza, iniziale-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>Carte a più colori</h2>
　　<div class="card">
　　　　<div class="card-body">Carta di base</div>
　　</div>
　　<br>
　　<div class="card bg-primary text-white">
　　　　<div class="card-body">Carta primaria</div>
　　</div>
　　<br>
　　<div class="card bg-success text-white">
　　　　<div class="card-body">Carta di successo</div>
　　</div>
　　<br>
　　<div class="card bg-info text-white">
　　　　<div class="card-body">Carta informativa</div>
　　</div>
　　<br>
　　<div class="card bg-warning text-white">
　　　　<div class="card-body">Carta di avviso</div>
　　</div>
　　<br>
　　<div class="card bg-danger text-white">
　　　　<div class="card-body">Carta pericolo</div>
　　</div>
　　<br>
　　<div class="card bg-secondary text-white">
　　　　<div class="card-body">Carta secondaria</div>
　　</div>
　　<br>
　　<div class="card bg-dark text-white">
　　　　<div class="card-body">Carta scura</div>
　　</div>
　　<br>
　　<div class="card bg-light text-dark">
　　　　<div class="card-body">Carta leggera</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Titolo, testo e link

Possiamo utilizzare la classe .card-title sull'elemento di testa per impostare il titolo della carta. .card-text viene utilizzata per impostare il contenuto del testo della carta. .card-link viene utilizzata per impostare il colore dei link.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-larghezza, iniziale-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>Titolo, testo e link</h2>
　　<div class="card">
　　　　<div class="card-body">
　　　　　　<h4 class="card-title">Titolo della carta</h4>
　　　　　　<p class="card-text">Esempio di testo. Esempio di testo.</p>
　　　　　　<a href="#" class="card-link">Link della carta</a>
　　　　　　<a href="#" class="card-link">Un altro link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Carta di immagine

Possiamo dare <img> Aggiungi .card-img-top (immagine sopra il testo) o .card-img-bottom (immagine sotto il testo) per impostare la carta di immagine:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-larghezza, iniziale-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>Carta di immagine</h2>
　　<p>Immagine in alto (card-img-top):</p>
　　<div class="card" style="width:400px">
　　　　<img class="card-img-top" src="https://static.oldtoolbag.com/images/mix/img_avatar.png" alt="Immagine della carta" style="larghezza:100%">
　　　　<div class="card-body">
　　　　　　<h4 class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Esempio di testo some example text. John Doe è un architetto e ingegnere</p>
　　　　　　<a href="#" class="btn btn-primary">Vedi Profilo</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>Immagine in basso (card-img-bottom):</p>
　　<div class="card" style="width:400px">
　　　　<div class="card-body">
　　　　　　<h4 class="card-title">Jane Doe</h4>
　　　　　　<p class="card-text">Esempio di testo some example text. Jane Doe è un architetto e ingegnere</p>
　　　　　　<a href="#" class="btn btn-primary">Vedi Profilo</a>
　　　　</div>
　　　　<img class="card-img-bottom" src="https://static.oldtoolbag.com/images/mix/img_avatar.png" alt="Immagine della carta" style="larghezza:100%">
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Se si desidera impostare l'immagine come sfondo, è possibile utilizzare la classe .card-img-overlay:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-larghezza, iniziale-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>Copertura testuale dell'immagine</h2>
　　<p>Se si desidera impostare l'immagine come sfondo, è possibile utilizzare la classe .card-img-overlay:</p>
　　<div class="card img-fluid" style="larghezza:500px">
　　　　<img class="card-img-top" src="https://static.oldtoolbag.com/images/mix/img_avatar.png" alt="Immagine della carta" style="larghezza:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4 class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Esempio di testo some example text. Esempio di testo some example text. Esempio di testo some example text. Esempio di testo some example text.</p>
　　　　　　<a href="#" class="btn btn-primary">Vedi Profilo</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

Bootstrap4 下拉菜单 Bootstrap4 列表组

Tutorial di base Bootstrap4

Card Bootstrap4

Scheda semplice

Testa e piede

Carte a più colori

Titolo, testo e link

Carta di immagine