Warbaahintu
Dukumeenti iyo tusaalooyin loogu talagalay sheyga warbaahinta Bootstrap si loo dhiso qaybo aadka u soo noqnoqda sida faallooyinka blogga, tweets, iyo wixii la mid ah.
Tusaale
Shayga warbaahintu waxa uu caawiyaa in la dhiso qaybo kakan oo soo noqnoqda halka warbaahinta qaar ay la jaan qaadayaan waxyaabaha aan ku soo koobnayn warbaahinta la sheegay. Intaa waxaa dheer, waxay tan ku samaynaysaa laba fasal oo keliya oo loo baahan yahay iyada oo ay ugu wacan tahay flexbox.
Hoos waxaa ku yaal tusaale hal shay oo warbaahin ah. Laba fasal oo kaliya ayaa loo baahan yahay - duubista .mediaiyo .media-bodyhareeraha waxa ku jira. suufka ikhtiyaariga ah iyo margin waxaa lagu xakameyn karaa iyada oo loo marayo isticmaalka kala dheereynta .
Ciwaanka warbaahinta
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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: Cunsurrada khadka dhexda ah loolama dhaqmo sidii shay dabacsan
Internet Explorer 10-11 kama dhigin curiyayaasha khadka sida isku xirka ama sawirada (ama ::beforeiyo ::afterwalxaha been abuurka ah) sidii walxo dabacsanaan leh. Habka kaliya ee lagu xalin karo waa in la dejiyo qiime aan khad toos ahayn display(tusaale, block, inline-block, ama flex). Waxaan soo jeedinaynaa isticmaalka .d-flex, mid ka mid ah utility our bandhigay , sida hagaajin fudud.
Xigasho: Flexbugs on GitHub
Buul
Walxaha warbaahintu waxay noqon karaan kuwo buul aan dhammaad lahayn, inkastoo aanu kuu soo jeedinayno inaad mar uun joojiso. Meel buul ku .mediadhex yaal .media-bodyshay warbaahinta waalidka.
Ciwaanka warbaahinta
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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>Toosin
Warbaahinta ku jirta shay warbaahintu waxa ay la jaanqaadi kartaa adeegaha flexbox ilaa sare (default), dhexe, ama dhamaadka .media-bodymacluumaadkaaga.
Warbaahin heersare ah
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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 iyo 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>Warbaahineed dhexdhexaad ah
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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 iyo 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>Warbaahineed hoose oo toosan
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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 iyo 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>Dalbo
Beddel sida ay u kala horreeyaan waxyaabaha ku jira walxaha warbaahinta adiga oo wax ka beddelaya HTML laftiisa, ama adoo ku daraya qaar ka mid ah flexbox CSS si aad u dejiso orderhantida (integer-ka aad dooratay).
Warbaahintu
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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>Liiska warbaahinta
Sababtoo ah shayga warbaahintu wuxuu leeyahay shuruudo dhismeed oo yar, waxaad sidoo kale isticmaali kartaa fasaladan liiska HTML. Dusha kaaga <ul>ama <ol>, ku dar .list-unstyledsi aad meesha uga saarto nooc kasta oo liiska caadiga ah ee biraawsarkaaga, ka dibna dalbo .medias <li>. Sida had iyo jeer, isticmaal utility kala fogeynta meel kasta oo aad u baahan tahay si aad u hagaajiso.
-
Shayga warbaahinta ku salaysan liiska
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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. -
Shayga warbaahinta ku salaysan liiska
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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. -
Shayga warbaahinta ku salaysan liiska
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque 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>