Медиа объект

Блог комментарийлери, твиттер жана башкалар сыяктуу кайталануучу компоненттерди куруу үчүн Bootstrap медиа объектисинин документтери жана мисалдары.

Мисал

Медиа объекти татаал жана кайталануучу компоненттерди түзүүгө жардам берет, мында кээ бир медиа аталган медианы курчап албаган мазмун менен катар жайгашкан. Мындан тышкары, бул flexbox аркасында эки гана талап кылынган класстар менен аткарат.

Төмөндө бир медиа объектинин мисалы келтирилген. Болгону эки класс талап кылынат — таңуу .mediaжана .media-bodyмазмунуңуздун айланасы. Кошумча толтуруу жана маржа аралык утилиталар аркылуу көзөмөлдөнсө болот .

Медиа аталышы

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">
  <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: Inline элементтер ийкемдүү элементтер катары каралбайт

Internet Explorer 10-11 шилтемелер же сүрөттөр (же псевдо-элементтер) сыяктуу ички элементтерди ::beforeийкемдүү ::afterэлементтер катары көрсөтпөйт. Чечимдин бирден бир жолу - сапта эмес displayмаанини коюу (мисалы, block, inline-block, же flex). Оңой оңдоо катары дисплейдин жардамчыларынын.d-flex бирин колдонууну сунуштайбыз .

Булак: GitHub боюнча Flexbugs

Уя салуу

Медиа объектилер чексиз уяга салынышы мүмкүн, бирок биз сизге кандайдыр бир учурда токтоону сунуштайбыз. Негизги медиа объектинин ичине уя салган жер .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>

Тегиздөө

Медиа объектидеги медиа флексбокстун утилиталары менен мазмунуңуздун үстүнкү (демейки), ортосуна же аягына тегизделиши мүмкүн .media-body.

Жогорку тегизделген медиа

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.

<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>

Борборго тегизделген медиа

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.

<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>

Төмөндө тегизделген медиа

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.

<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браузердин демейки тизме стилдерин алып салуу үчүн кошуп, андан кийин s .mediaүчүн колдонуңуз <li>. Адаттагыдай эле, мейкиндикти тууралоо үчүн керек болгон жерде колдонуңуз.

Тизмеге негизделген медиа объект
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.
Тизмеге негизделген медиа объект
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.
Тизмеге негизделген медиа объект
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.

<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: Inline элементтер ийкемдүү элементтер катары каралбайт

Уя салуу

Медиа аталышы

Медиа аталышы

Тегиздөө

Жогорку тегизделген медиа

Борборго тегизделген медиа

Төмөндө тегизделген медиа

Заказ

Медиа объект

Медиа тизмеси

Тизмеге негизделген медиа объект

Тизмеге негизделген медиа объект

Тизмеге негизделген медиа объект