in English

Nchumu wa vuhangalasi bya mahungu

Matsalwa na swikombiso swa nchumu wa vuhangalasi bya mahungu wa Bootstrap ku aka swiphemu leswi phindha-phindhiwaka swinene ku fana na mavonelo ya blog, ti-tweet, na swin’wana swo fana na swona.

Xikombiso

Nchumu wa vuhangalasi bya mahungu wu pfuneta ku aka swiphemu leswi rharhanganeke na ku phindha-phindha laha swihangalasamahungu swin’wana swi vekiwaka etlhelo ka swilo leswi nga phutselangiki swihangalasamahungu leswi vuriweke. Plus, yi endla leswi hi ti class timbirhi ntsena leti lavekaka thanks to flexbox.

Laha hansi ku na xikombiso xa nchumu wun’we wa vuhangalasi bya mahungu. Ku laveka titlilasi timbirhi ntsena—ku phutsela .mediani ku .media-bodyrhendzela rungula ra wena. Padding na margin leyi nga hlawuriwa swi nga lawuriwa hi ku tirhisa switirhisiwa swa ku hambana .

Placeholder 64x64
Nhlokomhaka ya swihangalasamahungu

Xana u ta ndzi endlela leswi fanaka? I nkarhi wo langutana na vunanga a ndza ha ri muse wa wena. Twile swi sasekile, va muavanyisi na vanhwanyana va mina va ta teka vhoti. Ndzi twa phoenix endzeni ka mina. Tilo ri na mavondzo hi rirhandzu ra hina, tintsumi ti rila ti huma ehenhla. Yeah, u ndzi yisa e 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: Swiaki swa le ndzeni ka layini a swi tekiwi tanihi swilo swa flex

Internet Explorer 10-11 a yi hundzuluxeli swiaki swa le ndzeni ka layini swo fana na swihlanganisi kumbe swifaniso (kumbe ::beforena ::afterswiaki swa vuxisi) tanihi swilo swo olova. Ntlhantlho wun’we ntsena i ku veka displayntikelo lowu nga riki wa le ndzeni ka layini (xikombiso, block, inline-block, kumbe flex). Hi ringanyeta ku tirhisa .d-flex, yin’wana ya switirhisiwa swa hina swo kombisa , tanihi ku lulamisa ko olova.

Xihlovo: Flexbugs eka GitHub

Ku endla swisaka

Swilo swa midiya swi nga ha pfaleriwa hi ndlela leyi nga heriki, hambileswi hi ringanyetaka leswaku u yima hi nkarhi wo karhi. Veka nested .mediaendzeni ka .media-bodyya nchumu wa media wa mutswari.

Placeholder 64x64
Nhlokomhaka ya swihangalasamahungu

Ku yima emahlweni loko tibomo ti sungula ku wa. Tilo ri na mavondzo hi rirhandzu ra hina, tintsumi ti rila ti huma ehenhla. A swi nge swi koti ku ku siva hi miliyoni wa swingwavila. Mufana, loko u ri na mina ndzi ta ku nyika nantswo. A ku na ku tlhelela endzhaku. Before u hlangana na mina a ndzi ri alright kambe swilo a swi ri kinda heavy. Nhloko leyi ambalaka harhi ya tika.

Placeholder 64x64
Nhlokomhaka ya swihangalasamahungu

Mi xeweta varhandziwa ahi tekeni riendzo. Ina, hi endla leswaku tintsumi ti rila, ti na mpfula emisaveni yi ri ehenhla. Ku nyika nchumu lowunene lowu u nga wu tlangelaka. A ndzi tolovele ku luma ririmi ndzi tlhela ndzi khoma moya. Ndzi ma kuma mbilu ya wena yi ba hi jean ya mina leyi nga na skin-tight. Loko ndzi ri karhi ndzi macha ndzi ri ndzexe ndzi ya eka beat leyi hambaneke. Ximumu endzhaku ka xikolo xa le henhla loko hi hlangana ro sungula. U hypnotizing swinene, xana u nga va diyavulosi? Xana u nga va ntsumi? I nkarhi wo humesa swibalesa leswikulu. A ndzi ehleketa leswaku hi mina ndzi nga riki kona. Ti- bikini, ti- zucchini, ti- Martini, ku hava ti- weenies.

