تصاویر در بوت استرپ 4

با عرض سلام و وقت بخیر به شما عزیزان

با مقاله ای دیگه در خصوص” تصاویر در بوت استرپ 4” در خدمتتون هستیم.

برای مشاهده ی مقالات قبلی می توانید از لینک زیر اقدام نمایید.

جداول در بوت استرپ

شکل تصویر در بوت استرپ

اشکال در بوت استرپ می توانند 3 شکل نمایشی به خود بگیرند:

گوشه های گرد(Rounded Corners)

دایره ای(Circle)

بند انگشتی(Thumbnail)

Rounded Corners

کلاس .rounded گوشه های تصاویر را گرد می کند.

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Circle

با اضافه کردن این کلاس به تگ ایمیجتان می توانید تصاویری به صورت گرد شده داشته باشید.

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

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

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Aligning Images( تراز کردن تصاویر)

همان طور که میدانید تراز کردن تصاویر در طراحی صفحات یکی از دغدغه های طراحان می باشد مخصوصا اینکه بخواهند این کار را تنها با css انجام دهند.

اما بوت استرپ برای این قضیه نیز راه حلی فوق العاده ساده در اختیار ما قرار می دهد.

شما عزیزان می توانید با اضافه کردن کلاس .float-right تصاویر را به سمت راست صفحه نمایش،  هدایت کنید.

هم چنین کلاس .float-left برای جایگذاری تصویر در سمت چپ استفاده می شود.

<img src="paris.jpg" class="float-left"> 
<img src="paris.jpg" class="float-right">

Centered Image

برای قرار دادن تصویر در وسط صفحه نمایش( و یا پاراگراف) کلاس های زیر را به تگ ایمیجتان اضافه کنید:

کلاس .mx-auto  و کلاس .d-block

<img src="paris.jpg" class="mx-auto d-block">

تصاویر ریسپانسیو

یکی از اصول مهمی که طراحان در حین طراحی باید توجه لازم را به آن داشته باشند، طراحی ریسپانسیو می باشد.

زمانی سایت ما از نظر کاربران و هم چنین موتورهای جستجو بهینه می باشد که در صفحه نمایش های متفاوت(با اندازه های مختلف)، نمایشی درست داشته باشد.

به این صورت که اجزای صفحه متناسب با اندازه نمایشگر، به شکلی صحیح نمایش داده شوند.

بوت استرپ 4 این قابلیت را به ما میدهد که تصاویری ریسپانسیو درست کنیم. در این حالت به صورت اتوماتیک،  اندازه تصویر با اندازه ی نمایشگر مطابقت داده می شود.

با اضافه کردن کلاس .img-fluid به تگ ایمیج می توانید تصویری ریسپانسیو داشته باشید.

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

امیدوارم این مطلب مورد توجه تون واقع شده باشه.

روزتون پر انرژی:)

[/member]