Source

Մեդիա օբյեկտ

Փաստաթղթեր և օրինակներ Bootstrap-ի մեդիա օբյեկտի համար՝ ստեղծելու խիստ կրկնվող բաղադրիչներ, ինչպիսիք են բլոգի մեկնաբանությունները, թվիթերը և այլն:

Օրինակ

Մեդիա օբյեկտն օգնում է կառուցել բարդ և կրկնվող բաղադրիչներ, որտեղ որոշ լրատվամիջոցներ տեղադրվում են բովանդակության կողքին, որը չի փաթաթվում նշված մեդիայի շուրջը: Բացի այդ, դա անում է միայն երկու պահանջվող դասերի շնորհիվ՝ flexbox-ի շնորհիվ:

Ստորև բերված է մեկ մեդիա օբյեկտի օրինակ: Պահանջվում է ընդամենը երկու դաս՝ ձեր բովանդակության փաթեթավորումը .mediaև .media-bodyշուրջը: Ընտրովի լիցքավորումը և լուսանցքը կարող են վերահսկվել միջակայքի կոմունալ ծառայությունների միջոցով :

Placeholder 64x64
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
<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>
Flexbug #12. Ներդիր տարրերը չեն դիտարկվում որպես ճկուն տարրեր

Internet Explorer 10-11-ը չի ներկայացնում ներկառուցված տարրերը, ինչպիսիք են հղումները կամ պատկերները (կամ ::beforeկեղծ ::afterտարրերը) որպես ճկուն տարրեր: Միակ լուծումը ոչ ներկառուցված displayարժեք սահմանելն է (օրինակ՝ block, inline-block, կամ flex): Մենք առաջարկում ենք օգտագործել .d-flexմեր ցուցադրման կոմունալ ծառայություններից մեկը ՝ որպես հեշտ ուղղում:

Աղբյուրը՝ Flexbugs GitHub-ում

Բնադրում

Մեդիա օբյեկտները կարող են անսահմանորեն բույն դրված լինել, չնայած մենք առաջարկում ենք ձեզ ինչ-որ պահի կանգ առնել: Վայրը տեղադրված .mediaէ .media-bodyմայր մեդիա օբյեկտի ներսում:

Placeholder 64x64
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Placeholder 64x64
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
<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>

Հավասարեցում

Մեդիա օբյեկտի մեդիան կարող է համապատասխանեցվել flexbox կոմունալ ծառայությունների հետ՝ ձեր .media-bodyբովանդակության վերևում (կանխադրված), միջին կամ վերջում:

Placeholder 64x64
Վերևից դասավորված լրատվամիջոցներ

Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:

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.

<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
Կենտրոնական հարթեցված մեդիա

Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:

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.

<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
Ներքևից հավասարեցված մեդիա

Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:

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.

<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-ը կամ ավելացնելով հատուկ Flexbox CSS՝ orderհատկությունը սահմանելու համար (ձեր ընտրած ամբողջ թվին):

Մեդիա օբյեկտ
Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
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
    Ցուցակի վրա հիմնված մեդիա օբյեկտ
    Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
  • Placeholder 64x64
    Ցուցակի վրա հիմնված մեդիա օբյեկտ
    Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
  • Placeholder 64x64
    Ցուցակի վրա հիմնված մեդիա օբյեկտ
    Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
<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>