in English

Ikintu cyitangazamakuru

Inyandiko n'ingero kubitangazamakuru bya Bootstrap kugirango byubake ibice bisubiramo cyane nkibitekerezo bya blog, tweet, nibindi nkibyo.

Urugero

Ikintu cyitangazamakuru gifasha kubaka ibice bigoye kandi bisubirwamo aho ibitangazamakuru bimwe bihagaze hamwe nibirimo bitazengurutse ibitangazamakuru byavuzwe. Byongeye, ikora ibi hamwe nibyiciro bibiri gusa bisabwa dukesha flexbox.

Hasi ni urugero rwikintu kimwe cyitangazamakuru. Ibyiciro bibiri gusa birakenewe-gupfunyika .mediahamwe .media-bodynibirimo. Guhitamo padi na margin birashobora kugenzurwa binyuze mumwanya muto .

Placeholder 64x64
Umutwe w'itangazamakuru

Uzankorera nk'ibyo? Igihe kirageze cyo guhangana numuziki Sinkiri muse wawe. Umva nibyiza, ube umucamanza nabakobwa banje bazatora amajwi. Ndashobora kumva phoenix imbere yanjye. Ijuru rifite ishyari ryurukundo rwacu, abamarayika bararira hejuru. Yego, unjyana muri 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: Imirongo yumurongo ntabwo ifatwa nkibintu byoroshye

Internet Explorer 10-11 ntabwo itanga ibice byumurongo nkumuhuza cyangwa amashusho (cyangwa ::beforena ::afterpseudo-element) nkibintu byoroshye. Igikorwa cyonyine ni ugushiraho umurongo utari umurongo display(urugero ,,, blockcyangwa inline-block) flex. Turasaba gukoresha .d-flex, kimwe mubikorwa byacu byerekana , nkigisubizo cyoroshye.

Inkomoko: Flexbugs kuri GitHub

Icyari

Ibikoresho byitangazamakuru birashobora guterwa bitagira akagero, nubwo turasaba ko uhagarara mugihe runaka. Shyira icyari .mediaimbere .media-bodyyikintu cyababyeyi.

Placeholder 64x64
Umutwe w'itangazamakuru

Guhagarara kumurongo iyo ibisasu bitangiye kugwa. Ijuru rifite ishyari ryurukundo rwacu, abamarayika bararira hejuru. Ntushobora kugusimbuza impeta ya miliyoni. Muhungu, iyo uri kumwe nanjye nzaguha uburyohe. Nta gusubira inyuma. Mbere yuko uhura nanjye nari meze neza ariko ibintu byari kinda biremereye. Ikiremereye ni umutwe wambara ikamba.

Placeholder 64x64
Umutwe w'itangazamakuru

Ndabaramukije abakunzi reka dufate urugendo. Nibyo, dutera abamarayika kurira, imvura igwa kwisi hejuru. Tanga ikintu cyiza cyo kwishimira. Nakundaga kuruma ururimi no guhumeka. Ndi ma kubona umutima wawe wiruka muri jeans yanjye yuzuye uruhu. Nkigenda wenyine wenyine. Impeshyi nyuma yishuri ryisumbuye mugihe twahuye bwa mbere. Urimo hypnotizing cyane, ushobora kuba satani? Urashobora kuba umumarayika? Igihe kirageze cyo kuzana imipira minini. Natekereje ko ari njye. Bikinis, zucchinis, Martinis, nta 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>

Guhuza

Itangazamakuru mubintu byitangazamakuru rishobora guhuzwa na flexbox yingirakamaro hejuru (isanzwe), hagati, cyangwa iherezo .media-bodyryibirimo.

Placeholder 64x64
Itangazamakuru ryo hejuru

Ndi gon 'kumushyira muri koma. Utanze impamvu ijana zibitera, ukavuga ko rwose uzagerageza. Nicaye ntuje, nemera mu kinyabupfura. Nkwiriye urugamba rwanjye. Kandi kumunsi wimyaka 18 y'amavuko twabonye tatouage zihuye. Très chic, yego, ni classique. Niteguye umuhanda muto.

Ndimo kugenda mu kirere (iri joro). Ariko hasi. Uri umwimerere, ntushobora gusimburwa. Ariko mubuzima bundi naba umukobwa wawe. Twerekeje i Cali maze dusinda ku mucanga. Turashobora kubyina, kugeza dupfuye, wowe na njye, tuzaba bato ubuziraherezo. Yakubonye mumujyi uririmba 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
Itangazamakuru rihujwe

