Mea hoʻolaha
Nā palapala a me nā hiʻohiʻona no Bootstrap media object e kūkulu i nā mea hana hou e like me nā manaʻo blog, tweets, a me nā mea like.
Laʻana
Kōkua ka mea media i ke kūkulu ʻana i nā ʻāpana paʻakikī a me ka hana hou ʻana kahi i hoʻonoho ʻia ai kekahi mau media ma ka ʻaoʻao o ka ʻike ʻaʻole i hoʻopili ʻia a puni ka media. Hoʻohui, hana ia me ʻelua mau papa pono e hoʻomaikaʻi iā flexbox.
Aia ma lalo kahi laʻana o kahi mea media hoʻokahi. ʻElua wale nō papa e pono ai—ʻo ka ʻōwili ʻana .mediaa me ka .media-bodypuni o kāu ʻike. Hiki ke hoʻomalu ʻia ka padding koho a me ka palena ma o nā pono hana spacing .
Poʻomanaʻo Media
Cras noho 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">
<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: ʻAʻole mālama ʻia nā mea i loko o ka laina e like me nā mea paʻakikī
ʻAʻole hoʻolilo ʻo Internet Explorer 10-11 i nā mea i loko o ka laina e like me nā loulou a i ʻole nā kiʻi (a i ʻole ::beforea me ::afternā pseudo-elements) ma ke ʻano he mau mea maʻalahi. ʻO ka hana hoʻoponopono wale nō ka hoʻonohonoho ʻana i kahi displaywaiwai laina ʻole (e laʻa, block, inline-block, a i ʻole flex). Manaʻo mākou e hoʻohana i .d-flexkekahi o kā mākou mau pono hōʻike ma ke ʻano he hoʻoponopono maʻalahi.
Puna: Flexbugs ma GitHub
Nesting
Hiki ke hoʻopaʻa ʻia nā mea Media, ʻoiai ke manaʻo nei mākou e kū ʻoe i kekahi manawa. E hoʻonoho ʻia i .medialoko .media-bodyo kahi mea hoʻolaha makua.
Poʻomanaʻo Media
Cras noho 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">
<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>Hoʻopololei
Hiki ke hoʻolikelike ʻia ka pāpaʻi i loko o kahi mea hoʻolaha me nā mea pono pahu flexbox i luna (paʻamau), waena, a i ʻole ka hopena o kāu .media-bodyʻike.
Media i hoʻopaʻa ʻia kiʻekiʻe
Cras noho 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.
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.
<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>Media hoʻolike waena
Cras noho 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.
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.
<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 hoʻopololei i lalo
Cras noho 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.
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.
<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>Kauoha
E hoʻololi i ka hoʻonohonoho o ka ʻike ma nā mea media ma ka hoʻololi ʻana i ka HTML ponoʻī, a i ʻole ma ka hoʻohui ʻana i kekahi CSS flexbox maʻamau e hoʻonohonoho i ka orderwaiwai (i ka helu helu āu e koho ai).
Mea hoʻolaha
Cras noho 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">
<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>Papa inoa Media
Ma muli o ka liʻiliʻi o nā koi hoʻolālā o ka mea media, hiki iā ʻoe ke hoʻohana i kēia mau papa ma ka papa inoa o nā mea HTML. Ma kāu a i <ul>ʻole <ol>, hoʻohui i ka .list-unstylede wehe i nā ʻano papa inoa paʻamau o ka polokalamu kele pūnaewele, a laila e hoʻopili .mediai kāu <li>s. E like me nā manawa a pau, e hoʻohana i nā pono hana spacing i nā wahi āpau e pono ai e hoʻokani maikaʻi.
-
Mea hoʻolaha ma ka papa inoa
Cras noho 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. -
Mea hoʻolaha ma ka papa inoa
Cras noho 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. -
Mea hoʻolaha ma ka papa inoa
Cras noho 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.
<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>