Only registered users can edit. The registration requests please send to nablawiki@gm**l.com

Разница между страницами «HTML:Ex:Getbootstrap.com/components/Media object/Media alignment» и «HTML:Ex:Getbootstrap.com/components/Media object/Media alignment/wiki»

Материал из Chameleon Test
(Различия между страницами)
Перейти к:навигация, поиск
Первая страница
Вторая страница
 
 
Строка 1: Строка 1:
 
<div class="media">
 
<div class="media">
 
   <div class="media-left">
 
   <div class="media-left">
    <a href="#">
+
[[#|
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
+
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
+
]]
 
   </div>
 
   </div>
 
   <div class="media-body">
 
   <div class="media-body">
 
     <p class="h4 media-heading">Top aligned media</p>
 
     <p class="h4 media-heading">Top aligned media</p>
 
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.  
 
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.  
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.  
+
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.  
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+
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.  
 
     <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>
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
   </div>
 
   </div>
 
</div>
 
</div>
 
<div class="media">
 
<div class="media">
 
   <div class="media-left media-middle">
 
   <div class="media-left media-middle">
    <a href="#">
+
[[#|
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
+
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
+
]]
 
   </div>
 
   </div>
 
   <div class="media-body">
 
   <div class="media-body">
 
     <p class="h4 media-heading">Middle aligned media</p>
 
     <p class="h4 media-heading">Middle aligned media</p>
 
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.  
 
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.  
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.  
+
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.  
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+
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.  
 
     <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>
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
   </div>
 
   </div>
 
</div>
 
</div>
 
<div class="media">
 
<div class="media">
 
   <div class="media-left media-bottom">
 
   <div class="media-left media-bottom">
    <a href="#">
+
[[#|
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
+
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
+
]]
 
   </div>
 
   </div>
 
   <div class="media-body">
 
   <div class="media-body">
 
     <p class="h4 media-heading">Bottom aligned media</p>
 
     <p class="h4 media-heading">Bottom aligned media</p>
 
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.  
 
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.  
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.  
+
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.  
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+
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.  
 
     <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>
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
   </div>
 
   </div>
 
</div>
 
</div>