in English

מידיאַ כייפעץ

דאַקיומענטיישאַן און ביישפילן פֿאַר Bootstrap ס מעדיע כייפעץ צו בויען העכסט ריפּעטיטיוו קאַמפּאָונאַנץ ווי בלאָג באַמערקונגען, טוועעץ, און די ווי.

בייַשפּיל

די מידיאַ כייפעץ העלפּס בויען קאָמפּלעקס און ריפּעטיטיוו קאַמפּאָונאַנץ ווו עטלעכע מידיאַ איז פּאַזישאַנד צוזאמען אינהאַלט וואָס טוט נישט ייַנוויקלען די מידיאַ. פּלוס, עס טוט דאָס מיט בלויז צוויי פארלאנגט קלאסן דאַנק צו פלעקסבאָקס.

ונטער איז אַ בייַשפּיל פון אַ איין מידיאַ כייפעץ. בלויז צוויי קלאסן זענען פארלאנגט - די ראַפּינג .mediaאון די .media-bodyאַרום דיין אינהאַלט. אָפּטיאָנאַל וואַטן און גרענעץ קענען זיין קאַנטראָולד דורך ספּייסינג יוטילאַטיז .

Placeholder 64x64
מעדיע כעדינג

וועט איר טאָן די זעלבע פֿאַר מיר? עס איז צייט צו פּנים די מוזיק איך בין ניט מער דיין מוסע. געהערט עס איז שיין, זייט די ריכטער און מיין גערלז וועלן נעמען אַ שטימען. איך קען פילן אַ פיניקס אין מיר. הימל איז מקנא אונדזער ליבע, מלאכים וויינען פון אויבן. יאָ, איר נעמען מיר צו אוטאָפּיאַ.

<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>
פלעקסבוג #12: ינלינע עלעמענטן זענען נישט באהאנדלט ווי פלעקס ייטאַמז

Internet Explorer 10-11 טאָן ניט מאַכן ינלינע עלעמענטן ווי לינקס אָדער בילדער (אָדער ::beforeאון ::afterפּסעוודאָ-עלעמענץ) ווי פלעקס ייטאַמז. דער בלויז וואָרקאַראָונד איז צו שטעלן אַ ניט-ינלינע displayווערט (למשל, block, inline-blockאָדער flex). מיר פֿאָרשלאָגן ניצן .d-flexאיינער פון אונדזער אַרויסווייַזן יוטילאַטיז ווי אַן גרינג פאַרריכטן.

מקור: Flexbugs אויף GitHub

נעסטינג

מעדיע אַבדזשעקץ קענען זיין ינפאַנאַטלי נעסטעד, כאָטש מיר פֿאָרשלאָגן איר האַלטן אין עטלעכע פונט. אָרט נעסטעד .mediaין דער .media-bodyפון אַ פאָטער מידיאַ כייפעץ.

Placeholder 64x64
מעדיע כעדינג

שטייענדיק אויף די פראָנטלינע ווען די באָמבס אָנהייבן צו פאַלן. הימל איז מקנא אונדזער ליבע, מלאכים וויינען פון אויבן. קענען ניט פאַרבייַטן איר מיט אַ מיליאָן רינגס. יינגל, ווען דו ביסט מיט מיר וועל איך דיר געבן א טעם. עס איז קיין וועג צוריק. איידער איר באגעגנט מיר, איך איז געווען אָלרייט אָבער די טינגז זענען געווען אַ שווער. שווער איז דער קאָפּ וואָס טראגט די קרוין.

Placeholder 64x64
מעדיע כעדינג

