Медијски објекат
Документација и примери за Боотстрап-ов медијски објекат за конструисање компоненти које се веома понављају као што су коментари на блогу, твитови и слично.
Пример
Медијски објекат помаже у изградњи сложених и понављајућих компоненти где су неки медији позиционирани поред садржаја који се не обавија око поменутог медија. Осим тога, то ради са само две потребне класе захваљујући флекбок-у.
Испод је пример једног медијског објекта. Потребне су само две класе — умотавање .mediaи .media-bodyоко вашег садржаја. Опциони паддинг и маргине се могу контролисати преко услужних програма за размак .
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.<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>Флекбуг #12: Инлине елементи се не третирају као флек ставке
Интернет Екплорер 10-11 не приказује уграђене елементе као што су везе или слике (или ::beforeи ::afterпсеудоелементи) као флексибилне ставке. Једино решење је да поставите displayвредност која није уметнута (нпр. block, inline-block, или flex). Предлажемо да користите .d-flex, један од наших услужних програма за приказ , као лако решење.
Извор: Флекбугс на ГитХуб-у
Нестинг
Медијски објекти могу бити бесконачно угнежђени, мада предлажемо да престанете у неком тренутку. Место угнежђено .mediaунутар .media-bodyнадређеног медијског објекта.
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.<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садржаја.
Врхунски оријентисани медији
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.
<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>Медији оријентисани према центру
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.
<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>Медији поравнати на дну
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.
<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>Ред
Промените редослед садржаја у медијским објектима модификацијом самог ХТМЛ-а или додавањем неког прилагођеног флекбок ЦСС-а да бисте поставили 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 src="..." class="ml-3" alt="...">
</div>Листа медија
Пошто медијски објекат има тако мало структурних захтева, ове класе можете користити и на ХТМЛ елементима листе. На <ul>или <ol>, додајте да .list-unstyledбисте уклонили све подразумеване стилове листе прегледача, а затим примените .mediaна свој <li>с. Као и увек, користите услужне програме за размак где год је потребно за фино подешавање.
-
Медијски објекат заснован на листи
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус. -
Медијски објекат заснован на листи
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус. -
Медијски објекат заснован на листи
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ин фауцибус.
<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>