Մեդիա օբյեկտ
Փաստաթղթեր և օրինակներ Bootstrap-ի մեդիա օբյեկտի համար՝ ստեղծելու խիստ կրկնվող բաղադրիչներ, ինչպիսիք են բլոգի մեկնաբանությունները, թվիթերը և այլն:
Օրինակ
Մեդիա օբյեկտն օգնում է կառուցել բարդ և կրկնվող բաղադրիչներ, որտեղ որոշ լրատվամիջոցներ տեղադրվում են բովանդակության կողքին, որը չի փաթաթվում նշված մեդիայի շուրջը: Բացի այդ, դա անում է միայն երկու պահանջվող դասերի շնորհիվ՝ flexbox-ի շնորհիվ:
Ստորև բերված է մեկ մեդիա օբյեկտի օրինակ: Պահանջվում է ընդամենը երկու դաս՝ ձեր բովանդակության փաթեթավորումը .media
և .media-body
շուրջը: Ընտրովի լիցքավորումը և լուսանցքը կարող են վերահսկվել միջակայքի կոմունալ ծառայությունների միջոցով :
Մեդիա վերնագիր
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-ում:Flexbug #12. Ներդիր տարրերը չեն դիտարկվում որպես ճկուն տարրեր
Internet Explorer 10-11-ը չի ներկայացնում ներկառուցված տարրերը, ինչպիսիք են հղումները կամ պատկերները (կամ ::before
կեղծ ::after
տարրերը) որպես ճկուն տարրեր: Միակ լուծումը ոչ ներկառուցված display
արժեք սահմանելն է (օրինակ՝ block
, inline-block
, կամ flex
): Մենք առաջարկում ենք օգտագործել .d-flex
մեր ցուցադրման կոմունալ ծառայություններից մեկը ՝ որպես հեշտ ուղղում:
Աղբյուրը՝ Flexbugs GitHub-ում
Բնադրում
Մեդիա օբյեկտները կարող են անսահմանորեն բույն դրված լինել, չնայած մենք առաջարկում ենք ձեզ ինչ-որ պահի կանգ առնել: Վայրը տեղադրված .media
է .media-body
մայր մեդիա օբյեկտի ներսում:
Մեդիա վերնագիր
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-ում:Հավասարեցում
Մեդիա օբյեկտի մեդիան կարող է համապատասխանեցվել flexbox կոմունալ ծառայությունների հետ՝ ձեր .media-body
բովանդակության վերևում (կանխադրված), միջին կամ վերջում:
Վերևից դասավորված լրատվամիջոցներ
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.
Կենտրոնական հարթեցված մեդիա
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.
Ներքևից հավասարեցված մեդիա
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.
Պատվեր
Փոխեք մեդիա-օբյեկտներում բովանդակության հերթականությունը՝ փոփոխելով 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-ում:ԶԼՄ-ների ցանկ
Քանի որ մեդիա օբյեկտը շատ քիչ կառուցվածքային պահանջներ ունի, դուք կարող եք նաև օգտագործել այս դասերը ցուցակի HTML տարրերի վրա: Ձեր <ul>
կամ <ol>
-ում ավելացրեք .list-unstyled
բրաուզերի լռելյայն ցանկի ոճերը հեռացնելու համար, այնուհետև կիրառեք .media
ձեր <li>
s. Ինչպես միշտ, օգտագործեք միջակայքի կոմունալ ծառայությունները, որտեղ անհրաժեշտ է լավ կարգավորել:
-
Ցուցակի վրա հիմնված մեդիա օբյեկտ
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-ում: -
Ցուցակի վրա հիմնված մեդիա օբյեկտ
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-ում: -
Ցուցակի վրա հիմնված մեդիա օբյեկտ
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-ում: