English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In questa sezione esploreremo gli oggetti multimediali di Bootstrap, come immagini, video, audio ecc. Lo stile degli oggetti multimediali può essere utilizzato per creare vari tipi di componenti (ad esempio: commenti del blog), possiamo utilizzare la combinazione di testo e immagini nei componenti, le immagini possono essere allineate a sinistra o a destra. Gli oggetti media possono essere implementati con meno codice per ottenere la combinazione di testo e immagini.
Iniziamo con un esempio:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Oggetto media predefinito</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>Oggetto multmedia</h2> <p>Utilizza la classe "media-left" per impostare l'allineamento a sinistra degli oggetti multimediali. Il testo deve essere inserito dopo l'immagine.</p> <p>La classe "media-right" viene utilizzata per impostare l'allineamento a destra degli oggetti multimediali.</p><br> <!-- Allineamento a sinistra --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">Allineamento a sinistra</h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> <hr> <!-- Allineamento a destra --> <div class="media"> <div class="media-body"> <h4 class="media-heading">Allineamento a destra</h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> <div class="media-right"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:60px"> </div> </div> </div> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
Aggiungi la classe .media all'elemento <div> per creare un oggetto multimediale.
Utilizza la classe .media-left per allineare a sinistra gli oggetti multimediali (immagini), allo stesso modo la classe .media-right realizza l'allineamento a destra.
Il contenuto del testo deve essere messo nel div, se l'immagine deve essere allineata a sinistra deve essere messa prima di , se deve essere allineata a destra deve essere messa dopo .
Inoltre, puoi utilizzare la classe .media-heading per impostare il titolo.
Vediamo l'esempio seguente riguardante la lista di oggetti .media-list:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap esempio - Oggetti multimediali</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>Oggetto multmedia</h2> <p>Un oggetto multmedia può essere allineato in alto, al centro o in basso, con le classi corrispondenti "media-top", "media-middle" e "media-bottom":</p><br> <div class="media"> <div class="media-left media-top"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">In alto</h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> <hr> <div class="media"> <div class="media-left media-middle"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">Al centro</h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> <hr> <div class="media"> <div class="media-left media-bottom"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:80px"> </div> <div class="media-body"> <h4 class="media-heading">In basso</h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> </div> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
Un oggetto multmedia può contenere anche altri oggetti multimediali:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap esempio - Oggetti multimediali</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>Oggetto multimediale incorporato</h2> <p>È possibile inserire ulteriori oggetti multimediali all'interno di un oggetto multimediale:</p><br> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>Pubblicato il 19 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <!-- Oggetto multimediale incorporato --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>Pubblicato il 19 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <!-- Oggetto multimediale incorporato --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>Pubblicato il 19 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> </div> </div> </div> </div> </div> </body> </html>Prova a Vedere ‹/›
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap esempio - Oggetti multimediali</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>Oggetto multimediale incorporato</h2> <p>È possibile inserire ulteriori oggetti multimediali all'interno di un oggetto multimediale:</p><br> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-1 <small><i>Pubblicato il 19 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <!-- Oggetto multimediale incorporato --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-2 <small><i>Pubblicato il 20 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> <!-- Oggetto multimediale incorporato --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-3 <small><i>Pubblicato il 21 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> </div> <!-- Oggetto multimediale incorporato --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-4 <small><i>Pubblicato il 20 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> </div> </div> <!-- Oggetto multimediale incorporato --> <div class="media"> <div class="media-left"> <img src="https://it.oldtoolbag.com/run/images/img_avatar.png" class="media-object" style="width:45px"> </div> <div class="media-body"> <h4 class="media-heading">w3codebox-5 <small><i>Pubblicato il 19 febbraio 2016</i></small></h4> <p>Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo. Questi sono alcuni esempi di testo.</p> </div> </div> </div> </div> </body> </html>Prova a Vedere ‹/›