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

در این بخش نحوه سبک دادن به تصاویر، ایجاد 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ها اضافه نمایید.






















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














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

• - آموزش بوت استرپ
• - آموزش متریال دیزاین
• - مطالب آموزشی سئو

---