آموزش بوت استرپ ، قسمت 2 (عکس ها در بوت استرپ)

آموزش bootstarp 4 (عکس ها)

مستندات ،مثال ها و کلاس های آماده بوت استرپ  برای عکس ها

تصاویر Responsive

تصاویر در بوت استرپ (image in bootstrap) به طور کل با .img-fluid  ریسپانسیو میشوند . حداقل عرضی که عکس با گرفتن این کلاس میگیرد 100% است و ارتفاع خودکار . که با توجه به عنصر والد مقیاس بندی میشود.

<img src="..." class="img-fluid" alt="Responsive image">

نکته:

در اینترنت اکسپلورر 10 ، تصاویر SVG با .img-fluide دارای اندازه نامتناسبی هستند. برای رفع این مشکل ، عرض را اضافه کنید: 100٪ \ 9؛ هر جا لازم باشد. این اصلاح به طور نامناسب اندازه سایر فرمت های تصویر را می دهد ، بنابراین Bootstrap آن را به طور خودکار اعمال نمی کند.

Image thumbnails

علاوه بر ;کلاس های آماده برای borderها ، می توانید از  . img- thumbnailنیز استفاده کنید تا به یک تصویر حاشیه 1 پیکسل گرد شود.

عکس

<img src="..." alt="..." class="img-thumbnail">

تراز کردن تصاویر

تصاویر را میتوانید با کلاس های float و text alignment در صفحه خود تراز کنید. و البته باید بگویم چون تصاویر block هستند میتوان آنها را با    . mx-auto به مرکز صفحه انتقال دهید.

برای مثال:

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

در مقاله های بعد با دیگر کلاس های آماده بوت استرپ برای آسانی در طراحی سایت آشنا خواهید شد.

با bootstarp  طراحی سایت رو مثل آب خوردن انجام بده .

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

کلمات کلیدی:عکس ها در بوت استرپ،آموزش bootstarp 4 (عکس ها)،عکس ها در bootstrap