بوت استرپ روش آسانی برای تراز کردن اشیاء رسانه ای (مانند تصاویر یا فیلم ها) به همراه محتوا فراهم میکند.
اشیاء رسانه ای اغلب برای نمایش نظرات وبلاگ ها ، توییت و موارد دیگر استفاده میشوند.
در بوت استرپ ۴ انواع کلاس های آماده ی Media Objects را با ذکر مثال برایتان توضیح میدهیم.
با عرض سلام و وقت بخیر خدمت همراهان گرامی وب سایت پرنیان طرح
در این مطلب میخواهیم بخش Media Objects (اشیاء رسانه ای) را در بوت استرپ آموزش دهیم.
Basic Media Object :
برای ایجاد یک media object کلاس media. را به المان محتوا اضافه کنید.
و محتوای رسانه را درون یک المان الویت کمتر با کلاس media-body. قرار دهید.
در صورت نیاز برای ایجاد فاصله ی مورد نیاز از ویژگی های padding و margin استفاده کنید.
مثال زیر را دنبال کنید:
[php]
<div class=”container mt-3″>
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class=”media border p-3″>
<img src=”img_avatar3.png” alt=”John Doe” class=”mr-3 mt-3 rounded-circle” style=”width:60px;”>
<div class=”media-body”>
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
[/php]
تصویر خروجی مثال بالا :
Nested Media Objects :
برای ساختن Media objects تو در تو یک محتوا با کلاس media. را درون یک محتوا با کلاس media-body. قرار دهید.
مثال :
[php]
<div class=”container mt-3″>
<h2>Nested Media Objects</h2>
<p>Media objects can also be nested (a media object inside a media object):</p><br>
<div class=”media border p-3″>
<img src=”img_avatar3.png” alt=”John Doe” class=”mr-3 mt-3 rounded-circle” style=”width:60px;”>
<div class=”media-body”>
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class=”media p-3″>
<img src=”img_avatar2.png” alt=”Jane Doe” class=”mr-3 mt-3 rounded-circle” style=”width:45px;”>
<div class=”media-body”>
<h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
[/php]
تصویر مثال بالا :
Right-Aligned Media Image :
برای راست چین کردن یک رسانه ی تصویری ، تصویر را بعد از محتوای کلاس media-body. اضافه کنید.
برای توضیح مثال را دنبال کنید :
[php]
<div class=”container mt-3″>
<h2>Right-Aligned Media Image</h2>
<p>To right-align the media image, add the image after the .media-body container:</p>
<div class=”media border p-3″>
<div class=”media-body”>
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<img src=”img_avatar3.png” alt=”John Doe” class=”ml-3 mt-3 rounded-circle” style=”width:60px;”>
</div>
</div>
[/php]
خروجی مثال بالا :
Top, Middle or Bottom Alignment :
از ویژگی های flex استفاده کنید ، کلاس های *-align-self را برای قرار دادن media object در بالا ، وسط یا پایین محتوا استفاده کنید.
در مثال زیر هر سه حالت را توضیح داده ایم.
مثال :
قرار دادن media object در بالای محتوا
[php]
<div class=”media”>
<img src=”img_avatar1.png” class=”align-self-start mr-3″ style=”width:60px”>
<div class=”media-body”>
<h4>Media Top</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
[/php]
قرار دادن media object در وسط صفحه
[php]
<div class=”media mt-3″>
<img src=”img_avatar1.png” class=”align-self-center mr-3″ style=”width:60px”>
<div class=”media-body”>
<h4>Media Middle</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
[/php]
قرار دادن media object در پایین صفحه
[php]
<div class=”media mt-3″>
<img src=”img_avatar1.png” class=”align-self-end mr-3″ style=”width:60px”>
<div class=”media-body”>
<h4>Media Bottom</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
[/php]
تصویر این مثال را ببینید :
با سلام و عرض خسته نباشید
سایت بسیار عالی دارید و ممنون از راهنمایی عالیتون
سلام
ممنون از انرژی خوبتون
موفق باشید