ایجاد تصاویر responsive در Bootstrap

تاریخ انتشار: 12 دی 1394

تعداد بازدید: 152 نفر

در این بخش نحوه سبک دادن به تصاویر، ایجاد thumbnail، شبکه هایی از تصاویر و ویدئوها، رسپانسیو کردن تصاویر و ویدئوها و ... را با استفاده از بوت استرپ خواهید آموخت.

سبک دادن به تصاویر با bootstrap :

تصاویر در طراحی سایت مدرن بسیار رایج هستند. بنابراین سبک دادن به تصاویر و جایگذاری آن ها به طور مناسب بر روی صفحه های وب جهت بهبود تجربه کاربری بسیار مهم میباشد.
با استفاده از کلاس های داخلی بوت استرپ میتوانید به راحتی به تصاویر سبک دهید. مانند ایجاد گوشه های گرد یا تصاویر دایره ای یا دادن افکت هایی مانند thumbnail به تصاویر .

خروجی مثال بالا به شکل زیر خواهد بود :

هشدار : کلاس های img-rounded. و img-circle. در ie8 و نسخه های قدیمی تر به دلیل عدم پشتیبانی خصوصیت border-radius عمل نمیکنند.

ایجاد تصاویر و ویدئوهای responsive :

در بوت استرپ تصاویر را هم میتوان رسپانسیو کرد. تنها کافیست کلاس img-responsive. را به تگ img اضافه کنید. این کلاس به طور کلی سبک های ; max-width:100% و ;height:auto را به تصویر اعمال میکند. بنابراین تصویر به طور مناسبی با اندازه عنصر محتوی آن هماهنگ میشود(در حالتی که پهنای تصویر بیشتر از پهنای عنصر محتوی آن باشد).

نکته : زمانی که ساختار responsive است توجه داشته باشید که تصاویر را هم responsive نمایید. در غیر این صورت چنانچه پهنای یک عکس بیشتر از پهنای عنصر parent خود باشد در هر شرایطی دچار سرریزی (overflow) شده و ممکن است در ساختار اختلال ایجاد کند.
همچنین میتوانید ویدئو یا اسلایدشو داخل یک صفحه را بدون تأثیرگذاری بر روی نسبت تصویر اصلی آن، رسپانسیو نمایید. کلاس های رسپانسیو تعبیه شده در بوت استرپ میتوانند مستقیماً به تگ های iframe، embed، video و object اعمال شوند.

در مثال بالا دو ویدئو با نسبت تصویر 16:9 و 4:3 از طریق اضافه کردن کلاس های embed-responsive-16by9. و embed-responsive-4by3. به بلوک های حاوی آن ها وکلاس embed-responsive-item. به تگ iframe فرزند، responsive شده اند.
نکته : نسبت تصویر برای یک عکس، رابطه نسبت بین پهنا و ارتفاع آن را مشخص میکند. دو نسبت تصویر رایج برای ویدئوها 16:9 و 4:3 میباشد.

thumbnailها (تصاویر کوچک) در bootstrap :

thumbnailها در بوت استرپ اجزاء بسیار مناسبی برای ایجاد شبکه ای از تصاویر یا ویدئوها، لیست محصولات و ... میباشند. مثال زیر نحوه ایجاد thumbnailها را جهت نمایش تصاویر لینک شده نشان میدهد.

خروجی مثال بالا به شکل زیر خواهد بود :

همچنین میتوانید محتوای html مانند headingها، پاراگراف ها یا دکمه ها را به thumbnailها اضافه نمایید.

خروجی مثال بالا به شکل زیر خواهد بود :

مطلب بعدی -> آبجکت های رسانه در بوت استرپ

مطالب مرتبط

اشتراک گذاری:

مقالات مرتبط

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

15 شهریور 1404

بهترین قالب‌های وردپرس کدام است؟ معرفی +20 مورد از بهترین قالب چند منظوره وردپرس (رایگان و پولی)

28 مرداد 1404

بنچ مارک چیست؟ (انواع بنچ مارکینگ + مثال واقعی benchmark)

21 مرداد 1404

چگونه وبلاگ شخصی بسازیم؟ آموزش ساخت وبلاگ برای مبتدیان

منتظر پیام های شما هستیم

مهرداد 1395/8/26

سلام ممنون از آموزش خوبتون من 7 تا عکس دارم که که بدون مشکل و بصورت کاملا صحیح نمایش داده میشن منتها یه مشکلی که هست توی بوت استرپ تصاویر بصورت چپ به راست چیده میشه و عکس آخر که تکی هستش به سمت چپ میچسبه من میخوام این چیدمان رو برعکس کنم و تصاویر راست به چپ چیده بشه . من از نسخه اصلی بوت استرپ استفاده میکنم و فقط توی این 7 تا تصویر مشکل دارم . ممنون میشم راه حلی به من بگید . با تشکر -------* پاسخ Webone : یا باید کل فایل بوت استرپ رو برعکس کنید (یعنی rtl) یا باید یک فایل جدید بسازید و بعد از بوت استرپ صداش کنید و تو این فایل جدید تغییراتش رو اعمال کنید

ایجاد تصاویر responsive در Bootstrap

سبک دادن به تصاویر با bootstrap :

ایجاد تصاویر و ویدئوهای responsive :

thumbnailها (تصاویر کوچک) در bootstrap :

مطالب مرتبط

مقالات مرتبط

نرخ تبدیل چیست؟ + نقش Conversation Rate در روش های افزایش فروش

ابزار تست سرعت سایت : معرفی 10 ابزار پرکاربرد و حرفه ای برای تست سرعت سایت 🚀

PWA چیست؟ (0 تا 100 اپلیکیشن وب پیش‌ رونده)

بهترین قالب‌های وردپرس کدام است؟ معرفی +20 مورد از بهترین قالب چند منظوره وردپرس (رایگان و پولی)

بنچ مارک چیست؟ (انواع بنچ مارکینگ + مثال واقعی benchmark)

چگونه وبلاگ شخصی بسازیم؟ آموزش ساخت وبلاگ برای مبتدیان

منتظر پیام های شما هستیم