Media Object ها در بوت استرپ
بوت استرپ یک راه آسان برای انتخاب اشیاء رسانه ای (مانند تصاویر یا فیلم ها) را به سمت چپ یا راست برخی از محتوا فراهم می کند. از این روش می توان برای نمایش نظرات وبلاگ، توییت و غیره استفاده کرد:
مقالات
پایه Media Object بوت استرپ
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- Left-aligned --> <div class="media"> <div class="media-left"> <img src="img_avatar1.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">John Doe</h4> <p>Lorem ipsum...</p> </div> </div> <!-- Right-aligned --> <div class="media"> <div class="media-body"> <h4 class="media-heading">John Doe</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="media-right"> <img src="img_avatar1.png" class="media-object" style="width:60px"> </div> </div> |
توضیح مثال:
از یک عنصر <div> با کلاس .media برای ایجاد یک ظرف برای media object استفاده کنید.از کلاس .media-left استفاده کنید تا شیء رسانه (تصویر) را به سمت چپ یا با استفاده از کلاس .media-right می توانید آن را راست چین کنید.متن که باید در کنار تصویر ظاهر شود، داخل یک ظرف با class = “media-body” قرار می گیرد.علاوه بر این شما می توانید bootstrap از .media-heading برای عنوان استفاده کنید.
بالا،وسط یا پایین
Top, Middle or Bottom Alignment
شیء رسانه همچنین می تواند بالا، وسط یا پایین باشد با media-top, media-middle یا کلاس media-bottom:
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- Media top --> <div class="media"> <div class="media-left media-top"> <img src="img_avatar1.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">Media Top</h4> <p>Lorem ipsum...</p> </div> </div> <!-- Media middle --> <div class="media"> <div class="media-left media-middle"> <img src="img_avatar1.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">Media Middle</h4> <p>Lorem ipsum...</p> </div> </div> <!-- Media bottom --> <div class="media"> <div class="media-left media-bottom"> <img src="img_avatar1.png" class="media-object" style="width:60px"> </div> <div class="media-body"> <h4 class="media-heading">Media Bottom</h4> <p>Lorem ipsum...</p> </div> </div> |
Media object ها تو در تو
اشیاء رسانه همچنین می توانند توزیع شوند (یک شی رسانه ای درون یک شی رسانه ای):
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید