Rud meadhanan
Sgrìobhainnean agus eisimpleirean airson cuspair meadhanan Bootstrap gus co-phàirtean fìor ath-aithris a thogail leithid beachdan blog, tweets, agus an leithid.
eisimpleir
Bidh cuspair nam meadhanan a ’ cuideachadh le bhith a’ togail phàirtean iom-fhillte agus ath-aithriseach far a bheil cuid de mheadhanan suidhichte ri taobh susbaint nach eil a’ cuairteachadh nam meadhanan sin. A bharrachd air an sin, bidh e a’ dèanamh seo le dìreach dà chlas riatanach le taing do flexbox.
Gu h-ìosal tha eisimpleir de aon nì meadhan. Chan eil a dhìth ach dà chlas - am pasgadh .mediaagus .media-bodytimcheall air do shusbaint. Faodar smachd a chumail air pleadhag agus iomall roghainneil tro ghoireasan eadar -dhealaichte .
Ceann nam meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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: Chan eilear a’ dèiligeadh ri eileamaidean in-loidhne mar nithean sùbailte
Cha bhith Internet Explorer 10-11 a’ toirt seachad eileamaidean in-loidhne leithid ceanglaichean no ìomhaighean (no ::beforeagus ::aftereileamaidean meallta) mar nithean sùbailte. Is e an aon dòigh-obrach luach neo-loidhne a shuidheachadh display(me, block, , inline-block, no flex). Tha sinn a’ moladh a bhith a’ cleachdadh .d-flex, aon de na goireasan taisbeanaidh againn , mar fhuasgladh furasta.
Stòr: Flexbugs air GitHub
A' neadachadh
Faodaidh nithean meadhanan a bhith air an neadachadh gu neo-chrìochnach, ged a tha sinn a’ moladh gun stad thu aig àm air choreigin. Àite air a neadachadh .mediataobh a-staigh .media-bodynì meadhanan pàrant.
Ceann nam meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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>Co-thaobhadh
Faodaidh meadhanan ann an nì meadhanan a bhith air an co-thaobhadh ri goireasan flexbox gu mullach (bunaiteach), meadhan no deireadh do .media-bodyshusbaint.
Meadhanan àrd-cho-thaobhadh
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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>Meadhanan co-cheangailte ris an ionad
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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>Meadhanan co-thaobhadh gu h-ìosal
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart 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>Òrdugh
Atharraich òrdugh an t-susbaint ann an nithean meadhanan le bhith ag atharrachadh an HTML fhèin, no le bhith a’ cur beagan flexbox CSS àbhaisteach ris gus an ordertogalach a shuidheachadh (gu àireamh iomlan de do roghainn).
Rud meadhanan
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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>Liosta nam meadhanan
Leis gu bheil cho beag de riatanasan structarail aig cuspair nam meadhanan, faodaidh tu cuideachd na clasaichean sin a chleachdadh air liosta eileamaidean HTML. Air do <ul>no <ol>, cuir ris .list-unstyledgus stoidhlichean liosta bunaiteach brabhsair sam bith a thoirt air falbh, agus an uairsin cuir .mediaa-steach air na roghainnean agad <li>. Mar as àbhaist, cleachd goireasan beàrn far a bheil feum air gus gleusadh a dhèanamh.
-
Rud meadhanan stèidhichte air liosta
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus. -
Rud meadhanan stèidhichte air liosta
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am faucibus. -
Rud meadhanan stèidhichte air liosta
Cras sit amet nibh libero, ann an gravida nulla. Nulla no 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 ann am 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>