Selo sa boraditaba
Ditokomane le mehlala ya selo sa boraditaba sa Bootstrap go aga dikarolo tše di ipoeletšago kudu go swana le ditshwayotshwayo tša blog, di-tweet, le tše dingwe tše bjalo.
Mohlala
Selo sa boraditaba se thuša go aga dikarolo tše di raraganego le tše di ipoeletšago moo methopo ye mengwe ya ditaba e beilwego go bapa le diteng tšeo di sa phuthelego go dikologa boraditaba bjo bo boletšwego. Plus, e dira se ka diklase tše pedi fela tše di nyakegago ka lebaka la flexbox.
Ka tlase ke mohlala wa selo se tee sa boraditaba. Go nyakega diklase tše pedi feela—go phuthela .mediale go .media-bodydikologa diteng tša gago. Padding ya boikgethelo le margin di ka laolwa ka didirišwa tša go arola sekgoba .
Hlogo ya boraditaba
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka 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: Dielemente tša ka gare ga mothaladi ga di swarwe bjalo ka dilo tša go kobega
Internet Explorer 10-11 ga e tšweletše dielemente tša ka gare ga mothaladi go swana le dikgokagano goba diswantšho (goba ::beforele ::afterdielemente tša maaka) bjalo ka dilo tša go kobega. Tharollo e nnoši ke go beakanya displayboleng bjo e sego bja ka gare ga mothaladi (mohlala, block, inline-block, goba flex). Re šišinya go diriša .d-flex, e nngwe ya didirišwa tša rena tša pontšho , e le tokiso e bonolo.
Mohloli: Flexbugs ka GitHub
Go dira dihlaga
Dilo tša boraditaba di ka tsenywa ka gare ga sehlaga ka mo go sa felego, le ge re šišinya gore o eme ka nako ye nngwe. Bea e tsentšwego .mediaka gare ga .media-bodyya selo sa methopo ya ditaba ya motswadi.
Hlogo ya boraditaba
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka 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>Go logaganya
Media ka gare ga selo sa media e ka logaganywa le didirišwa tša flexbox go ya godimo (ya tlwaelo), bogareng, goba mafelelong a .media-bodyditeng tša gago.
Methopo ya ditaba yeo e logaganywago godimo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša 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>Methopo ya ditaba yeo e lebanego le bogareng
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša 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>Methopo ya ditaba yeo e logaganywago ka fase
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša 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>Tatelano
Fetoša tatelano ya diteng ka go dilo tša boraditaba ka go fetoša HTML ka boyona, goba ka go oketša CSS ye nngwe ya tlwaelo ya flexbox go beakanya orderthepa (go palomoka yeo o e kgethago).
Selo sa boraditaba
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka 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>Lenaneo la boraditaba
Ka lebaka la gore selo sa boraditaba se na le dinyakwa te mmalwa kudu ta sebopego, o ka omia gape diklase te go dielemente ta HTML ta lenaneo. Go ya gago <ul>goba <ol>, oketša .list-unstyledgo tloša mekgwa efe goba efe ya lenaneo la maitirelo la sephephediši, gomme o diriše go s .mediaya gago . <li>Bjalo ka mehleng, diriša didirišwa tša go arola sekgoba kae le kae moo go nyakegago go lokiša gabotse.
-
Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus. -
Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus. -
Selo sa methopo ya ditaba ye e theilwego godimo ga lenaneo
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le sehloohong. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka 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>