Dans une page Web, l'image est à gauche et le contenu est organisé à droite, ce qui est un effet très courant. C'est aussi un objet multimédia. Il s'agit d'un style abstrait qui peut être utilisé pour construire différents types de composants. Les fichiers de version correspondants dans le framework bootstrap sont les suivants:
Moins: Media.less
Sass: _media.scss
Les objets multimédias apparaissent généralement en groupes, et un groupe d'objets multimédias comprend généralement les parties suivantes:
1. Conteneur d'objet multimédia: utilisé pour accueillir tous les contenus des objets multimédias. Le nom de classe doit être utilisé sur le conteneur. médias
2. Objet de l'objet multimédia: généralement une image, et la classe.Media-Object est requise.
3. Le sujet de l'objet multimédia: c'est le contenu sujet de l'objet multimédia. Il peut être n'importe quel élément et nécessite l'utilisation de la classe.
4. Le titre de l'objet multimédia: un titre utilisé pour décrire l'objet multimédia, la class.media-heading est requise.
De plus, les classes .Pull-left et .Pull-droite sont souvent utilisées dans le framework bootstrap pour contrôler la méthode flottante des objets dans les objets multimédias.
Voici leur code source CSS:
.Media, .Media-Body {Overflow: Hidden; Zoom: 1;}. Media, .Media .Media {margin-top: 15px;}. Media: First-Child {margin-top: 0;}. Media-Object {Affichage: Block;}. Media-Heading {margin: 0 0 5px;}. Media>. 10px;}. Media> .Pull-right {margin-left: 10px;}Les styles multimédias sont relativement simples, il suffit de définir l'espacement entre eux;
Jetons un coup d'œil à l'utilisation des objets multimédias:
<h1> Objet de média par défaut </h1> <div> <a href = "#"> <img src = "img / 1.jpg"> </a> <div> <h4> Moonlight dans le bass de lotus </h4> <div> Je suis assez mal à l'aise ces jours-ci. J'étais assis dans la cour ce soir pour profiter de l'air frais, et soudain, je me souvenais de l'étang Lotus que je marchais tous les jours. En cette nuit de pleine lune, je devrais toujours avoir l'air différent. La lune se leva progressivement et le rire des enfants sur la route à l'extérieur du mur ... </div> </div> </div>
Nidification des objets médiatiques
Bootstrap Média OBTIFS NED, placez simplement une autre structure d'objet multimédia dans le corps de l'objet multimédia (.Media-Body). Jetons un coup d'œil à l'application de la nidification des objets multimédias
<h1> nidification des objets multimédias par défaut </h1> <div> <a href = "#"> <img src = "img / 3.jpg"> </a> <div> <h4> Le clair de lune dans l'étang de lotus </h4> <div> Moonlight verse silencieusement sur ces feuilles et ces fleurs comme l'eau fluide. Une mince brume bleue flottait dans l'étang de Lotus. Les feuilles et les fleurs semblent avoir été lavées dans du lait; Ils sont aussi comme des rêves couverts de voile. Bien que ce soit une pleine lune, il y a un faible nuage dans le ciel, donc il ne peut pas briller; Mais je pense que c'est juste l'avantage - un sommeil profond est indispensable, et une sieste a une saveur unique. </div> <div> <a href = "#"> <img src = "img / 4.jpg"> </a> <v> <h4> Voici le contenu imbriqué1111 </h4> <v> quatre côtés de l'étang Lotus, de loin, près, élevés et bas, les arbres et les saules sont les plus. Ces arbres entouraient un étang de lotus; Ils n'étaient que sur le côté du chemin, avec quelques lacunes qui fuient, comme s'ils étaient laissés spécifiquement pour le clair de lune. </div> <div> <a href = "#"> <img src = "img / 5.jpg"> </a> <v> <h4> Voici un contenu imbriqué 2222 </h4> <div> Il y a une montagne éloignée sur les cimes, et c'est juste un peu sans attention. Il y avait aussi un ou deux réverbères qui fuyaient les fissures de l'arbre. Ce qui était apathique, ce sont les yeux des personnes endormies assoiffées. La chose la plus vivante à cette époque est le son des cigales sur les arbres et le son des grenouilles dans l'eau; Mais l'excitation leur appartient, et je n'ai rien </div> </div> </div> </div> </div> </div> </div>
Les effets sont les suivants:
Liste des objets multimédias
Le framework bootstrap fournit un effet d'affichage de liste d'objets multimédias. Lors de l'écriture de structures, vous pouvez utiliser le balise UL et ajouter le nom de classe sur la liste Tag UL.Media, et utiliser la classe sur le tag ul.media.
Par exemple:
<h1> Liste des objets médiatiques </h1> <ul> <li> <a href = "#"> <img src = "img / 1.jpg"> </a> <v> <h4> Liste d'objets multimédias 111 </h4> <v> le long de la pondet Lotus, il s'agit d'une petite route de puce de charbon de charbon délicate. Il s'agit d'une route isolée; Il y a peu de gens qui marchent pendant la journée, et c'est encore plus seul la nuit. Il y a beaucoup d'arbres qui poussent autour de l'étang de Lotus, et ils sont déprimés (2). Sur le côté de la route se trouvaient des saules et des arbres avec des noms inconnus. Par une nuit sans clair de lune, la route était sombre et un peu effrayée par les gens. C'était très bon ce soir, bien que le clair de lune soit encore faible. </div> </div> </li> <li> <a href = "#"> <img src = "img / 2.jpg"> </a> <div> <h4> Média Object List 222 </h4> <div> J'étais le seul sur la route, en marchant avec mes mains derrière mon dos. Ce monde semble être à moi; J'ai aussi l'impression d'être au-delà de mon moi habituel et je suis entré dans un autre monde. J'adore l'excitation et la tranquillité; J'adore vivre en groupe et être seul. Comme ce soir, sous cette vaste lune, vous pouvez penser à n'importe quoi et ne penser à rien, et vous sentirez que vous êtes une personne libre. </div> </div> </li> <li> <a href = "#"> <img src = "img / 3.jpg"> </a> <div> <h4> La liste des objets multimédia 333 </h4> <div> ce que vous devez faire et dire pendant la journée peut être ignoré maintenant. C'est la beauté d'être seul, et j'apprécierai le parfum de lotus sans fin et le clair de lune. Au-dessus de l'étang de lotus sinueux, les feuilles des champs (4) sont partout. Les feuilles sont très hautes, comme la jupe d'un grand danseur. Parmi les couches de feuilles, certaines fleurs blanches sont en pointillés sporadiquement, certains fleurissent gracieusement et certains jouent timidement avec des fleurs; Tout comme les perles, les étoiles dans le ciel bleu et la beauté juste hors du bain. La brise apporte des rayons de parfum, comme si le silence du chant sur les grands bâtiments au loin. </div> </ div> </li> <li> <a href = "#"> <img src = "img / 4.jpg"> </a> <div> <h4> listique d'objets multimédias 444 </h4> <div> Je me souviens soudain de l'histoire de la sélection de Lotus. Lotus Picking est une vieille coutume à Jiangnan. Il semble avoir existé très tôt, mais il était prospère pendant les six dynasties; Nous pouvons le savoir à peu près de la poésie. Ceux qui ont choisi Lotus étaient de jeunes femmes, qui y sont allées dans de petits bateaux et chantant des chansons érotiques (14). Inutile de dire qu'il y a beaucoup de gens qui choisissent le lotus. Il y a aussi des gens qui choisissent le lotus. Ce fut une saison animée et un romantique (15). L'empereur Yuan de Liang (16) l'a dit bien dans "The Lotus Picking Fu":. </div> </div> </li> </ul>
Les effets sont les suivants: