آموزش بوت استرپ

کار با تصاویر image بوت استرپ bootstrap

نحوه استفاده کلاس های css از تصویر عکس image  در بوت استرپ bootstrap

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

گوشه های گرد

 

کلاس .img-rounded گوشه های گرد Rounded Corners را به تصویر اضافه می کند- IE8 از گوشه های گرد پشتیبانی نمی کند

دایره

کلاس .img-circle بوت استرپ تصویر را به یک دایره Circle شکل می دهد( IE8 از گوشه های گرد پشتیبانی نمی کند)

مثال

بند انگشتی

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

مثال

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

تصاویر در همه اندازه ها آمده است.  تصاویر ریسپانسیو Responsive در بوت استرپ به صورت خودکار بر اساس اندازه صفحه نمایش تنظیم می شوند.

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

کلاس .img-responsive display: block; می شود display: block; و max-width: 100%; و height: auto; به تصویر:

مثال

گالری عکس

شما همچنین می توانید با استفاده از کلاس .thumbnail سیستم شبکه Grid Bootstrap را برای ایجاد یک گالری عکس Image Gallery در بوت استرپ ایجاد کنید.

 

توجه: بعدا در این آموزش (درباره چگونگی ایجاد یک طرح با مقدار مختلف ستون) بیشتر درباره سیستم Grid آشنا خواهید شد.

Responsive Embeds

همچنین اجازه دهید فیلم ها و یا نمایش اسلاید به درستی بر روی هر دستگاه مقیاس مناسب نمایش داده شود

کلاس ها می توانند مستقیما به عناصر <iframe>، <embed>، <video> و <object> اعمال شوند.

مثال زیر ویدیو را با اضافه کردن یک .embed-responsive-item به یک تگ <iframe> کند (سپس ویدیو به سادگی به عنصر parent.embed-responsive-item شود). حاوی <div> نسبت تصویر ویدیوی را تعیین می کند:

نسبت ابعاد چیست؟

نسبت ابعاد تصویر aspect ratio یک رابطه متناسب بین عرض آن و ارتفاع آن را توصیف می کند. دو نسبت تصویر نسبتا ویدئویی ۴: ۳ (فرمت ویدیویی جهانی قرن بیستم) و ۱۶: ۹ )جهانی برای تلویزیون HD و تلویزیون دیجیتال اروپایی(است.

شما می توانید بین دو کلاس نسبت ابعاد ایجاد کنید:

 

 

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن