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

Tutoriale di base Bootstrap4

Bootstrap4 多媒体对象

Se si desidera creare una layout che contiene oggetti mediatici allineati a sinistra o a destra (ad esempio immagini o video) e contenuti testuali (ad esempio commenti di blog, Tweets ecc.), è possibile farlo facilmente con i nuovi componenti Bootstrap per i media.

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:

Bootstrap offre un modo eccellente per gestire la layout degli oggetti multimediali (immagini o video) e del contenuto. Le applicazioni includono commenti sui blog, Weibo e così via:

Oggetto multimediale di base

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</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 mt-3">
　　<h2>Oggetti Multimediali</h2>
　　<p>Per creare un oggetto multimediale, puoi aggiungere la classe .media all'elemento contenitore e poi mettere il contenuto multimediale nel contenitore figlio, che deve avere la classe .media-body, poi aggiungere margini, padding e altri effetti:</p>
　　<div class="media border p-3">
　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>rete didattica di base</h4>
　　　　　　<p>Impara le basi per andare più lontano!!!</p>　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›

L'effetto dopo l'esecuzione è il seguente:

Annidamento degli oggetti multimediali

Gli oggetti multimediali possono essere annidati in più livelli (un oggetto multimediale contiene un altro oggetto multimediale)

Per annidare oggetti multimediali, puoi mettere un nuovo contenitore .media all'interno del contenitore .media-body:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</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 mt-3">
　　<h2>Annidamento degli oggetti multimediali</h2>
　　<p Gli oggetti multimediali possono essere annidati in più livelli (un oggetto multimediale contiene un altro oggetto multimediale):</p><br>
　　<div class="media border p-3">
　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
　　　　<div class="media-body">
　　　　　　<h4>rete didattica di base</h4>
　　　　　　<p>Impara le basi per andare più lontano!!!</p>
　　　　　　<div class="media p-3">
　　　　　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
　　　　　　　　<div class="media-body">
　　　　　　　　　　<h4>rete didattica di base</h4>
　　　　　　　　　　<p>Impara le basi per andare più lontano!!!</p>
　　　　　　　　</div>
　　　　　　</div>　　
　　　　</div>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›

L'immagine dell'oggetto multimediale viene visualizzata sulla destra

Se vuoi visualizzare l'immagine del profilo sulla destra, puoi aggiungere l'immagine dopo il contenitore .media-body:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</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 mt-3">
　　<h2>Visualizzazione dell'immagine sulla destra</h2>
　　<p>Se vuoi visualizzare l'immagine del profilo sulla destra, puoi aggiungere l'immagine dopo il contenitore .media-body:</p>
　　<div class="media border p-3">
　　　　<div class="media-body">
　　　　　　<h4>rete didattica di base</h4>
　　　　　　<p>Impara le basi per andare più lontano!!!</p>　　　　　　
　　　　</div>
　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
　　</div>
</div>
</body>
</html>
测试看看 ‹/›

Posizionare l'immagine multimediale

Puoi utilizzare le classi correlate a <code>align-self-*</code> per impostare la posizione dell'immagine degli oggetti multimediali:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</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 mt-3">
　　<h2>Oggetti Multimediali</h2>
　　<p>Puoi utilizzare le classi correlate a <code>align-self-*</code> per impostare la posizione dell'immagine degli oggetti multimediali:</p><br>
　　<!--　intestazione　-->
　　<div class="media">
　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>Intestazione　--　Guida di Base (oldtoolbag.com)</h4>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　</div>
　　</div>
　　<!--　centrato　-->
　　<div class="media mt-3">
　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>居中 -- 基础教程(oldtoolbag.com)</h4>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　</div>
　　　</div>
　　<!-- 底部 -->
　　<div class="media mt-3">
　　　　<img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
　　　　<div class="media-body">
　　　　　　<h4>底部 -- 基础教程(oldtoolbag.com)</h4>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　　　<p>学好基础知识，才能走得更远！！</p>
　　　　</div>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›
Bootstrap4 Flex 布局