تصاویر

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

گوشه های گرد

کلاس .rounded به تصویر گوشه‌های گرد اضافه می‌کند:[۱]

مثال

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


مشاهدهٔ نتیجه


دایره ای

کلاس .rounded-circle تصویر را یه شکل دایره ای تبدیل می‌کند:

مثال

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


مشاهدهٔ نتیجه


کوچک

کلاس .img-thumbnail تصویر را به تصویر کوچک (به انگلیسی: Thumbnail) (کادردار) تبدیل می‌کند:

مثال

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


مشاهدهٔ نتیجه


محل قرار گرفتن تصویرها

با استفاده از کلاس .float-right تصویر به سمت راست یا با کلاس .float-left تصویر به سمت چپ شناور می‌شود:


مثال

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


مشاهدهٔ نتیجه


تصویر مرکزی

با اضافه کردن کلاس‌های کاربردی .mx-auto (margin:auto) و .d-block (display:block) تصویر در مرکز قرار می‌گیرد:


مثال

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


مشاهدهٔ نتیجه


تصویرهای واکنش گرا

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

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

کلاس .img-fluid ویژگی‌های max-width: 100%; و height: auto; را به تصویر اعمال می‌کند:

مثال

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


مشاهدهٔ نتیجه



منابع آموزشی