Source

Медиа объект

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

Мисал

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

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

64х64
Медиа башы
Гравида нуллада крас утыра. 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="..." 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

64х64
Медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
64х64
Медиа башы
Гравида нуллада крас утыра. 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="..." 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="..." 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эчтәлекнең өске (килешү), уртасы яки ахырына флексбок ярдәмчеләре белән тигезләнергә мөмкин.

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

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.

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="..." 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>
64х64
Centerзәк тигезләнгән медиа

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.

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="..." 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>
64х64
Түбән тигезләнгән медиа

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.

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="..." 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 өстәп (сез сайлаган бөтен санга) үзгәртегез.

Медиа объект
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
64х64 
<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="..." alt="Generic placeholder image">
</div>

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

Медиа объектның структур таләпләре бик аз булганга, сез бу классларны HTML элементлары исемлегендә дә куллана аласыз. Сезнең <ul>яисә <ol>, .list-unstyledбраузерның исемлек стильләрен бетерү өчен, өстәгез, аннары .mediaсезнең <li>с. Alwaysәрвакыттагыча, көйләү өчен кирәк булган урыннарда кулланыгыз.

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