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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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 ezo rendre 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

<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </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ó

Donec sed odio dui. 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 class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <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

Donec sed odio dui. 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 class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <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

Donec sed odio dui. 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 class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <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

<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 class="ml-3" src=".../64x64" alt="Generic placeholder image">
</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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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>

Objet ya media

Ndakisa

Motó ya likambo ya bapanzi-nsango

Flexbug #12: Ba éléments ya kati ya ligne etalemaka te lokola biloko ya flex

Kosala zumbu

Motó ya likambo ya bapanzi-nsango

Motó ya likambo ya bapanzi-nsango

Kobongisa makambo

Ba médias oyo ezali na molɔngɔ ya likoló

Ba médias oyo ezali na boyokani na centre

Media oyo ezali na boyokani na nse

Etinda

Objet ya media

Liste ya ba médias

Objet ya media oyo esalemi na liste

Objet ya media oyo esalemi na liste

Objet ya media oyo esalemi na liste