ናይ ሚድያ ነገር
ሰነዳትን ኣብነታትን ንናይ ቡትስትራፕ ሚድያ ኦብጀክት ከም ብሎግ ርእይቶታት፡ ትዊትን ካልእ ከምኡ ዝኣመሰለን ኣዝዮም ተደጋገምቲ ባእታታት ንምህናጽ።
ኣብነት
እቲ ናይ ሚድያ ነገር ገለ ሚድያታት ኣብ ጎኒ እቲ ዝተባህለ ሚድያ ዘይጠቕለለ ትሕዝቶ ዝቕመጡሉ ዝተሓላለኹን ተደጋገምትን ባእታታት ንምህናጽ ይሕግዝ። ተወሳኺ፡ ሳላ flexbox ክልተ ዘድልዩ ክፍልታት ጥራይ ሒዙ እዩ ነዚ ዝገብሮ።
ኣብ ታሕቲ ኣብነት ናይ ሓደ ናይ ሚድያ ነገራት ኣሎ። ክልተ ክፍልታት ጥራይ እዮም ዘድልዩ- እቲ ምጥቕላልን .media
ኣብ .media-body
ዙርያ ትሕዝቶኻን። ኣማራጺ ፓዲንግን ማርጅንን ብመንገዲ ስፔሲንግ ዩቲሊቲስ ክቆጻጸር ይከኣል ።
ኣርእስቲ ሚድያ
ንስኻኸ ከምኡ ክትገብረለይ ዲኻ፧ ድሕሪ ደጊም ሙዝካ ኣይኮንኩን ዝብል ሙዚቃ ክትገጥሞ ግዜኡ እዩ። ሰሚዐ ጽብቕቲ እያ ዳኛ ኩን ኣዋልደይ ድማ ድምጺ ክወስዳ እየን። ኣብ ውሽጠይ ፊኒክስ ይስምዓኒ ኣሎ። ሰማይ ብፍቕርና ይቐንእ፡ መላእኽቲ ካብ ላዕሊ ይበኽዩ ኣለዉ። እወ ናብ ዩቶፕያ ትወስደኒ ኢኻ።
<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: ኣብ መስመር ዝርከቡ ባእታታት ከም ፍሌክስ ነገራት ኣይሕሰቡን እዮም።
ኢንተርነት ኤክስፕሎረር 10-11 ኣብ መስመር ዝርከቡ ባእታታት ከም መላግቦታት ወይ ምስልታት (ወይ ::before
ከምኡ’ውን ::after
ስውር ባእታታት) ከም ፍሌክስ ነገራት ኣይቅርቦምን እዩ። እቲ እንኮ መፍትሒ ኣብ መስመር ዘይኮነ display
ዋጋ ምቕማጥ እዩ (ንኣብነት, block
, inline-block
, ወይ flex
). ንሕና ንመክር .d-flex
, ሓደ ካብ ናይ ምርኢት ዩቲሊቲታትና , ከም ቀሊል መአረምታ ክትጥቀም።
ምድቃል
ናይ ሚድያ ነገራት ደረት ኣልቦ ክሰፍሩ ይኽእሉ እዮም፣ ዋላ እኳ ኣብ ገለ እዋን ደው ክትብሉ እንተመክር። .media
ኣብ ውሽጢ እቲ .media-body
ናይ ወላዲ ሚድያ ነገራት ተሰዂዑ ኣቐምጦ ።
ኣርእስቲ ሚድያ
ቦምባታት ክወድቁ ምስ ጀመሩ ኣብ ቅድመ ግንባር ደው ምባል። ሰማይ ብፍቕርና ይቐንእ፡ መላእኽቲ ካብ ላዕሊ ይበኽዩ ኣለዉ። ብሚልዮን ቀለቤት ክትክኣካ ኣይክእልን እዩ። ወዲ ምሳይ ምስ ኮንካ ጣዕሚ ክህበካ እየ። ንድሕሪት ዝምለስ የለን። ቅድሚ ምርኻብካ ጽቡቕ ነይሩ ግን ነገራት ገለ ከቢድ እዩ ነይሩ። ኣኽሊል ዝለበሰ ርእሲ ከቢድ እዩ።
ኣርእስቲ ሚድያ
ሰላም ፍቑራት እስከ ጉዕዞ ንግበር። እወ መላእኽቲ ካብ ላዕሊ ንላዕሊ ኣብ ምድሪ እናዘንበና ነብዕዩ። ጽቡቕ ነገር ክትጽንብል ሃብካ። መልሓሰይ ነኺሰ ትንፋሰይ ይሕዝ ነይረ። I'm ma get your heart racing ኣብ ቆርበተይ ስጡም ጂንሰይ። በይነይ ናብ ዝተፈለየ ህርመት እናተጓዕዘ ከለኹ። ሓጋይ ድሕሪ ካልኣይ ደረጃ ትምህርቲ ንመጀመርታ ግዜ ኣብ ዝተራኸብናሉ እዋን። ኣዝዩ ሂፕኖቲዝ ኣለኻ፡ ዲያብሎስ ክትከውን ትኽእል ዲኻ? መልኣኽ ክትከውን ትኽእል ዲኻ፧ ዓበይቲ ባሎናት ንምውጻእ ግዜኡ እዩ። ኣነ ፍሉይ ዝኾንኩ መሲሉኒ። ቢኪኒ፡ ዙኪኒ፡ ማርቲኒ፡ ዊኒ የለን።
<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>
ኣሰላልፋ
ሚድያ ኣብ ሓደ ሚድያ ነገራት ምስ flexbox ዩቲሊቲታት ናብ ላዕሊ (ነባሪ)፣ ማእከል ወይ መወዳእታ .media-body
ትሕዝቶኻ ክስለፍ ይኽእል።
ኣብ ላዕሊ ዝተሰለፉ ሚድያታት
ኣብ ኮማ ከእትዋ እየ። ንምንታይ ከምኡ ከም ዝኾነ ሚእቲ ምኽንያታት ትህብ፡ ናይ ብሓቂ ድማ ክትፍትን ኢኻ ትብል። ስለዚ ስቕ ኢለ ኮፍ ኢለ፡ ብትሕትና ተሰማሚዐ። ንናይ ዘውዲ ውግአይ ዝምጥን። ኣብ መበል 18 ዓመት ልደተይ ድማ ዝሰማማዕ ንቕሳት ጌርና። ስለዚ très chic እወ ክላሲክ እያ። ንውሑድ ዝጓዓዘ መንገዲ ድሉው እየ።
ኣብ ኣየር እየ ዝኸይድ ዘለኹ (ሎሚ ምሸት)። ግን ናብ ምድሪ ዝወርድ። ኦርጅናል ኢኻ፣ ክትትካእ ኣይትኽእልን ኢኻ። ኣብ ካልእ ህይወት ግን ጓልኪ ምኾንኩ። ብመኪና ናብ ካሊ ብምኻድ ኣብ ገምገም ባሕሪ ሰኺርና። ክንስዕስዕ ንኽእል ኢና፣ ክሳብ እንመውት ኣነን ንስኻን ንዘልኣለም መንእሰያት ክንከውን ኢና። ኣብ ማእከል ከተማ ብሉዝ ክትደርፍ ርእየካ።
<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>
ብማእከል ዝተሰለፉ መራኸቢ ብዙሃን
ከም ፍሪዘር ክትዝሕል እያ። ኣብ መወዳእታ ኤህ-መወዳእታ ናይዚ ኩሉ። ከም ንህቢ እናነኸስኩ መስመራተይ ኣታዊ ረኺበ። ቢኪኒ፡ ዙኪኒ፡ ማርቲኒ፡ ዊኒ የለን። ጥዕና ዘለዎ ሸውሃት ከም ዝረኸብኩም ተስፋ እገብር። ክንስዕስዕ ንኽእል ኢና፣ ክሳብ እንመውት ኣነን ንስኻን ንዘልኣለም መንእሰያት ክንከውን ኢና። ህይወት ኢና ንነብር ዘለና። ቅኑዕ ኢና ንገብሮ ዘለና። ቃል ኣብ ጽርግያ፡ ገለ ከተርእዩኒ ረኺብኩምኒ፡ ኣነ።
Wanna see the show in 3D, ሓደ ፊልም. ከምቶም ካልኦት ከምዘይኮንካ ፍርሕ ይብሉ መጻኢ ኣፍቃሪ። ልብኻ ክፈት። ስለዚ ስቕ ኢለ ኮፍ ኢለ፡ ብትሕትና ተሰማሚዐ። ዝሓለፈ ዓርቢ ምሸት። እወ ኣብ ነፋሪታ እንተሃሊኻ ዕድለኛ ኢኻ። ኣነ ህያብካ ክኸውን እየ፡ ጽቡቕ ነገር ክህበካ ጽምብል።
<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>
ኣብ ታሕቲ ዝተሰለፉ ሚድያታት
ንዓ ሕብርታትካ ይፈንጀሩ። እዚ ኣብ ውሽጠይ ዘሎ ብርሃን ይስመዓኒ ኣሎ። ምሉእ ለይቲ ይጻወቱ ኣለዉ ደርፍኻ። ካብ ቶክዮ ናብ ሜክሲኮ፡ ናብ ሪዮ። ንድሕሪት ዝምለስ የለን። ግን ናብ ምድሪ ዝወርድ። ስሕበት ዘለዎ፣ ሕብራዊ፣ ሚስተር ሚስጢር፣ ee. ዝተፈላለየ ዲኤንኤ፡ ኣይርድኡኻን እዮም።
ግን ናብ ምድሪ ዝወርድ። ንሳ ከምኡ ኣለዋ je ne sais quoi ትፈልጥዎ ኢኹም። ኣብ መንደቕ ዘሎ ጽሑፍ ይርእዮ ኣለኹ። እቶም ኣወዳት ክሳዶም ይሰብሩ try'na ንእሽቶ ስኒክ ፒክ ንኽስሕቑ። ውሰደኒ ታ-ታ-ውሰደኒ። ልብኻ ክፈት። ኣነ ፍሉይ ዝኾንኩ መሲሉኒ። ቡም፡ ቡም፡ ቡም. ገማግም ባሕሪ ቬኒስን ፓልም ስፕሪንግስን፡ ግዜ ሓጋይ ኩሉ እዩ። ነቲ ህርመት ምምላስ። (ከምዚ ኢና ንገብር)
<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>
ስርዓት
ቅደም ተኸተል ትሕዝቶ ኣብ ሚድያ ነገራት ንባዕሉ HTML ብምቕያር ምቕያር፣ ወይ ገለ ብሕታዊ ፍሌክስቦክስ CSS ብምውሳኽ ነቲ order
ንብረት ንምቕማጥ (ናብ ዝመረጽካዮ ምሉእ ቁጽሪ)።
ናይ ሚድያ ነገር
መስዋእቲ ከም ዝህሉ እፈልጥ እየ ግን ዋጋ ንሱ እዩ። ፒኮክካ ክርእየኒ ክትፈቕደለይ ትብዓት ዲኻ? ሎሚ ምሸት ናይ ዕድመ ንእስነት ሕልምኻ ኩን። እህ-ሁህ ይርእየካ ኣለኹ። ንድሕሪት ዝምለስ የለን። እወ ናይ ክረዲት ካርድና ማክስ ጌርና ካብቲ ባር ተባሪርና። ስለዚ ናይ ልደት ኮስትሞ ከእትወካ። ምስኣ ምስ ረኸብካያ ኣብ ፍቕሪ ክትወድቕ ትኽእል ኢኻ። ዓለም ኣብ ጨጉሪ ኢድካ ነይርዋ። እቲ ዕብየት ከውርደካ ኣይትፍቀደሉ ኣየ እወ እወ። ሕጂ ንሕና ምዝራብ ስነ-ኮኾብ፣ ጽፍርና ምግባር ምግባር፣ ኩሉ ጃፓናዊ-y. ኣፍሮዳይትካ ግበረኒ።
<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>
ዝርዝር ሚድያታት
እቲ ናይ ሚድያ ነገራት ኣዝዩ ውሑድ መዋቕራዊ ጠለባት ስለዘለዎ፡ ነዞም ክፍልታት ኣብ ዝርዝር HTML ባእታታት እውን ክትጥቀመሎም ትኽእል ኢኻ። ኣብ ናትካ <ul>
ወይ ፣ ዝኾነ ናይ መርበብ ሓበሬታ ነባሪ ቅዲ ቅዲታት ንምእላይ <ol>
ዝብል ወስኸሉ ፣ ድሕሪኡ ኣብ s ካ ተግባራዊ ግበሮ። ከም ወትሩ ንምጽራይ ኣብ ዘድልየሉ ቦታ ናይ ርሕቀት ዩቲሊቲታት ተጠቐም።.list-unstyled
.media
<li>
-
ኣብ ዝርዝር ዝተመርኮሰ ናይ ሚድያ ነገራት
ኩለን ኣዋልደይ ቪንታይጅ ሻነል ህጻን። ስለዚ ኬክካ ክትህልወካ ትኽእል ኢኻ። ሎሚ ምሸት፡ ሎሚ ምሸት፡ ሎሚ ምሸት፡ ኣብ ኣየር እየ ዝኸይድ ዘለኹ። ቀስ ኢለ ፍርሐይ እናወሓጠ እወ እወ። ብቕልጡፍ ናብ በርቂ ምዕባይ። ስለዚ ውዑይን ከቢድን፡ 'ቲል ወጋሕታ።' እታ ጽውጽዋይ ብሓደ ድሙቕ ዕጥቂ ዝለበሰ ፈረሰኛ ትዛዘም። ኣኽሊል ዝለበሰ ርእሲ ከቢድ እዩ።
-
ኣብ ዝርዝር ዝተመርኮሰ ናይ ሚድያ ነገራት
ምናልባት ኩሎም ማዕጾታት ዝዕጸዉሉ ምኽንያት ይኸውን። ምኽንያቱ ሓንሳብ ናተይ ምዃንካ ሓንሳብ ናተይ ምዃንካ። ሎሚ ምሸት ናይ ዕድመ ንእስነት ሕልምኻ ኩን። ኣኽሊል ዝለበሰ ርእሲ ከቢድ እዩ። በዓል እኳ ኣይኮነን፡ ዘብዕሎ ነገር የለን። ፍጹም ህቦብላ፡ ፍጹም ህቦብላ።
-
ኣብ ዝርዝር ዝተመርኮሰ ናይ ሚድያ ነገራት
ፒኮክካ ክርእየኒ ክትፈቕደለይ ትብዓት ዲኻ? ንድሕሪት ዝምለስ የለን። እዚ ናይ መወዳእታ ግዜ ኢኻ ትብል፣ ድሕሪ ናይ መወዳእታ መስመር ትሰብር። ኣብ መወዳእታ ኤህ-መወዳእታ ናይዚ ኩሉ።
<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>