Медиа объект

Bootstrap медиа объекты өчен документлар һәм мисаллар, блог аңлатмалары, твиттер һ.б.

Мисал

Медиа объект катлаулы һәм кабатланучы компонентлар төзергә булыша , анда кайбер массакүләм мәгълүмат чаралары эчтәлек янында урнашкан, алар ММЧ белән уралмый. Өстәвенә, бу флексбокс ярдәмендә ике кирәкле класс белән генә башкарыла.

Түбәндә бер медиа объектның мисалы китерелгән. Ике класс кына кирәк - урлау .mediaһәм .media-bodyсезнең эчтәлек. Ихтимал паддер һәм маржаны аралар ярдәмендә контрольдә тотарга мөмкин .

Медиа башы

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue 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 1212: Эчке элементлар флекс әйберләр кебек каралмый

Internet Explorer 10-11 сылтамалар яки рәсемнәр ( ::beforeһәм ::afterпсевдо-элементлар) кебек элементларны флекс элементлары итеп күрсәтми. Бердәнбер эш - сызыксыз displayкыйммәтне кую (мәсәлән, block,, inline-blockяки flex). Easyиңел төзәтмә буларак, .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эчтәлекнең өске (килешү), уртасы яки ахырына флексбок ярдәмчеләре белән тигезләнергә мөмкин.

Topгары тигезләнгән медиа

Donec sed odio dui. Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус.

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

Centerзәк тигезләнгән медиа

Donec sed odio dui. Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус.

<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 ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус.

<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-ны үзгәртеп, яисә orderмилекне урнаштыру өчен кайбер флексбокс CSS өстәп (сез сайлаган бөтен санга) үзгәртегез.

Медиа объект

<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>с. Alwaysәрвакыттагыча, көйләү өчен кирәк булган урыннарда кулланыгыз.

Исемлеккә нигезләнгән медиа объект
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
Исемлеккә нигезләнгән медиа объект
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
Исемлеккә нигезләнгән медиа объект
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue 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 1212: Эчке элементлар флекс әйберләр кебек каралмый

Оя ясау

Медиа башы

Медиа башы

Тигезләү

Topгары тигезләнгән медиа

Centerзәк тигезләнгән медиа

Түбән тигезләнгән медиа

Заказ

Медиа объект

Медиа исемлеге

Исемлеккә нигезләнгән медиа объект

Исемлеккә нигезләнгән медиа объект

Исемлеккә нигезләнгән медиа объект