آموزش اشیاء رسانه ای در بوت استرپ

بازدید: 344 بازدید
اشیا رسانه ای
[cdb_box_content css=”.vc_custom_1573481446232{background-color: #1e73be !important;}”]

بوت استرپ روش آسانی برای تراز کردن اشیاء رسانه ای (مانند تصاویر یا فیلم ها) به همراه محتوا فراهم میکند.

اشیاء رسانه ای اغلب برای نمایش نظرات وبلاگ ها ، توییت و موارد دیگر استفاده میشوند.

در بوت استرپ ۴ انواع کلاس های آماده ی Media Objects را با ذکر مثال برایتان توضیح میدهیم.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت همراهان گرامی وب سایت پرنیان طرح

در این مطلب میخواهیم بخش 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]

تصویر خروجی مثال بالا :

ایجاد media object
create media object

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]

تصویر مثال بالا :

media objects تو در تو
nested media objects

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]

خروجی مثال بالا :

راست چین کردن تصویر رسانه ای
right align media images

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]

تصویر این مثال را ببینید :

جهت media
media alignment
دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

2 پاسخ به “آموزش اشیاء رسانه ای در بوت استرپ”

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.