در این بخش با کلاس‌های مختلفی که بوت استرپ برای کار با تصاویر ارائه می‌دهد آشنا می‌شوید. تصاویر نقش مهمی در جلب توجه بازدیدکننده دارند و علاوه بر جذاب‌تر کردن محتوا، در شکل‌دهی به استراتژی محتوایی هر وبسایت نیز مؤثر هستند.
در این بخش با کلاس‌های مختلفی که بوت استرپ برای کار با تصاویر ارائه می‌دهد آشنا می‌شوید. تصاویر نقش مهمی در جلب توجه بازدیدکننده دارند و علاوه بر جذاب‌تر کردن محتوا، در شکل‌دهی به استراتژی محتوایی هر وبسایت نیز مؤثر هستند. این مفاهیم در آموزش پروژه محور بوت استرپ اهمیت زیادی دارند، چون نحوه نمایش تصاویر در صفحات واقعی سایت‌ها به‌طور مستقیم بر تجربه کاربر تأثیر می‌گذارد.
تصاویر واکنش گرا (Responsive Images)
برای واکنش گرا کردن تصاویر در بوت استرپ، میتوانید از کلاس .img-fluid استفاده کنید. این کلاس باعث می‌شود تصویر با عرض والد خود هماهنگ شود و به‌صورت خودکار اندازه‌اش تغییر کند. در واقع با اعمال ویژگی‌های max-width: 100% و height: auto، تصویر در تمامی اندازه‌های صفحه به‌درستی مقیاس‌بندی شده و ظاهر آن به‌هم نمی‌ریزد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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> <div class="container mt-3 p-2"> <h2 class="text-start">Responsive Image</h2> <img src="/bootstrap/images/tutimg.png" class="img-fluid" alt="Responsive Image"> </div> </body> </html> |
تصویر به صورت بندانگشتی
برای نمایش تصویر به صورت بندانگشتی با حاشیه و فاصله داخلی (padding)، میتوانید از کلاس .img-thumbnail استفاده کنید. این کلاس تصویر را در یک قاب مشخص قرار می‌دهد و ظاهر آن را برای استفاده در گالری، لیست محصولات یا پیش‌نمایش‌ها مناسب می‌سازد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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> <div class="container mt-3 p-2"> <h2 class="text-start">Thumbnail Image</h2> <img src="/bootstrap/images/scenery.jpg" class="img-thumbnail" alt="Thumbnail Image"> </div> </body> </html> |
تصویر با گوشه های گرد
برای نمایش تصویری با گوشه های گرد و نرم، از کلاس .rounded در عنصر تصویر استفاده کنید. این کلاس به تصویر ظاهری لطیف‌تر و مدرن‌تر می‌دهد و در طراحی‌های امروزی بسیار رایج است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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> <div class="container mt-3 p-2"> <h2 class="text-start">Image with rounded corners</h2> <img src="/bootstrap/images/scenery2.jpg" class="rounded" alt="Image with rounded corners"> </div> </body> </html> |
تراز تصاویر در بوت استرپ
در بوت استرپ میتوانید تصاویر را مطابق نیاز خود در صفحه تراز چپ، راست یا وسط قرار دهید. برای تراز کردن تصویر به سمت چپ، کافی است از کلاس .float-start استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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> <div class="container mt-3 p-2"> <h2 class="text-start">Image aligned to left</h2> <img src="/bootstrap/images/scenery3.jpg" class="float-start" alt="Left aligned Image"> </div> </body> </html> |
برای تراز کردن تصویر به سمت راست، کافی است از کلاس class .float-end استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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> <div class="container mt-3 p-2"> <h2 class="text-center">Image aligned to right</h2> <img src="/bootstrap/images/tutimg.png" class="float-end" alt="Right aligned Image"> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای تراز وسط تصویر در صفحه، باید از دو کلاس کاربردی استفاده کنید:
-
.d-blockبرای تبدیل تصویر به بلاک (block-level element) -
.mx-autoبرای اعمال margin خودکار از چپ و راست
این ترکیب باعث می‌شود تصویر در مرکز افقی صفحه یا والد خود قرار بگیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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> <div class="container"> <h2 class="text-center">Image aligned to centre</h2> <img src="/bootstrap/images/profile.jpg" width="500" height="500" class="mx-auto d-block" alt="Centre aligned Image"> </div> </body> </html> |
تگ تصویر (Picture)
زمانی که برای یک تصویر خاص از چندین تگ <source> درون تگ <picture> استفاده می‌کنید (برای بارگذاری نسخه‌های مختلف تصویر متناسب با اندازه صفحه یا نوع دستگاه)، باید کلاس‌های .img-* را روی تگ <img> اعمال کنید، نه روی تگ <picture>.
این کار باعث می‌شود که استایل‌ها (مثل واکنش گرا بودن یا گوشه‌های گرد) به‌درستی روی خود تصویر اعمال شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Images</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>Use of Picture tag</h1> <picture> <img class="img-fluid img-thumbnail" alt="alt text for all sources" src="/bootstrap/images/tutimg.png"> </picture> </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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
