Объекти ВАО

Ҳуҷҷатҳо ва мисолҳо барои объекти медиаи 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 class="mr-3" src=".../64x64" 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объекти медиаи волидайн.

Сарлавҳаи ВАО

<div class="media">
  <img class="mr-3" src=".../64x64" 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=".../64x64" 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мундариҷаи шумо мувофиқ карда шавад.

Воситаҳои болоӣ

Донec sed odio dui. Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" 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>

ВАО, ки ба марказ мувофиқ карда шудааст

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" 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>

Воситаҳои ба поён баробаркардашуда

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" 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амвол (ба адади бутуни интихобкардаи шумо) тағир диҳед.

Объекти ВАО

<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=".../64x64" alt="Generic placeholder image">
</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 class="mr-3" src=".../64x64" 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=".../64x64" 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=".../64x64" 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>

Объекти ВАО

Мисол

Сарлавҳаи ВАО

Flexbug №12: Унсурҳои дарунсохт ҳамчун ҷузъҳои фасеҳ баррасӣ карда намешаванд

Лона кардан

Сарлавҳаи ВАО

Сарлавҳаи ВАО

Ҳамоҳангсозӣ

Воситаҳои болоӣ

ВАО, ки ба марказ мувофиқ карда шудааст

Воситаҳои ба поён баробаркардашуда

Тартиб

Объекти ВАО

Рӯйхати ВАО

Объекти медиа дар асоси рӯйхат

Объекти медиа дар асоси рӯйхат

Объекти медиа дар асоси рӯйхат