در این بخش، کلاس Stretched link در بوت استرپ را بررسی می‌کنیم. این کلاس به شما اجازه می‌دهد یک لینک را طوری تنظیم کنید که تمام فضای عنصر والد را بپوشاند. در نتیجه، کاربر می‌تواند روی هر نقطه‌ای از آن ناحیه کلیک کند.
- میتوانید کلاس
.stretched-linkرا روی عناصری مثل<div>یا<a>قرار دهید. با این کار، کل آن عنصر به یک لینک تبدیل می‌شود. - برای اینکه این قابلیت به درستی عمل کند، عنصر والد باید ویژگی
position: relativeداشته باشد. در این صورت، لینک داخل آن به‌طور کامل قابل کلیک خواهد بود. - استفاده از این کلاس همراه با بیشتر عناصر جدول (table) توصیه نمی‌شود. چون ممکن است باعث تداخل در ساختار جدول شود یا عملکرد لینک دچار اختلال شود.
- در مقابل، کارت ها (cards) در بوت استرپ به‌صورت پیش‌فرض
position: relativeدارند. بنابراین میتوانید با خیال راحت از.stretched-linkدر آن‌ها استفاده کنید. - توجه داشته باشید که اگر در یک بخش چند لینک یا هدف لمسی (tap target) دارید، استفاده از stretched-link مناسب نیست. چون ممکن است روی تجربه کاربری تأثیر منفی بگذارد.
کارت با Stretched Link
این ویژگی در موقعیت‌هایی مفید است که بخواهید کل یک کارت یا یک آیتم لیست را به لینک تبدیل کنید. این قابلیت در دوره طراحی سایت با بوت استرپ بسیار پرکاربرد است، زیرا تجربه کاربری را در بخش‌هایی مثل کارت ها و لیست ها به‌طور چشمگیری بهبود می‌دهد.
در ادامه، مثالی از کاربرد .stretched-link درون یک کارت را بررسی می‌کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</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> <h4>Stretched link in a card</h4> <div class="card" style="width: 20rem;"> <img src="/bootstrap/images/tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Stretched link in a card</h5> <p class="card-text">Here is an example that shows the entire card as a link. This is because of the .stretched-link class of Bootstrap.</p> <a href="#" class="btn btn-primary stretched-link">View</a> </div> </div> </body> </html> |
برای اینکه stretched link در بوت استرپ از محدوده عنصر والد خارج نشود، باید کلاس .position-relative را به عنصر والد اضافه کنید. این موضوع زمانی اهمیت دارد که از کامپوننت های سفارشی استفاده می‌کنید و آن‌ها به‌طور پیش‌فرض ویژگی position: relative ندارند.
در واقع، اگر عنصر والد موقعیت نسبی نداشته باشد، کلاس .stretched-link ممکن است به خارج از محدوده آن گسترش پیدا کند و در نتیجه باعث مشکلات ظاهری یا عملکردی در رابط کاربری شود.
در ادامه، نمونه ای از نحوه استفاده از کلاس .position-relative برای اطمینان از عملکرد صحیح .stretched-link را مشاهده می‌کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Helper - Stretched link</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> <h4>Custom component with stretched link</h4> <div class="d-flex position-relative"> <img src="/bootstrap/images/tutimg.png" class="flex-shrink-0 me-3" alt="..."> <div> <h5 class="mt-0">Custom component with stretched link using .position-relative</h5> <p>Here is an example showing the use of .position-relative class in a component that shows a stretched link usage.</p> <a href="#" class="stretched-link">View</a> </div> </div> </body> </html> |
بیایید یک مثال دیگر از کاربرد کلاس .position-relative را بررسی کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Helper - Stretched link</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> <h4>Columns with stretched link</h4> <div class="row g-0 bg-body-secondary position-relative"> <div class="col-md-4 mb-md-0 p-md-4"> <img src="/bootstrap/images/tutimg.png" class="w-100" alt="..."> </div> <div class="col-md-4 p-4 ps-md-0"> <h5 class="mt-0">Columns with stretched link</h5> <p>Another example of strecthed link with .position-relative on this other custom component. You can use it here to give the component a bit of body and size.</p> <a href="#" class="stretched-link">View</a> </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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
