Objet ya media
Mikanda mpe bandakisa mpo na objet ya media ya Bootstrap mpo na kotonga ba composants oyo ezongelamaka mingi lokola ba commentaires ya blog, ba tweets, mpe bongo na bongo.
Ndakisa
Objet ya média esalisaka kotonga ba composants complexes mpe repetitifs esika ba médias mosusu e positionné pembeni ya contenus oyo ezo envelopper te zinga zinga ya ba médias wana. Plus, esalaka yango kaka na deux classes requises grâce na flexbox.
Awa na se ezali ndakisa ya eloko moko ya media. Bobele bakelasi mibale nde esengeli —kozinga .mediampe .media-bodyzingazinga ya makambo na yo. Padding optionnel na marge ekoki kozala contrôlée na nzela ya ba utilitaires ya espacement .
Motó ya likambo ya bapanzi-nsango
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>Flexbug #12: Ba éléments ya kati ya ligne etalemaka te lokola biloko ya flex
Internet Explorer 10-11 ezongisaka te ba éléments inline lokola ba liens to ba images (to ::beforepe ::afterba pseudo-éléments) lokola ba éléments flex. Likambo bobele moko ya kosilisa ezali ya kotya motuya oyo ezali na kati ya molongo displayte (ndakisa, block, inline-block, to flex). Tozali kopesa likanisi ya kosalela .d-flex, moko ya ba utilitaires na biso ya kolakisa , lokola bobongisi ya pete.
Liziba: Flexbugs na GitHub
Kosala zumbu
Ba objets ya media ekoki kozala infiniment nested, atako tozali kopesa likanisi ete otelema na esika moko boye. Place nested .mediana kati ya .media-bodyya objet ya media moboti.
Motó ya likambo ya bapanzi-nsango
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." class="mr-3" alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>Kobongisa makambo
Media na objet ya media ekoki kozala aligné na ba utilitaires flexbox na likolo (par défaut), na kati, to na suka ya .media-bodycontenus na yo.
Ba médias oyo ezali na molɔngɔ ya likoló
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
Donec sed odio na mokili ya lelo. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Ba médias oyo ezali na boyokani na centre
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
Donec sed odio na mokili ya lelo. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Media oyo ezali na boyokani na nse
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
Donec sed odio na mokili ya lelo. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus.
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Etinda
Bobongola molongo ya makambo na biloko ya media na kobongisa HTML yango moko, to na kobakisa mwa CSS ya flexbox personnalisé mpo na kotya orderpropriété (na motango mobimba oyo oponi).
Objet ya media
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img src="..." class="ml-3" alt="...">
</div>Liste ya ba médias
Lokola objet média ezali na ba exigences structurelles moke, okoki pe kosalela ba classes oyo na ba éléments HTML ya liste. Na <ul>to na yo <ol>, bakisa .list-unstyledmpo na kolongola ba styles nyonso ya liste ya navigateur ya liboso, mpe na nsima salelá .mediana s na yo <li>. Lokola ntango nyonso, salelá ba utilitaires ya espacement bisika nyonso oyo esengeli mpo na kobongisa malamu.
-
Objet ya media oyo esalemi na liste
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus. -
Objet ya media oyo esalemi na liste
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus. -
Objet ya media oyo esalemi na liste
Cras vandi amet nibh libero, na gravida nulla. Nulla vel metus scelerisque liboso ya kosamba. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi oyo ezali na vulputate. Donec lacinia congue felis na kati ya faucibus.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>