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 .media
iyo .media-body
hareeraha waxa ku jira. suufka ikhtiyaariga ah iyo margin waxaa lagu xakameyn karaa iyada oo loo marayo isticmaalka kala dheereynta .
Ciwaanka warbaahinta
Ma aniga sidaas oo kale ma ii samayn doontaa? Waa markii aad wajihi lahayd muusiga anigu hadda ma ihi muusikadaada. Maqashay inay qurux badan tahay, garsoore noqo gabdhahayguna way codayn doonaan. Waxaan dareemi karaa finix gudahayga ah. Jannadu way ka masayrtay jacaylkayaga, Malaa'igtuna kor bay ka qaylinayaan. Haa, waxaad i geysaa utopia.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</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 ::before
iyo ::after
walxaha 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 .media
dhex yaal .media-body
shay warbaahinta waalidka.
Ciwaanka warbaahinta
Isagoo taagan jiidda hore marka bambooyinku bilaabaan inay soo dhacaan. Jannadu way ka masayrtay jacaylkayaga, Malaa'igtuna kor bay ka qaylinayaan. Kuma bedeli karo hal milyan oo faraanti ah. Wiil, marka aad ila joogto waan ku dhadhamin doonaa. Dib u noqosho ma jiro. Kahor intaadan ila kulmin waan hagaagsanaa laakiin arrimuhu way cuslaayeen. culus waa madaxa xidha taajka.
Ciwaanka warbaahinta
Salaan gacaliye aan safar qaadno. Haah, waxaynu ka qaylinaynaa malaa'igaha, Oo dhulka kor uga soo da'aya. Wax wanaagsan ku sii dabaal. Carrabka waan qaniini jiray oo neefta ayaan qaban jiray. Waxa aan qalbigaaga ku hayaa in uu ku jiro jeniska maqaarka ku dheggan. Inta aan keligay u socdo si kale. Xagaaga ka dib dugsiga sare markii ugu horeysay ee aan kulanay. Adigu aad baad u hypnotize, ma noqon kartaa shaydaan? Ma noqon kartaa malaa'ig? Waa waqtigii la soo saari lahaa buufinnada waaweyn. Waxay u maleeyeen in aan ka reeban ahay. Bikinis, zucchini, Martinis, ma jiro weenis.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>
Toosin
Warbaahinta ku jirta shay warbaahintu waxa ay la jaanqaadi kartaa adeegaha flexbox ilaa sare (default), dhexe, ama dhamaadka .media-body
macluumaadkaaga.
Warbaahin heersare ah
Waan gon' gelin doonaa iyada. Waxaad dhiibtaa boqol sababood sababta, waxaadna sheegtay inaad runtii tijaabin doonto. Markaa si deggan ayaan u fadhiistay, si xushmad lehna waan ku raacay. Ku habboon dagaalkayga taajka. Maalintii dhalashadaydii 18aadna waxaan helnay tattoos u dhigma. Markaa très chic, haa, iyadu waa classic. Waxaan diyaar u ahay wadadii safar yar.
Waxaan ku socdaa hawada (caawa). Laakin hoos dhulka. Waxaad tahay asal, lama bedeli karo Laakiin nolosha kale waxaan noqon lahaa gabadhaada. Cali ayaanu u kaxnay oo xeebta ku sakhraamay. Waan dheeli karnaa, ilaa aan ka dhimanno, adiga iyo aniga, waxaan ahaan doonnaa dhalinyaro weligiin. Adiga oo ku arkay badhtamaha magaalada oo heesta Buluugga.
<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>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>
Warbaahineed dhexdhexaad ah
Waxay u noqon doontaa qabow sidii qaboojiyaha. Dhamaadka eh-dhammaadka. Anigoo sida shinni u tuma ayaan xariijimahayga kasbaday. Bikinis, zucchini, Martinis, ma jiro weenis. Waxaan rajeynayaa inaad heshay cunto caafimaad leh. Waan dheeli karnaa, ilaa aan ka dhimanno, adiga iyo aniga, waxaan ahaan doonnaa dhalinyaro weligiin. Waxaan ku nool nahay nolosha. Waxaan u samaynaynaa si sax ah. Ereyga waddada, waxaad heshay wax aad i tusto, aniga.
Waxaan rabaa inaan ku arko bandhigga 3D, filim. Waxay yiraahdaan, ka cabso inaadan la mid ahayn kuwa kale, jacaylka mustaqbalka. Qalbigaaga fur. Markaa si deggan ayaan u fadhiistay, si xushmad lehna waan ku raacay. Habeenimadii Jimcaha. Haa, waad nasiib badan tahay haddii aad ku jirto diyaaradeeda. Waxaan noqon doonaa hadiyaddaada, ku siiyo wax wanaagsan oo aad u dabaaldegto.
<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>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>
Warbaahineed hoose oo toosan
Kaalay, midabadaadu ha dillaaceen. Waxaan dareemi karaa iftiinkan gudahayga ku jira. Habeenkii oo dhan way ciyaarayaan, heestaada. Laga soo bilaabo Tokyo ilaa Mexico, ilaa Rio. Dib u noqosho ma jiro. Laakin hoos dhulka. Sixir, midab leh, Mr. Mystery, ee. DNA kala duwan, kuma fahmaan.
Laakin hoos dhulka. Way heshay taas, je ne sais quoi, waad ogtahay. Waxaan arkayaa qoraalka gidaarka. Wiilashu waxay luqunta ka jebiyaan si ay u gurguurtaan wax yar oo qarsoodi ah. I qaado, ta-ta-qaado. Qalbigaaga fur. Waxay u maleeyeen in aan ka reeban ahay. Buum, buum, buum. Xeebta Venice iyo Palm Springs, wakhtiga xagaaga waa wax walba. Soo celi garaacii. (Sidaan yeelno)
<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>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</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 order
hantida (integer-ka aad dooratay).
Warbaahintu
Waan ogahay inay jiri doonto allabari laakiin taasi waa qiimaha. Ma ku dhiiran tahay inaad ii ogolaato inaan arko daarkaaga? Noqo riyadaada dhallintaada caawa. Uh-huh, waan ku arkaa. Dib u noqosho ma jiro. Haa, waanu badinnay kaadhadhkayada kreditka waxaanan ka saarnay baarka. Markaa aan kuu keeno suudhka dhalashadaada. Waxaa laga yaabaa inaad jacayl ku dhacdo markaad la kulanto. Dunidu ku lahayd calaacalaha. Waynidu yuusan ku dejin, oh, haa. Hadda waxaan ka hadlaynaa falaga, helitaanka cidiyahayaga, dhammaan Japanese-y. Afurkaaga iga dhig.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</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. On kaaga <ul>
ama <ol>
, ku dar .list-unstyled
si aad meesha uga saarto nooc kasta oo liiska default browser ah, ka dibna dalbo .media
s <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
Dhammaan gabdhahayga canugga Chanel ilmaha. Markaa waxaad qaadan kartaa keegaaga. Caawa, caawa, caawa, waxaan ku socdaa hawada. Aayar u liqaya cabsidayda, haa haa. Si degdeg ah u koraya oo noqday hillaac. Aad u kulul oo culus, 'Ilaa waaberiga. Sheekadaas sheekadu waxay ku dhammaatay geesinimo hub dhalaalaya. culus waa madaxa xidha taajka.
-
Shayga warbaahinta ku salaysan liiska
Waxaa laga yaabaa inay sabab u tahay dhammaan albaabada la xiray. Sababta mar aad tayda tahay, mar aad aniga tahay. Noqo riyadaada dhallintaada caawa. culus waa madaxa xidha taajka. Xitaa fasax ma aha, wax loo dabaaldego maaha. Duufaan qumman, duufaan qumman.
-
Shayga warbaahinta ku salaysan liiska
Ma ku dhiiran tahay inaad ii ogolaato inaan arko daarkaaga? Dib u noqosho ma jiro. Tani waa markii ugu dambeysay ee aad tiraahdo, ka bacdi safka ugu dambeeya ee aad jebiso. Dhamaadka eh-dhammaadka.
<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>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</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>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</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>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>