Source

Մեդիա օբյեկտ

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

Օրինակ

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

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

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 class="mr-3" src="..." alt="Generic placeholder image">
  <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մայր մեդիա օբյեկտի ներսում:

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-ում:
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 class="mr-3" src="..." alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </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բովանդակության վերևում (կանխադրված), միջին կամ վերջում:

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 class="align-self-start mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-center mr-3" src="..." alt="Generic placeholder image">
  <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>
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 class="align-self-end mr-3" src="..." alt="Generic placeholder image">
  <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-ում:
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 class="ml-3" src="..." alt="Generic placeholder image">
</div>

ԶԼՄ-ների ցանկ

Քանի որ մեդիա օբյեկտը շատ քիչ կառուցվածքային պահանջներ ունի, դուք կարող եք նաև օգտագործել այս դասերը ցուցակի HTML տարրերի վրա: Ձեր <ul>կամ <ol>-ում ավելացրեք .list-unstyledբրաուզերի լռելյայն ցանկի ոճերը հեռացնելու համար, այնուհետև կիրառեք .mediaձեր <li>s. Ինչպես միշտ, օգտագործեք միջակայքի կոմունալ ծառայությունները, որտեղ անհրաժեշտ է լավ կարգավորել:

  • 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-ում:
  • 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-ում:
  • 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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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>