גרעעטינגס ליב געהאט אָנעס לאָמיר נעמען אַ נסיעה. יאָ, מיר מאַכן מלאכים וויינען, רעגן אַראָפּ אויף ערד פון אויבן. געבן איר עפּעס גוט צו פייַערן. איך פֿלעג בײַסן די צונג און האַלטן דעם אָטעם. איך בין מאַי באַקומען דיין האַרץ רייסינג אין מיין הויט-ענג דזשינס. ווי איך מאַרץ אַליין צו אַ אַנדערש שלאָגן. זומער נאָך הויך שולע ווען מיר ערשטער באגעגנט. איר זענט אַזוי כיפּנאַטייזינג, קען איר זיין דער שטן? קען איר זיין אַ מלאך? עס איז צייט צו ברענגען די גרויס באַלונז. געדאַנק אַז איך בין די ויסנעם. ביקיניס, צוקיניס, מאַרטיניס, קיין וועניס.

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

אַליינמאַנט

מעדיע אין אַ מידיאַ כייפעץ קענען זיין אַליינד מיט פלעקסבאָקס יוטילאַטיז צו די שפּיץ (פעליקייַט), מיטן אָדער סוף פון דיין .media-bodyאינהאַלט.

Placeholder 64x64
Top-אַליינד מידיאַ

איך וועל שטעלן איר אין אַ קאָמאַטאָזער מאַצעוו. איר געבן אַ הונדערט סיבות וואָס, און איר זאָגן איר וועט טאַקע פּרובירן. אַזוי בין איך געזעסן שטיל, מסכים געווען העפלעך. פּאַסיק פֿאַר מיין קרוין שלאַכט. און אויף מיין 18 דיין געבורסטאָג מיר גאַט וואָס ריכטן טאַטוז. אַזוי טרעס מאָדיש, יאָ, זי איז אַ קלאַסיש. איך בין גרייט פֿאַר די וועג ווייניקער געפארן.

איך גיי אויף לופט (היינט נאכט). אָבער אַראָפּ צו ערד. איר זענט אָריגינעל, קענען ניט זיין ריפּלייסט. אבער אין אן אנדער לעבן איך וואָלט זיין דיין מיידל. מי ר זײנע ן געפאר ן קײ ן קאלי ע או ן זי ך געטרונקע ן אויפ ן ברעג . מיר קענען טאַנצן, ביז מיר שטאַרבן, איר און איך, וועט זיין יונג אויף אייביק. געזען איר ונטערשטאָט געזאַנג די בלוז.

<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
צענטער-אַליינד מידיאַ

זי װעט װערן קאלט װי א פריזער. אין די עה-סוף פון עס אַלע. סטינג ווי אַ בין איך ערנד מיין מלקות. ביקיניס, צוקיניס, מאַרטיניס, קיין וועניס. איך האף אז איר האט א געזונטן אפעטיט. מיר קענען טאַנצן, ביז מיר שטאַרבן, איר און איך, וועט זיין יונג אויף אייביק. מיר לעבן דאָס לעבן. מיר טאָן דאָס רעכט. וואָרט אויף דער גאַס, איר האָט עפּעס צו ווייַזן מיר, מיר.

ווילן צו זען די ווייַזן אין 3 ד, אַ פֿילם. זיי זאָגן, זיין דערשראָקן איר ניטאָ ווי די אנדערע, פיוטשעריסטיק ליבהאָבער. עפֿנט אַרויף דיין האַרץ. אַזוי בין איך געזעסן שטיל, מסכים געווען העפלעך. לעצטע פרייטאג נאַכט. יאָ, איר זענט מאַזלדיק אויב איר זענט אויף איר פלאַך. איך וועל זיין דיין טאַלאַנט, געבן איר עפּעס גוט צו פייַערן.

<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
דנאָ-אַליינד מידיאַ

קומען אויף, לאָזן דיין פארבן פּלאַצן. איך קען פילן דאָס ליכט וואָס איז ין מיר. א גאנצ ע נאכ ט שפיל ן ז ײ זי , דײ ן געזאנג . פון טאָקיאָ צו מעקסיקא, צו ריאָ. עס איז קיין וועג צוריק. אָבער אַראָפּ צו ערד. מאַדזשיקאַל, פאַרביק, הער מיסטעריע, ע.ע. פאַרשידענע דנאַ, זיי טאָן ניט פֿאַרשטיין איר.

