تصاویر در بوت استرپ Bootstrap
سلامی دوباره خدمت شما همراهان و علاقه مندان به آموزش Bootstrap
من علیرضا حاتمی نیا از وبسایت ilikephp با یکی دیگر از آموزش های بوت استرپ در خدمت شما هستم.
در جلسه پیش با آموزش جدوال در بوت استرپ آشنا شدید.
در این جلسه با تصاویر و استایل دهی تصاویر در بوت استرپ آشنا می شویم.
تصاویر در بوت استرپ Bootstrap:
یکی از مهم ترین عناصر در محتوای یک وب سایت تصاویر می باشد. تصاویر محتوای شما را جذاب می کند و محتوایی که دارای تصاویر بهینه باشد از نظر موتورهای جستجو دارای اهمیت بالایی هستند. سبک دهی و واکنشگرا بودن تصاویر یکی از موضوعات اصلی در طراحی وب است که بوت استرپ کلاس های کاربردی زیادی را برای سبک دهی و واکنشگرایی به تصاویر ارائه کرده است که در ادامه به معرفی این کلاس ها می پردازیم.
ریسپانسیو یا واکنشگرا کردن تصاویر در بوت استرپ:
یکی از امکانات خوب بوت استرپ ریسپانسیو کردن خودکار تصاویر در صفحه وب است. شما با اضافه کردن کلاس img-responsive به تگ <img> به راحتی می توانید تصاویر خود را در تمام سایزهای صفحه نمایش به صورت کاملا واکنشگرا نمایش دهید. این بدان معنی ست که با اضافه کردن این کلاس به تگ <img> در کلیه سایزها با استایل;display:block و ;max-width:100% و ;height:auto نمایش داده خواهد شد.
<img src="flower.jpg" class="img-responsive" alt="flower">
گرد کردن گوشه های تصاویر در بوت استرپ:
جهت گرد کردن گوشه های یک تصویر در بوت استرپ شما می توانید از کلاس img-rounded استفاده کنید.
<img src="flower.jpg" class="img-rounded" alt="flower">
دایره ای کردن تصاویر در بوت استرپ:
در Bootstrap می توانید با اضافه کردن کلاس img-circle به تگ <img> تصاویر را دایره ای کنید.
<img src="flower.jpg" class="img-circle" alt="flower">
ایجاد حاشیه برای تصاویر در بوت استرپ:
توسط کلاس img-thumbnail در بوت استرپ می توانید برای تصاویر یک حاشیه یا border به ضخامت 1px به دور تصویر ایجاد کنید. این کلاس معمولا برای تصاویر بندانگشتی یا thumbnail استفاده می شود.
<img src="flower.jpg" class="img-thumbnail" alt="flower">
نکته: کلاس های .img-rounded and .img-circle در مروگر IE8 و نسخه پایین تر کار نمی کند.
واکنشگرا کردن ویدیوها در بوت استرپ:
قبل از معرفی این بخش بهتر است با عبارت " ابعاد تصویر" یا Aspect ratio آشنا شوید.
به بیانی ساده به نسبت پهنای تصویر به ارتفاع آن "ابعاد تصویر یا Aspect ratio" گفته می شود.
بطور استاندارد دو نوع نسبت تصویر در تلویزیون ها و مانیتورها داریم. 4:3 برای تلوزیون های قرن بیستم و 16:9 برای تلوزیون های جدید که همیشه اول عدد بزرگتر را باید خواند. این اعداد به این صورت خوانده می شوند: چهار به سه و دیگری شانزده به نه.
ابعاد تصویر 4:3 یعنی 4 واحد برای عرض و 3 واحد برای ارتفاع آن در نظر گرفته شده است.
ابعاد تصویر 16:9 یعنی 16 واحد برای پهنا و 9 واحد برای ارتفاع آن در نظر گرفته شده است.
در بوت استرپ شما می توانید به راحتی عناصر <iframe> ، <embed> ، <video> ، <object> را نسبت به ابعاد تصویر مقیاس بندی کنید.
به مثال زیر دقت کنید
!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.yoursite.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.yoursite.com/embed/YE7VzlLtp-4"></iframe>
</div>
در مثال بالا دو ویدیو در ابعاد مختلف توسط کلاس های .embed-responsive-16by9 و .embed-responsive-4by3 ایجاد کردیم که در بلاک بعدی توسط کلاس embed-responsive-item. نسبت به تگ والد خود مقیاس بندی شده است
نظرات کاربران