آموزش طراحی سایت-media object در بوت استرپ 4

سلام بر دوستان عزیزم..

امروز با پست دیگری از سری پست های آموزش طراحی سایت همراه شما هستیم، در این پست سعی داریم به آموزش آبجکت های چند رسانه ای در بوت استرپ 4 بپردازیم.

آموزش Media Object ها در در بوت استرپ 4

بوت استرپ 4، راه حل ساده ای برای چینش Media Object یا فایل های رسانه ای مثل عکس یا ویدیو درون سایر محتواها را فراهم کرده است. از فایل های رسانه ای معمولا در بخش نظرات بلاگ ها، پست های شبکه های اجتماعی و ... استفاده می شود.

شکل زیر، یک مکالمه ساده بین دو کاربر در یک انجمن را با استفاده از کلاس های جدید بوت استرپ 4، در قالبی زیبا نمایش داده است :

آموزش ایجاد فایل رسانه ساده Basic Media Object

شکل زیر، نحوه قرار دادن یک عکس را درون سایر محتویات صفحه متوسط کلاس های جدید بوت استرپ 4 نشان داده است :

برای ایجاد یک شی رسانه ای (Media Object)، کلاس media را به عنصر دربرگیرنده یا Container اضافه کرده و فایل رسانه (عکس یا ویدیو) را درون عنصر فرزند آن که دارای کلاس media-body است، قرار دهید. به میزان مورد نظر حاشیه درونی (padding) و مارجین (margin) تعیین کرده و برای این کار از کلاس های کاربری ویژه بوت استرپ 4 (utility Classes) استفاده کنید، همانند کد مثال عملی زیر :

مثال 1 :

<div class=&quotmedia border p-3&quot>
<img src=&quotimg_avatar3.png&quot alt=&quotJohn Doe&quot class=&quotmr-3 mt-3 rounded-circle&quot
style=&quotwidth:60px;&quot>
<div class=&quotmedia-body&quot>
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>

آموزش ایجاد فایل رسانه ای تو در تو Nested Media Object در Bootstrap 4 در آموزش طراحی سایت

یک فایل رسانه ای را می توانید درون یک فایل رسانه ای دیگر قرار دهید، همانند تصویر زیر :

برای تو در تو کردن فایل رسانه ای و قرار دادن یک Media Object درون یک شی دیگر (Nested)، فایل لازم را درون عنصر دربرگیرنده فایل اول که دارای کلاس media-body است، قرار دهید. همانند کد مثال عملی زیر :

مثال 2 :

<div class=&quotmedia border p-3&quot>
<img src=&quotimg_avatar3.png&quot alt=&quotJohn Doe&quot class=&quotmr-3 mt-3 rounded-circle&quot 
style=&quotwidth:60px;&quot>
<div class=&quotmedia-body&quot>
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class=&quotmedia p-3&quot>
<img src=&quotimg_avatar2.png&quot alt=&quotJane Doe&quot class=&quotmr-3 mt-3 rounded-circle&quot 
style=&quotwidth:45px;&quot>
<div class=&quotmedia-body&quot>
<h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>

آموزش راست چین کردن فایل رسانه ای در بوت استرپ 4

می توانید فایل رسانه ای (عکس یا ویدیو) را در سمت راست محتویات قرار دهید، همانند تصویر زیر :

مثال 3 :

<div class=&quotmedia border p-3&quot>
<div class=&quotmedia-body&quot>
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src=&quotimg_avatar3.png&quot alt=&quotJohn Doe&quot class=&quotml-3 mt-3 rounded-circle&quot
style=&quotwidth:60px;&quot>
</div>

آموزش ترازبندی بالا، پایین یا وسط فایل رسانه در Bootstrap 4

از کلاس های کاربردی Flex Utility مخصوص بوت استرپ 4، برای تنظیم قرارگیری عمودی فایل رسانه ای استفاده کنید. برای این منظور، کلاس align-self-* را به تگ یا تگ فایل رسانه ای داده که در آن * یکی از 3 مقدار (start) بالا، وسط (center) و پایین (end) را دریافت می کند.

همانند کد مثال عملی زیر :

مثال 4 :

<!-- Media top -->
<div class=&quotmedia&quot>
<img src=&quotimg_avatar1.png&quot class=&quotalign-self-start mr-3&quot style=&quotwidth:60px&quot>
<div class=&quotmedia-body&quot>
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class=&quotmedia&quot>
<img src=&quotimg_avatar1.png&quot class=&quotalign-self-center mr-3&quot style=&quotwidth:60px&quot>
<div class=&quotmedia-body&quot>
<h4>Media Middle</h4>
 <p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class=&quotmedia&quot>
<img src=&quotimg_avatar1.png&quot class=&quotalign-self-end mr-3&quot style=&quotwidth:60px&quot>
<div class=&quotmedia-body&quot>
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>

با دیگر پست های ما در زمینه آموزش طراحی سایت همراه باشید .....