تصاویر (Images)
در این بخش «تصاویر بوت استرپ» را ساده می شناسیم. «کلاس (Class)» یعنی برچسب آماده استایل. با چند کلاس، عکس ها زیبا، منظم، و ریسپانسیو می شوند. مثل مرتب کردن دفتر نقاشی با برچسب های رنگی.
شکل های تصویر در تصاویر بوت استرپ
سه شکل اصلی داریم: گوشه گرد، دایره، و بندانگشتی. هرکدام کاربرد خودش را دارد.
گوشه گرد با .rounded
کلاس .rounded گوشه های تصویر را نرم می کند. ظاهر دوست داشتنی تر می شود.
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
دایره با .rounded-circle
کلاس .rounded-circle تصویر را دایره می کند. برای آواتار عالی است.
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
بندانگشتی با .img-thumbnail
کلاس .img-thumbnail قاب و حاشیه می دهد. برای گالری ها مناسب است.
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
تراز چپ و راست با Float
با .float-start چپ می چسبد. با .float-end راست می چسبد.
<img src="paris.jpg" class="float-start" alt="Paris">
<img src="paris.jpg" class="float-end" alt="Paris">
وسط چین با .mx-auto و .d-block
کلاس های .mx-auto و .d-block تصویر را دقیقاً وسط می آورند.
<img src="paris.jpg" class="mx-auto d-block" alt="Paris">
تصویر ریسپانسیو با .img-fluid
«ریسپانسیو (Responsive)» یعنی متناسب با صفحه تغییر اندازه بدهد. .img-fluid این را انجام می دهد.
<img src="ny.jpg" class="img-fluid" alt="New York">
گام های عملی
- یک تگ
<img>بگذار. - برای ریسپانسیو،
.img-fluidاضافه کن. - در صورت نیاز،
.roundedیا.rounded-circleبزن. - برای جای گذاری،
.float-*یا.mx-auto .d-blockبزن.
نکته: اگر تصویر پس زمینه تیره است، کنتراست متن را بسنج.
برای ادامه مسیر، به بخش جدول ها سر بزن. همچنین بخش جامبوترون نمونه های نمایشی جذاب دارد.
جمع بندی سریع
.img-fluidهمیشه مقیاس پذیری می دهد..roundedو.rounded-circleبرای شکل تصویرند..img-thumbnailقاب مرتب می سازد..float-*و.mx-autoجای گذاری را کنترل می کنند.