Abun jarida
Takaddun bayanai da misalai don abin watsa labarai na Bootstrap don gina abubuwan maimaitawa sosai kamar sharhin blog, tweets, da makamantansu.
Misali
Abun mai jarida yana taimakawa wajen gina hadaddun abubuwa masu maimaitawa inda wasu kafofin watsa labarai ke matsayi tare da abun ciki wanda baya kunshe da abin da aka fada. Bugu da ƙari, yana yin wannan tare da azuzuwan da ake buƙata guda biyu kawai godiya ga flexbox.
A ƙasa akwai misalin abu guda ɗaya na kafofin watsa labarai. Azuzuwan guda biyu kawai ake buƙata - nannade .mediada .media-bodykewaye da abun cikin ku. Za a iya sarrafa mashin zaɓi da gefe ta hanyar abubuwan amfani da tazara .
Jagoran watsa labarai
Haka zaka min haka? Lokaci ya yi da zan fuskanci kidan Ni ba gidan kayan gargajiya ba ne. Ji yana da kyau, zama alkali kuma 'yan mata na za su yi zabe. Zan iya jin phoenix a cikina. Sama tana kishin soyayyarmu, Mala'iku suna kuka daga sama. Eh, ka kai ni utopiya.
<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: Ba a kula da abubuwan layi azaman abubuwa masu sassauƙa
Internet Explorer 10-11 baya mayar da abubuwa na layi kamar hanyoyin haɗin gwiwa ko hotuna (ko ::beforeda ::afterabubuwan ƙirƙira) azaman abubuwa masu sassauƙa. Hanya guda daya tilo ita ce saita displayƙimar mara layi (misali, block, inline-block, ko flex). Muna ba da shawarar amfani da .d-flex, ɗayan kayan aikin nuninmu , azaman gyara mai sauƙi.
Tushen: Flexbugs akan GitHub
Gurasa
Abubuwan kafofin watsa labarai na iya zama gida marar iyaka, kodayake muna ba da shawarar ku tsaya a wani lokaci. Wuri mai gida .mediaa cikin .media-bodyabin kafofin watsa labarai na iyaye.
Jagoran watsa labarai
Tsaye a fagen daga lokacin da bama-bamai suka fara fadowa. Sama tana kishin soyayyarmu, Mala'iku suna kuka daga sama. Ba za a iya maye gurbin ku da zobe miliyan ba. Yaro, idan kana tare da ni zan ba ka dandano. Babu komawa. Kafin ka same ni lafiya kalau amma abubuwa sun yi nauyi. Nauyi ne kan da ke sa kambi.
Jagoran watsa labarai
Gaisuwa da masoya mu yi tafiya. I, muna sa mala’iku kuka, suna ruwan sama a duniya daga sama. Ba ku wani abu mai kyau don bikin. Na kasance ina cizon harshena ina rike numfashina. Zan iya sa zuciyar ku ta yi tsalle a cikin wando na masu matse fata. Yayin da nake tafiya ni kadai zuwa wani bugun daban. Summer bayan makarantar sakandare lokacin da muka fara haduwa. Kuna da kwarjini sosai, shin za ku iya zama shaidan? Za ku iya zama mala'ika? Lokaci yayi da za a fitar da manyan balloons. Tunani cewa ni banda. Bikinis, zucchini, Martinis, babu miya.
<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>Daidaitawa
Mai jarida a cikin abin mai jarida na iya daidaitawa tare da kayan aikin flexbox zuwa sama (tsoho), tsakiya, ko ƙarshen .media-bodyabun cikin ku.
Kafofin watsa labarai masu daidaitawa
Zan saka ta a suma. Kuna ba da dalilai ɗari dalili, kuma kun ce da gaske za ku gwada. Don haka na zauna shiru, na yarda cikin ladabi. Wanda ya dace da yaƙi na rawa. Kuma a ranar Haihuwata na 18 mun sami madaidaicin jarfa. Don haka très chic, eh, tana da kyan gani. Ina shirye don hanya ƙasa da tafiya.
Ina tafiya akan iska (daren yau). Amma kasa kasa. Kai asali ne, ba za a iya maye gurbin ku ba. Amma a wata rayuwa zan zama yarinyar ku. Muka wuce zuwa Cali muka bugu a bakin ruwa. Za mu iya rawa, har sai mun mutu, ni da kai, za mu zama matasa har abada. Na gan ku cikin gari kuna waƙar Buluu.
<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>Kafofin watsa labarai masu daidaitawa
Za ta yi sanyi a matsayin firiza. A karshen eh-karshensa duka. Hargitsi kamar kudan zuma na sami ratsina. Bikinis, zucchini, Martinis, babu miya. Ina fatan kun sami koshin lafiya. Za mu iya rawa, har sai mun mutu, ni da kai, za mu zama matasa har abada. Muna rayuwa. Muna yin daidai. Magana a kan titi, kun sami wani abu don nuna mani, ni.
Ina son ganin nunin a cikin 3D, fim. Suna cewa, ku ji tsoro ba kamar sauran ba, masu son gaba. Bude zuciyar ku. Don haka na zauna shiru, na yarda cikin ladabi. Daren juma'a da ya gabata. Eh, kun yi sa'a idan kuna cikin jirginta. Zan zama kyautar ku, in ba ku wani abu mai kyau don bikin.
<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>Kafofin watsa labarai masu daidaitawa
Ku zo, bari launukanku su fashe. Ina iya jin wannan hasken da ke cikina. Duk dare suna wasa, waƙar ku. Daga Tokyo zuwa Mexico, zuwa Rio. Babu komawa. Amma kasa kasa. Sihiri, m, Mr. Mystery, ee. DNA daban-daban, ba sa fahimtar ku.
Amma kasa kasa. Ta samu haka, je ne sais quoi, ka san shi. Ina iya ganin rubutun a bango. Yaran sun karya wuyansu suna ƙoƙarin yin ɗan leƙen asiri. Ku ɗauke ni, ta-ta- ɗauke ni. Bude zuciyar ku. Tunani cewa ni banda. Bum, bum, bum. bakin tekun Venice da Palm Springs, lokacin bazara shine komai. Dawo da bugun baya. (Haka muke yi)
<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>Oda
Canja tsarin abun ciki a cikin abubuwan kafofin watsa labarai ta hanyar gyara HTML ɗin kanta, ko ta ƙara wasu akwatunan flexbox CSS don saita orderkadarorin (zuwa adadin zaɓin da kuka zaɓa).
Abun jarida
Na san za a yi sadaukarwa amma farashin ke nan. Kin isa ki barni na ga dawalarki? Kasance mafarkin ku na matashi yau da dare. Uh-huh, na gan ku. Babu komawa. Ee, mun kara yawan katunan kuɗin mu kuma an kore mu daga mashaya. Don haka bari in sa ku cikin kwat din ranar haihuwa. Kuna iya soyayya idan kun haɗu da ita. Da duniya a tafin hannunka. Kada girman girman ku ya ragu, oh, eh. Yanzu muna magana astrology, samun kusoshi sun yi, duk Jafananci-y. Ka maishe ni da Aphrodite.
<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>Jerin watsa labarai
Saboda abin watsa labarai yana da ƴan buƙatun tsari, zaku iya amfani da waɗannan azuzuwan akan abubuwan HTML. A kan naku <ul>ko <ol>, ƙara .list-unstyleddon cire kowane salon jeri na tsoho mai bincike, sannan a yi amfani .mediada <li>s na ku. Kamar koyaushe, yi amfani da abubuwan amfani tazara a duk inda ake buƙata don daidaitawa.
-
Abu na tushen lissafin
Duk 'yan mata na na da Chanel baby. Don haka za ku iya yin cake ɗin ku. Daren yau, daren yau, daren yau, ina tafiya akan iska. Ahankali yana hadiye tsoro na, eh eh. Girma da sauri zuwa cikin kullin walƙiya. Don haka zafi da nauyi, 'Har alfijir. Wannan tatsuniya ta ƙare da jarumi a cikin sulke mai haskakawa. Nauyi ne kan da ke sa kambi.
-
Abu na tushen lissafin
Wataƙila dalilin da yasa duk kofofin ke rufe. Domin da zarar ka zama nawa, da zarar ka zama nawa. Kasance mafarkin ku na matashi yau da dare. Nauyi ne kan da ke sa kambi. Ba ma biki ba ne, babu abin da za a yi biki. Cikakken hadari, cikakken hadari.
-
Abu na tushen lissafin
Kin isa ki barni na ga dawalarki? Babu komawa. Wannan shine karo na ƙarshe da kuka faɗi, bayan layi na ƙarshe kun karya. A karshen eh-karshensa duka.
<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>