אָבער אַראָפּ צו ערד. זי האט דאָס, איר וויסן עס. איך קען זען די שריפט אויף דער וואַנט. די ייִנגלעך ברעכן די האַלדז, פּרובירן צו קריכן אַ קליין סניק פּיק. נעמען מיר, טאַ-טאַ-נעמען מיר. עפֿנט אַרויף דיין האַרץ. געדאַנק אַז איך בין די ויסנעם. בום, בום, בום. וועניס ברעג און פּאַלם ספּרינגס, סאַמערטיים איז אַלץ. ברענגען די שלאָגן צוריק. (דאָס איז ווי מיר טאָן)

<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פאַרמאָג (צו אַ גאַנץ נומער פון דיין טשוזינג).

מידיאַ כייפעץ

איך וויסן עס וועט זיין קרבן אָבער דאָס איז די פּרייַז. ביסט איר העלדיש גענוג צו לאָזן מיר זען דיין פּאַווע? זיין דיין טיניידזש חלום הייַנט בייַ נאַכט. אה-האַ, איך זען איר. עס איז קיין וועג צוריק. יאָ, מיר מאַקסיד אונדזער קרעדיט קאַרדס און זענען קיקט אויס פון די באַר. אַזוי לאָזן מיר באַקומען איר אין דיין דיין געבורסטאָג פּאַסן. איר קען פאַלן אין ליבע ווען איר טרעפן איר. האט די וועלט אין דיין הענט. דו זאלסט נישט לאָזן די גרויסקייט איר אַראָפּ, טאַקע, טאַקע יאָ. איצט מיר גערעדט אַסטראָלאָגיע, באַקומען אונדזער ניילז, אַלע יאַפּאַניש-י. מאַכן מיר דיין אַפראָדיטע.

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>

מעדיע רשימה

ווייַל די מידיאַ כייפעץ האט אַזוי ווייניק סטראַקטשעראַל באדערפענישן, איר קענען אויך נוצן די קלאסן אויף רשימה HTML עלעמענטן. אויף דיין <ul>אָדער <ol>, לייג די .list-unstyledצו באַזייַטיקן קיין בלעטערער פעליקייַט רשימה סטיילז, און צולייגן .mediaצו דיין <li>s. ווי שטענדיק, נוצן ספּייסינג יוטילאַטיז ווו נאָר איר דאַרפֿן צו פיין ניגן.

  • Placeholder 64x64
    רשימה-באזירט מידיאַ כייפעץ

    כל מיין גערלז ווינטידזש טשאַנעל בעיבי. אַזוי איר קענען האָבן דיין שטיקל. הייַנט בייַ נאַכט, הייַנט בייַ נאַכט, איך גיין אויף לופט. סלאָולי שלינגען אַראָפּ מיין מורא, יאָ יאָ. גראָוינג שנעל אין אַ ריגל פון בליץ. אַזוי הייס און שווער, 'צו פאַרטאָג. אַז פייע מייַסע סאָף מיט אַ ריטער אין שיינינג פאנצער. שווער איז דער קאָפּ וואָס טראגט די קרוין.

  • Placeholder 64x64
    רשימה-באזירט מידיאַ כייפעץ

    אפשר א סיבה פארוואס אלע טירן זענען פארמאכט. ווייַל אַמאָל איר זענט מייַן, אַמאָל איר זענט מייַן. זיין דיין טיניידזש חלום הייַנט בייַ נאַכט. שווער איז דער קאָפּ וואָס טראגט די קרוין. ס'איז אפילו נישט קיין יום טוב, נישט וואס צו פייַערן. א גאנץ שטורעם, גאנץ שטורעם.

  • Placeholder 64x64
    רשימה-באזירט מידיאַ כייפעץ

    ביסט איר העלדיש גענוג צו לאָזן מיר זען דיין פּאַווע? עס איז קיין וועג צוריק. דאָס איז די לעצטע מאָל איר זאָגן, נאָך די לעצטע שורה איר ברעכן. אין די עה-סוף פון עס אַלע.

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