هرسایتی برای ارتباط بهتر با کاربران خود از رسانه ها و اشتراک های خاصی استفاده می کند . در این قسمت از آموزش های رایگان بوت استرپ باهم به ساخت یک Media Objects برای نمایش بهتر رسانه های سایت پرداخته ایم.
Media Objects
بوت استرپ یک راه سریع برای نمایش رسانه های شما مانند ( عکس یا ویدئوها ) در کنار محتواها را قرار داده است. Media Objects ها بیشتر در ساخت بخش کامنت ها ، نظرات مشتریان ، تویت ها و …. مورد استفاده قرار میگیرند.
Media Objects پایه
برای ساخت یک رسانه ی پایه کافی است از کلاس .media در المان اصلی خود استفاده کنیم ، همچنین برای قراردادن محتواها از داخل رسانه از کلاس .media-body برای زیر المان ها باید استفاده کنیم. برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :
|
1 2 3 4 5 6 7 |
<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...</p> </div> </div> |
رسانه های تو در تو
این نوع رسانه ها معمولا برای پاسخ دادن به نظرات استفاده می شود . برای ساخت رسانه های تو در تو کافی است کلاس .media را همانند مثال قبل در دل کلاس .media-body بسازید. برای درک بهتر این موضوع به قطعه کد زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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...</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...</p> </div> </div> </div> </div> |
قرادادن تصویر در سمت راست رسانه
برای قراردادن عکس در سمت راست رسانه کافی است تگ img را در دل کلاس .media-body قرار دهید. برای درک بهتر قطعه کدزیر را اجرا کنید :
|
1 2 3 4 5 6 7 |
<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...</p> </div> <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div> |
ترازهای مختلف تصویر
برای ترازکردن طبق آموزش فلکس باکس ها از کلاس .align-self-* استفاده می شود. پیشنهاد می کنم قبل از اجرا کردن قطعه کد زیر آموزش کامل flexbox را ببینید. همچنین برای درک بهتر این موضوع می توانید قطعه کد زیر را اجرا کنید :
|
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 |
<!-- Media top --> <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...</p> </div> </div> <!-- Media middle --> <div class="media"> <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...</p> </div> </div> <!-- Media bottom --> <div class="media"> <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...</p> </div> </div> |
برای دریافت اطلاعات بیشتر و دیدن مثالهای بیشتر از بوت استرپ می توانید به سایت getbootstrap مراجعه فرمایید.
همچنین برای دریافت جزئیات بیشتر می توانید از آموزش رایگان بوت استرپ 4 استفاده کنید.
