Медиа объект
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 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 1212: Эчке элементлар флекс әйберләр кебек каралмый
Internet Explorer 10-11 сылтамалар яки рәсемнәр ( ::beforeһәм ::afterпсевдо-элементлар) кебек элементларны флекс элементлары итеп күрсәтми. Бердәнбер эш - сызыксыз displayкыйммәтне кую (мәсәлән, block,, inline-blockяки flex). Easyиңел төзәтмә буларак, .d-flexбезнең дисплейның берсен кулланырга тәкъдим итәбез .
Чыганак: GitHub'тагы Flexbugs
Оя ясау
Медиа объектлары чиксез ояланырга мөмкин, без сезгә берникадәр вакыт туктарга тәкъдим итәбез. Ата-ана медиа объектында .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 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>Тигезләү
Медиа объекттагы медиа сезнең .media-bodyэчтәлекнең өске (килешү), уртасы яки ахырына флексбок ярдәмчеләре белән тигезләнергә мөмкин.
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 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>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 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>Түбән тигезләнгән медиа
Гравида нуллада крас утыра. 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 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-ны үзгәртеп, яисә 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.<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>с. 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 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>