Медиумски објект
Документација и примери за медиумскиот објект на Bootstrap да конструира многу повторувачки компоненти како коментари на блог, твитови и слично.
Пример
Медиумскиот објект помага да се градат сложени и повторувачки компоненти каде што некои медиуми се позиционирани заедно со содржина што не се обвиткува околу споменатиот медиум. Плус, тоа го прави само со две потребни класи благодарение на flexbox.
Подолу е пример за еден медиумски објект. Потребни се само две класи - завиткување .mediaи .media-bodyоколу вашата содржина. Изборното полнење и маргината може да се контролираат преку алатките за растојание .
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Null 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 во 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 #12: Вградените елементи не се третираат како флексибилни ставки
Internet Explorer 10-11 не ги прикажува вградените елементи како врски или слики (или ::beforeи ::afterпсевдоелементи) како флексибилни ставки. Единственото решение е да поставите displayвредност што не е вклучена (на пр. block, inline-block, или flex). Предлагаме да користите .d-flex, една од нашите алатки за прикажување , како лесно решение.
Извор: Flexbugs на GitHub
Гнездење
Медиумските објекти можат да бидат бесконечно вгнездени, иако предлагаме да застанете во одреден момент. Место вгнездено .mediaво .media-bodyродителскиот медиумски објект.
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Null 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 во 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>Порамнување
Медиумите во медиумски објект може да се порамнат со алатките на flexbox до врвот (стандардно), средината или крајот на вашата .media-bodyсодржина.
Медиуми подредени на врвот
Cras sit amet nibh libero, во gravida nulla. Null 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 во faucibus.
Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<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>Медиуми подредени во центарот
Cras sit amet nibh libero, во gravida nulla. Null 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 во faucibus.
Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<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>Медиуми подредени на дното
Cras sit amet nibh libero, во gravida nulla. Null 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 во faucibus.
Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<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 или со додавање на приспособено Flexbox CSS за да го поставите orderимотот (на цел број по ваш избор).
Медиумски објект
Cras sit amet nibh libero, во gravida nulla. Null 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 во 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>s. Како и секогаш, користете ги алатките за проредување секаде каде што е потребно за фино прилагодување.
-
Медиумски објект базиран на листа
Cras sit amet nibh libero, во gravida nulla. Null 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 во faucibus. -
Медиумски објект базиран на листа
Cras sit amet nibh libero, во gravida nulla. Null 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 во faucibus. -
Медиумски објект базиран на листа
Cras sit amet nibh libero, во gravida nulla. Null 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 во 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>