<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>

Ku ringanisa

Midiya eka nchumu wa midiya yi nga ringanisiwa na switirhisiwa swa flexbox ehenhla (ya ntolovelo), exikarhi, kumbe emakumu ka .media-bodynhundzu ya wena.

Placeholder 64x64
Swihangalasamahungu leswi ringanisiweke ehenhla

Ndzi ta n'wi veka ekhoma. U nyika dzana ra swivangelo swa leswaku hikokwalaho ka yini, nakona u vula leswaku hakunene u ta ringeta. Hiloko ndzi tshama ndzi miyerile, ndzi pfumela hi ndlela ya xichavo. Ku faneleka nyimpi ya mina ya ku rhwexa harhi. Naswona hi siku ra mina ra ku velekiwa ra vu-18 hi kume ti-tattoo leti fambisanaka. So très chic, yeah, i xikhale xa xikhale. Ndzi lunghekele gondzo leri nga fambiwiki ngopfu.

Ndzi famba emoyeni (vusiku bya namuntlha). Kambe ehansi emisaveni. U original, a wu nge cinciwi. Kambe evuton’wini byin’wana a ndzi ta va nhwanyana wa wena. Hi khandziye movha hi ya eCali hi dakwa eribuweni ra lwandle. Hi nga cina, ku kondza hi fa, mina na wena, hi ta va vantshwa hilaha ku nga heriki. Ndzi ku vonile exikarhi ka doroba u ri karhi u yimbelela vuyimbeleri bya Blues.

<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>
Placeholder 64x64
Swihangalasamahungu leswi ringanisiweke exikarhi

U ta hundzuka a titimela tanihi xigwitsirisi. Eka eh-makumu ya hinkwaswo. Ku luma ku fana na nyoxi ndzi holele swirhendzevutana swa mina. Ti- bikini, ti- zucchini, ti- Martini, ku hava ti- weenies. Ndza tshemba leswaku u kume ku navela swakudya loku hanyeke kahle. Hi nga cina, ku kondza hi fa, mina na wena, hi ta va vantshwa hilaha ku nga heriki. Hi hanya vutomi. Hi swi endla kahle. Rito exitarateni, u na somethin' ku ndzi komba, mina.

Wanna ku vona show hi 3D, movie. Va ri, chava leswaku a wu fani na van’wana, murhandziwa wa vumundzuku. Pfula mbilu ya wena. Hiloko ndzi tshama ndzi miyerile, ndzi pfumela hi ndlela ya xichavo. Ravuntlhanu lowu hundzeke nivusiku. Yeah, u na nkateko loko u ri eka xihahampfhuka xa yena. Ndzi ta va nyiko ya wena, ndzi ku nyika nchumu lowunene wo tlangela.

<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>
Placeholder 64x64
Swihangalasamahungu leswi ringanisiweke ehansi

Tana, tshika mihlovo ya wena yi pfurha. Ndzi nga twa ku vonakala loku ku nga endzeni ka mina. Vusiku hinkwabyo va ri karhi va tlanga, risimu ra wena. Ku suka eTokyo ku ya eMexico, ku ya eRio. A ku na ku tlhelela endzhaku. Kambe ehansi emisaveni. Masalamusi, mihlovo-hlovo, Mr. Xihundla, ee. DNA yo hambana, a va ku twisisi.

Kambe ehansi emisaveni. U na sweswo, je ne sais quoi, wa swi tiva. Ndzi vona leswi tsariweke erirhangwini. Vafana va tshoveka tinhamu try'na ku creep nyana sneak peek. Ndzi teke, ta-ta-ndzi teke. Pfula mbilu ya wena. A ndzi ehleketa leswaku hi mina ndzi nga riki kona. Boom, xihlangi, xihlangi. Ribuwa ra Venice na Palm Springs, nkarhi wa ximumu i hinkwaswo. Vuyisa beat endzhaku. (Hi yona ndlela leyi hi endlaka ha yona)

