Source

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

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

בייַשפּיל

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

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

Placeholder 64x64
מעדיע כעדינג
קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
פלעקסבוג #12: ינלינע עלעמענטן זענען נישט באהאנדלט ווי פלעקס ייטאַמז

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

מקור: Flexbugs אויף GitHub

נעסטינג

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

Placeholder 64x64
מעדיע כעדינג
קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
Placeholder 64x64
מעדיע כעדינג
קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

אַליינמאַנט

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

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

קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.

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

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
צענטער-אַליינד מידיאַ

קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.

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

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
דנאָ-אַליינד מידיאַ

קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.

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

<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>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

סדר

טוישן די סדר פון אינהאַלט אין מעדיע אַבדזשעקץ דורך מאָדיפיצירן די HTML זיך, אָדער אַדינג אַ מנהג פלעקסבאָקס CSS צו שטעלן די orderפאַרמאָג (צו אַ גאַנץ נומער פון דיין טשוזינג).

מידיאַ כייפעץ
קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
Placeholder 64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

מעדיע רשימה

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

  • Placeholder 64x64
    רשימה-באזירט מידיאַ כייפעץ
    קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
  • Placeholder 64x64
    רשימה-באזירט מידיאַ כייפעץ
    קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
  • Placeholder 64x64
    רשימה-באזירט מידיאַ כייפעץ
    קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. Nulla vel metus scelerisque ante sollicitudin. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
<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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </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>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>