Source

Bagay ti media

Dokumentasion ken dagiti pagarigan para iti banag ti media ti Bootstrap tapno mangbangon kadagiti nangato a maulit-ulit a paset a kas dagiti komento ti blog, dagiti tweet, ken dagiti kapada.

Pagwadan

Ti banag ti media ket tumulong a mangbangon kadagiti komplikado ken maulit-ulit a paset a sadiay ti sumagmamano a media ket naiposision iti abay ti linaon a saan a mangbalkot iti naibaga a media. Plus, aramidenna daytoy nga addaan laeng iti dua a kasapulan a klase gapu iti flexbox.

Iti baba ket maysa a pagarigan ti maymaysa a banag ti media. Dua laeng a klase ti kasapulan—ti pannakabalkot .mediaken ti .media-bodyaglawlaw ti linaonmo. Ti opsional a padding ken margin ket mabalin a makontrol babaen dagiti spacing utilities .

64x64 nga
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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: Dagiti elemento ti inline ket saan a matrato a kas dagiti banag ti flex

Ti Internet Explorer 10-11 ket saan a mangiparang kadagiti inline nga elemento a kas dagiti silpo wenno ladawan (wenno ::beforeken dagiti ::afterpseudo-elemento) a kas dagiti flex a banag. Ti laeng panagliklik ket ti panangikeddeng ti saan nga inline a displaypateg (kas pagarigan, block, inline-block, wenno flex). Isingasingmi ti panagusar iti .d-flex, maysa kadagiti display utilities -mi , kas nalaka a panangtarimaan.

Gubuayan: Flexbugs iti GitHub

Panag-umok

Dagiti banag ti media ket mabalin nga awan patinggana a naisanglad, urayno isingasingmi nga agsardengka iti maysa a punto. Ikabil ti nested .mediaiti uneg ti .media-bodyti maysa a nagannak a media a banag.

64x64 nga
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
64x64 nga
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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 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>

Panagtunos

Ti media iti maysa a banag ti media ket mabalin a maitunos kadagiti flexbox a utilidad iti ngato (default), tengnga, wenno ngudo ti .media-bodylinaonmo.

64x64 nga
Top-aligned a media

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, 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>
64x64 nga
Media a naitunos iti sentro

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, 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>
64x64 nga
Naitunos iti baba a media

Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.

Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, 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>

Ipaipaw-it

Baliwan ti urnos ti linaon kadagiti banag ti media babaen ti panangbalbaliw ti HTML a mismo, wenno babaen ti pananginayon ti sumagmamano a kostumbre a flexbox CSS tapno mangikeddeng ti ordertagikua (iti maysa nga intero a bilang a piliem).

Bagay ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
64x64 nga 
<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>

Listaan ​​ti media

Gapu ta ti banag ti media ket addaan kadagiti bassit unay nga estruktural a kasapulan, mabalinmo pay nga usaren dagitoy a klase kadagiti elemento ti HTML ti listaan. Iti <ul>wenno <ol>, inayon ti .list-unstyledtapno maikkat ti ania man a default nga estilo ti listaan ​​ti browser, ken kalpasanna agaplikar .mediaiti <li>s-mo. Kas iti kanayon, agusarka kadagiti spacing utilities sadinoman a kasapulan tapno ma-fine tune.

  • 64x64 nga
    Listaan-a naibatay a banag ti media
    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
  • 64x64 nga
    Listaan-a naibatay a banag ti media
    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
  • 64x64 nga
    Listaan-a naibatay a banag ti media
    Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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>