<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>

Xileriso

Cinca ku landzelelana ka swilo eka swilo swa midiya hi ku cinca HTML hi yoxe, kumbe hi ku engetela CSS yin’wana ya flexbox ya ntolovelo ku veka ordernhundzu (eka nhlayo leyi heleleke leyi u yi hlawulaka).

Nchumu wa vuhangalasi bya mahungu

Ndza swi tiva leswaku ku ta va na magandzelo kambe hi wona nxavo. Xana u ni xivindzi xo ndzi pfumelela ku vona pikoko ya wena? Vana norho wa wena wa malembe ya kondlo-a-ndzi-dyi vusiku lebyi. Uh-huh, ndza ku vona. A ku na ku tlhelela endzhaku. Yeah, hi maxile makhadi ya hina ya xikweleti hi hlongoriwa ebarheni. Kutani ndzi pfumelele ndzi ku nghenisa hi xisuti xa wena xa siku ra ku velekiwa. U nga ha rhandzana loko u hlangana na yena. A a ri na misava evokweni ra wena. U nga pfumeleli vukulukumba byi ku veka ehansi, oh, oh yeah. Sweswi hi vulavula hi vungoma bya tinyeleti, ku kuma swipikiri swa hina swi endliwe, hinkwaswo swa Majapani-y. Ndzi endle Aphrodite ya wena.

Placeholder 64x64
<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>

Nxaxamelo wa swihangalasamahungu

Hikuva nchumu wa midiya wu na swilaveko switsongo swa xivumbeko, u nga ha tlhela u tirhisa titlilasi leti eka swiaki swa HTML swa nxaxamelo. Eka wena <ul>kumbe <ol>, engetela .list-unstyledku susa switayele swihi na swihi swa nxaxamelo wa xiviri wa browser, ivi u tirhisa eka s .mediaya wena . <li>Tanihi minkarhi hinkwayo, tirhisa switirhisiwa swa ku hambana kun’wana ni kun’wana laha swi lavekaka kona leswaku u antswisa kahle.

  • Placeholder 64x64
    Nchumu wa vuhangalasi bya mahungu lowu simekiweke eka nxaxamelo

    Vanhwanyana va mina hinkwavo va vintage Chanel baby. Kutani u nga va ni khekhe ra wena. Vusiku bya namuntlha, vusiku lebyi, vusiku lebyi, ndzi famba emoyeni. Hi ku nonoka ndzi mita ehansi ku chava ka mina, yeah yeah. Ku kula hi ku hatlisa ku va xirhendzevutana xa rihati. Ku hisa swinene naswona ku tika, 'Til dawn.' Ntsheketo wolowo lowu helelaka hi knight leyi ambaleke swisirhelelo leswi hatimaka. Nhloko leyi ambalaka harhi ya tika.

  • Placeholder 64x64
    Nchumu wa vuhangalasi bya mahungu lowu simekiweke eka nxaxamelo

    Kumbexana xivangelo lexi endlaka leswaku tinyangwa hinkwato ti pfala. Cause once u ri wa mina, once u ri wa mina. Vana norho wa wena wa malembe ya kondlo-a-ndzi-dyi vusiku lebyi. Nhloko leyi ambalaka harhi ya tika. A hi hambi ku ri holideyi, a ku na nchumu wo tlangela. Xidzedze lexi hetisekeke, xidzedze lexi hetisekeke.

  • Placeholder 64x64
    Nchumu wa vuhangalasi bya mahungu lowu simekiweke eka nxaxamelo

    Xana u ni xivindzi xo ndzi pfumelela ku vona pikoko ya wena? A ku na ku tlhelela endzhaku. Leri i ro hetelela u vula, endzhaku ka layini yo hetelela u tshoveka. Eka eh-makumu ya hinkwaswo.

<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>