Azahinduka ubukonje nka firigo. Kuri eh-iherezo rya byose. Gukomeretsa nk'inzuki Nabonye imirongo yanjye. Bikinis, zucchinis, Martinis, nta weenies. Nizere ko wabonye ipfa ryiza. Turashobora kubyina, kugeza dupfuye, wowe na njye, tuzaba bato ubuziraherezo. Turi mu buzima. Turimo kubikora neza. Ijambo kumuhanda, wabonye somethin 'kunyereka, njye.

Ushaka kureba igitaramo muri 3D, firime. Bati, utinye ko utameze nkabandi, umukunzi wa futuristic. Fungura umutima wawe. Nicaye ntuje, nemera mu kinyabupfura. Ku wa gatanu ushize. Yego, ufite amahirwe niba uri mu ndege ye. Nzakubera impano, nguhe ikintu cyiza cyo kwishimira.

<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
Itangazamakuru rihuza hepfo

Ngwino, reka amabara yawe aturike. Ndashobora kumva urumuri ruri imbere muri njye. Ijoro ryose barimo gukina, indirimbo yawe. Kuva Tokiyo kugera Mexico, kugera i Rio. Nta gusubira inyuma. Ariko hasi. Amayobera, amabara, Bwana Amayobera, ee. ADN zitandukanye, ntibagusobanukirwa.

Ariko hasi. Afite ibyo, je ne sais quoi, urabizi. Ndashobora kubona ibyanditse kurukuta. Abahungu bavunika amajosi try'na kunyerera gato. Mfata, ta-ta-mfata. Fungura umutima wawe. Natekereje ko ari njye. Boom, boom, boom. Venise beach na Palm Springs, impeshyi nibintu byose. Subiza inyuma. (Uku niko tubikora)

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

Tegeka

Hindura gahunda yibirimo mubitangazamakuru uhindura HTML ubwayo, cyangwa wongeyeho flexbox CSS yihariye kugirango ushireho orderumutungo (kuri integer wahisemo).

Ikintu cyitangazamakuru

Nzi ko hazabaho ibitambo ariko nicyo giciro. Ufite ubutwari bwo kundeka nkabona pawusi yawe? Ba inzozi zawe z'ingimbi muri iri joro. Uh-huh, ndakubonye. Nta gusubira inyuma. Yego, twakoresheje amakarita yacu y'inguzanyo maze birukanwa mu kabari. Reka rero nkwinjize mu ikoti yawe y'amavuko. Urashobora gukundana mugihe uhuye na we. Iyaba isi yari mu biganza byawe. Ntureke ngo ubukuru bukumanuke, yewe, yewe yego. Noneho tuvuga kuraguza inyenyeri, kubona imisumari yacu, abayapani-y bose. Ungire Aforodite yawe.

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>

Urutonde rw'itangazamakuru

Kuberako ikintu cyitangazamakuru gifite ibyangombwa bike byubatswe, urashobora kandi gukoresha aya masomo kurutonde rwibintu HTML. Kuri <ul>cyangwa <ol>, ongeraho .list-unstyledkugirango ukureho mushakisha iyariyoyose isanzwe urutonde, hanyuma ukoreshe .mediakuri <li>s. Nkibisanzwe, koresha umwanya utandukanye aho bikenewe kugirango uhuze neza.

  • Placeholder 64x64
    Urutonde rushingiye kubitangazamakuru

    Abakobwa banje bose vintage Chanel mwana. Urashobora rero kugira cake yawe. Iri joro, iri joro, iri joro, ngenda ku kirere. Buhoro buhoro kumira ubwoba bwanjye, yego yego. Gukura vuba mumurabyo. Birashyushye kandi biremereye, 'Til umuseke. Iyo migani irangirana na knight mu ntwaro zaka. Ikiremereye ni umutwe wambara ikamba.

  • Placeholder 64x64
    Urutonde rushingiye kubitangazamakuru

    Ahari impamvu ituma imiryango yose ifunga. Tera iyo umaze kuba uwanjye, iyo umaze kuba uwanjye. Ba inzozi zawe z'ingimbi muri iri joro. Ikiremereye ni umutwe wambara ikamba. Ntabwo ari n'ikiruhuko, nta kintu cyo kwishimira. Umuyaga mwiza, umuyaga mwiza.

  • Placeholder 64x64
    Urutonde rushingiye kubitangazamakuru

    Ufite ubutwari bwo kundeka nkabona pawusi yawe? Nta gusubira inyuma. Nubwa nyuma uvuze, nyuma yumurongo wanyuma ucamo. Kuri eh-iherezo rya byose.

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