Объекти ВАО
Ҳуҷҷатҳо ва мисолҳо барои объекти медиаи Bootstrap барои сохтани ҷузъҳои хеле такроршаванда ба монанди шарҳҳои блог, твитҳо ва амсоли инҳо.
Мисол
Объекти медиа барои сохтани ҷузъҳои мураккаб ва такроршаванда кӯмак мекунад, ки дар он баъзе васоити ахбори омма дар паҳлӯи мундариҷае ҷойгир шудаанд, ки дар атрофи ВАО номбар намешаванд. Илова бар ин, он ба шарофати flexbox танҳо бо ду синфи зарурӣ ин корро мекунад.
Дар зер намунаи як объекти медиавӣ оварда шудааст. Танҳо ду синф лозим аст - печондан .mediaва .media-bodyмундариҷаи шумо. Ҷойгиркунии ихтиёрӣ ва маржаро тавассути утилитаҳои фосилавӣ идора кардан мумкин аст .
Сарлавҳаи ВАО
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, 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объекти медиаи волидайн.
Сарлавҳаи ВАО
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, 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мундариҷаи шумо мувофиқ карда шавад.
Воситаҳои болоӣ
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.
<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>ВАО, ки ба марказ мувофиқ карда шудааст
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.
<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>Воситаҳои ба поён баробаркардашуда
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.
<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 нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.<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. Мисли ҳамеша, дар ҳама ҷое, ки барои дуруст танзим кардан лозим аст, утилитаҳои фосиларо истифода баред.
-
Объекти медиа дар асоси рӯйхат
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus. -
Объекти медиа дар асоси рӯйхат
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus. -
Объекти медиа дар асоси рӯйхат
Cras нишаста amet nibh libero, дар gravida nulla. Муайян карда мешавад, ки пеш аз ҳама. Cras purus odio, vestibulum дар vulputate, 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>