Réad meáin
Déanann doiciméadú agus samplaí le haghaidh meáin Bootstrap comhpháirteanna an-athchleachtach a thógáil cosúil le tuairimí blag, tweets, agus a leithéidí.
Sampla
Cuidíonn réad na meán le comhpháirteanna casta agus athchleachtach a thógáil ina bhfuil roinnt meáin suite taobh le hábhar nach gcuimsítear sna meáin sin. Ina theannta sin, déanann sé é seo gan ach dhá rang riachtanach a bhuíochas le flexbox.
Seo thíos sampla de réad meán amháin. Níl ach dhá rang ag teastáil - an clúdach .mediaagus an .media-bodyt-ábhar timpeall ort. Is féidir stuáil agus corrlach roghnach a rialú trí fhóntais spásála .
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.<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: Ní láimhseáiltear eilimintí inlíne mar mhíreanna solúbtha
Ní fhágann Internet Explorer 10-11 gnéithe inlíne cosúil le naisc nó íomhánna (nó ::beforeeilimintí ::afterbréagacha) mar mhíreanna solúbtha. Is é an t-aon réiteach oibre ná luach neamh-inlíne a shocrú display(m.sh., block, inline-block, nó flex). Molaimid úsáid a bhaint as .d-flex, ceann dár bhfóntais taispeána , mar shocrú éasca.
Foinse: Flexbugs ar GitHub
Neadaithe
Is féidir rudaí meán a neadú gan teorainn, cé go molaimid duit stopadh ag pointe éigin. Áit neadaithe .medialaistigh .media-bodyde réad meán tuismitheora.
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.<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>Ailíniú
Is féidir meáin i réad meán a ailíniú le fóntais flexbox go barr (réamhshocraithe), lár, nó deireadh d' .media-bodyábhar.
Meáin bharr-ailínithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le 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>Meáin lár-ailínithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le 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>Meáin bun-ailínithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le 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>Ordú
Athraigh ord an ábhair i réada meán tríd an HTML féin a mhodhnú, nó trí roinnt flexbox CSS saincheaptha a chur leis chun an t- orderairí a shocrú (go slánuimhir de do rogha féin).
Réad meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.<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>Liosta meáin
Toisc gur beag riachtanas struchtúrach atá ag réad na meán, is féidir leat na haicmí seo a úsáid freisin ar eilimintí liosta HTML. Ar do <ul>nó <ol>, cuir an .list-unstyledchun aon stíleanna liosta réamhshocraithe brabhsálaí a bhaint, agus ansin cuir i bhfeidhm .mediaar do <li>s. Mar is gnáth, bain úsáid as fóntais spásála nuair is gá chun mionchoigeartú a dhéanamh.
-
Réad meáin liosta-bhunaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus. -
Réad meáin liosta-bhunaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus. -
Réad meáin liosta-bhunaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
<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>