در این بخش به مفهوم نسبت تصویر و Aspect Ratio در بوت استرپ می پردازیم. در بوت استرپ، نسبت تصویر به شما امکان می‌دهد که ابعاد یک عنصر واکنش گرا مانند تصویر یا ویدئو را به گونه‌ای تنظیم کنید که همواره متناسب با ابعاد والد خود باقی بماند. برای این کار، کافی است از کلاس .ratio در کنار یکی از کلاس های مکمل استفاده کنید که نسبت تصویر مورد نظر را مشخص می‌کنند. اگر در حال یادگیری طراحی صفحات واکنش گرا هستید، پیشنهاد می‌کنیم حتماً نگاهی به آموزش پروژه محور بوت استرپ بیندازید تا در عمل با نحوه استفاده از کلاس های .ratio و سایر قابلیت های فریم ورک آشنا شوید.
برای کنترل نسبت تصویر در محتوای خارجی مثل iframe، embed، video یا object میتوانید از کلاس‌های ratio-* استفاده کنید.
علاوه بر این، کلاس کمکی ratio را می‌توان برای سایر عناصر HTML مانند div یا img نیز به کار برد.
در این روش، استایل‌ها مستقیماً از کلاس والد .ratio به عنصر فرزند اعمال می‌شوند.
علامت * در کلاس‌های مکمل، قابل جایگزینی با یکی از نسبت‌های زیر است:
-
ratio-21x9: ایجاد عنصری واکنش گرا با نسبت تصویر ۲۱ به ۹ -
ratio-16x9: ایجاد عنصری واکنش گرا با نسبت تصویر ۱۶ به ۹ -
ratio-4x3: ایجاد عنصری واکنش گرا با نسبت تصویر ۴ به ۳ -
ratio-1x1: ایجاد عنصری واکنش گرا با نسبت تصویر ۱ به ۱
در ادامه، مثالی از استفاده نسبت تصویر ۱۶ به ۹ برای یک عنصر iframe را مشاهده می‌کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Helper - Ratio</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-success text-center"> Aspect Ratio 16x9 </h2> <hr> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/4PWVFBiFVVU" title="YouTube video" allowfullscreen> </iframe> </div> </body> </html> |
در ادامه، مثالی از نحوه استفاده از نسبت تصویر در عنصر iframe ارائه شده است. در این نمونه، از نسبت تصویر ۲۱ به ۹ استفاده شده:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Helper - Ratio</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-success text-center"> Aspect Ratio - 21x9 </h2> <hr> <div class="ratio ratio-21x9"> <iframe src="https://www.youtube.com/embed/4PWVFBiFVVU" title="YouTube video" allowfullscreen> </iframe> </div> </body> </html> |
نسبت های سفارشی در بوت استرپ (Custom Ratios)
در بوت استرپ، شما میتوانید نسبت تصویر دلخواه خود را با استفاده از ترکیبی از CSS و در صورت نیاز جاوا اسکریپت پیاده سازی کنید. این قابلیت زمانی کاربرد دارد که نسبت تصویر مورد نظر شما در میان کلاس های پیش‌فرض بوت استرپ (مانند ratio-16x9 یا ratio-1x1) وجود نداشته باشد.
برای تعریف یک نسبت سفارشی، کافی است مقدار دلخواه خود را به متغیر CSS به نام --bs-aspect-ratio اختصاص دهید. به عنوان مثال، اگر بخواهید یک عنصر با نسبت تصویر ۲ به ۱ (که معادل ۵۰٪ در CSS است) داشته باشید، میتوانید این مقدار را مستقیماً روی کلاس .ratio تنظیم کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Helper - Ratio</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1 class="text-success text-center"> Ratio </h1> <hr> <div class="text-center"> <h2 class="text-success">Bootstrap 5 Custom ratios</h2> </div> <br> <div class="ratio" style="--bs-aspect-ratio: 10%;"> <div class="bg-success"><h1>success</h1></div> </div> <div class="ratio" style="--bs-aspect-ratio: 30%;"> <div class="bg-secondary"><h1>secondary</h1></div> </div> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۱ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
