Ihe mgbasa ozi
Akwụkwọ na ihe atụ maka ihe mgbasa ozi Bootstrap iji wuo akụrụngwa na-emegharị ugboro ugboro dị ka nkọwa blọgụ, tweet na ihe ndị ọzọ.
Ọmụmaatụ
Ihe mgbasa ozi na- enyere aka wulite ihe mgbagwoju anya ma na-emegharị ugboro ugboro ebe ụfọdụ mgbasa ozi na-edobere n'akụkụ ọdịnaya nke na-adịghị agbakọta gburugburu mgbasa ozi kwuru. Na mgbakwunye, ọ na-eji naanị klaasị abụọ achọrọ maka ekele flexbox.
N'okpuru ebe a bụ ọmụmaatụ nke otu ihe mgbasa ozi. Naanị klaasị abụọ ka achọrọ - mkpuchi .mediana .media-bodygburugburu ọdịnaya gị. Enwere ike ijikwa padding na oke nhọrọ site na akụrụngwa oghere .
Isi mgbasa ozi
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na 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 naghị emeso ihe ndị dị n'ahịrị dị ka ihe mgbanwe
Internet Explorer 10-11 anaghị ewepụta ihe inline dị ka njikọ ma ọ bụ onyonyo (ma ọ bụ ::beforeihe ::afterpseudo-elements) dị ka ihe mgbanwe. Naanị ihe na-arụ ọrụ bụ ịtọ displayuru na-abụghị inline (dịka, block, inline-block, ma ọ bụ flex). Anyị na-atụ aro iji .d-flex, otu n'ime ihe ngosi anyị , dị ka ihe ndozi dị mfe.
Isi mmalite: Flexbugs na GitHub
Akwu
Enwere ike idobe ihe mgbasa ozi na-enweghị ngwụcha, n'agbanyeghị na anyị na-atụ aro ka ị kwụsị oge ụfọdụ. Ebe etinyere .median'ime ihe .media-bodymgbasa ozi nne na nna.
Isi mgbasa ozi
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na 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>Nhazi
Mgbasa ozi dị n'ime ihe mgbasa ozi nwere ike ịkwado ya na ngwa flexbox ruo n'elu (ndabere), etiti, ma ọ bụ njedebe nke .media-bodyọdịnaya gị.
Mgbasa ozi jikọtara n'elu
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị.
<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>Mgbasa ozi dabara n'etiti
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị.
<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>Mgbasa ozi jikọtara n'okpuru
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị.
<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>Nye iwu
Gbanwee usoro ọdịnaya n'ime ihe mgbasa ozi site n'ịgbanwe HTML n'onwe ya, ma ọ bụ site n'ịgbakwunye ụfọdụ flexbox CSS iji tọọ akụrụngwa order(na ọnụọgụ nke nhọrọ gị).
Ihe mgbasa ozi
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na 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>Ndepụta mgbasa ozi
N'ihi na ihe mgbasa ozi nwere ihe nhazi dị ole na ole, ị nwekwara ike iji klas ndị a na ndepụta HTML. Na gị <ul>ma ọ bụ <ol>, gbakwunye .list-unstyledka iwepu ụdị ndepụta ndabara ihe nchọgharị ọ bụla, wee tinye .mediana s gị <li>. Dị ka oge niile, jiri akụrụngwa oghere ebe ọ bụla achọrọ ka ọ dị mma.
-
Ihe mgbasa ozi dabere na ndepụta
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na faucibus. -
Ihe mgbasa ozi dabere na ndepụta
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na faucibus. -
Ihe mgbasa ozi dabere na ndepụta
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis na 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>