Source

Медијски објекат

Документација и примери за Боотстрап-ов медијски објекат за конструисање компоненти које се веома понављају као што су коментари на блогу, твитови и слично.

Пример

Медијски објекат помаже у изградњи сложених и понављајућих компоненти где су неки медији позиционирани поред садржаја који се не обавија око поменутог медија. Осим тога, то ради са само две потребне класе захваљујући флекбок-у.

Испод је пример једног медијског објекта. Потребне су само две класе — умотавање .mediaи .media-bodyоко вашег садржаја. Опциони паддинг и маргине се могу контролисати преко услужних програма за размак .

64к64
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус. 
<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>
Флекбуг #12: Инлине елементи се не третирају као флек ставке

Интернет Екплорер 10-11 не приказује уграђене елементе као што су везе или слике (или ::beforeи ::afterпсеудоелементи) као флексибилне ставке. Једино решење је да поставите displayвредност која није уметнута (нпр. block, inline-block, или flex). Предлажемо да користите .d-flex, један од наших услужних програма за приказ , као лако решење.

Извор: Флекбугс на ГитХуб-у

Нестинг

Медијски објекти могу бити бесконачно угнежђени, мада предлажемо да престанете у неком тренутку. Место угнежђено .mediaунутар .media-bodyнадређеног медијског објекта.

64к64
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.
64к64
Наслов медија
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус. 
<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
Врхунски оријентисани медији

Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.

Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.

<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
Медији оријентисани према центру

Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.

Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.

<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
Медији поравнати на дну

Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.

Донец сед одио дуи. Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус.

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

Ред

Промените редослед садржаја у медијским објектима модификацијом самог ХТМЛ-а или додавањем неког прилагођеног флекбок ЦСС-а да бисте поставили orderсвојство (на цео број по вашем избору).

Медијски објекат
Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.
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>

Листа медија

Пошто медијски објекат има тако мало структурних захтева, можете користити и ове класе на ХТМЛ елементима листе. На <ul>или <ol>, додајте да .list-unstyledбисте уклонили све подразумеване стилове листе прегледача, а затим примените .mediaна свој <li>с. Као и увек, користите услужне програме за размак где год је потребно за фино подешавање.

  • 64к64
    Медијски објекат заснован на листи
    Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.
  • 64к64
    Медијски објекат заснован на листи
    Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус.
  • 64к64
    Медијски објекат заснован на листи
    Црас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискуе анте соллицитудин. Црас пурус одио, вестибулум ин вулпутате ат, темпус виверра турпис. Фусце цондиментум нунц ац ниси вулпутате фрингилла. Донец лациниа цонгуе фелис ​​ин фауцибус. 
<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>