קישור מתוח
הפוך כל רכיב HTML או רכיב Bootstrap לניתנים ללחיצה על ידי "מתיחת" קישור מקונן באמצעות CSS.
הוסף .stretched-link
לקישור כדי להפוך את החסימה המכילה שלו לניתנת ללחיצה באמצעות ::after
אלמנט פסאודו. ברוב המקרים, זה אומר שרכיב עם position: relative;
זה מכיל קישור עם .stretched-link
המחלקה ניתן ללחוץ. שימו לב, לאור אופן פעולת ה- CSSposition
, .stretched-link
לא ניתן לערבב עם רוב רכיבי הטבלה.
לכרטיסים יש position: relative
כברירת מחדל ב-Bootstrap, כך שבמקרה זה אתה יכול להוסיף בבטחה את .stretched-link
המחלקה לקישור בכרטיס ללא שינויים אחרים ב-HTML.
קישורים מרובים ויעדי הקשה אינם מומלצים עם קישורים מתוחים. עם זאת, כמה position
וסגנונות z-index
יכולים לעזור אם הדבר יידרש.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
לרוב הרכיבים המותאמים אישית אין position: relative
כברירת מחדל, לכן עלינו להוסיף את ה- .position-relative
כאן כדי למנוע מהקישור להימתח מחוץ לאלמנט האב.
רכיב מותאם אישית עם קישור מתוח
זהו חלק מהתוכן של מציין מיקום עבור הרכיב המותאם אישית. זה נועד לחקות איך ייראה תוכן מהעולם האמיתי, ואנחנו משתמשים בו כאן כדי לתת לרכיב קצת גוף וגודל.
ללכת לאנשהו<div class="d-flex position-relative">
<img src="..." class="flex-shrink-0 me-3" alt="...">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
עמודות עם קישור מתוח
מופע נוסף של תוכן מציין מיקום עבור רכיב מותאם אישית אחר זה. זה נועד לחקות איך ייראה תוכן מהעולם האמיתי, ואנחנו משתמשים בו כאן כדי לתת לרכיב קצת גוף וגודל.
ללכת לאנשהו<div class="row g-0 bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<img src="..." class="w-100" alt="...">
</div>
<div class="col-md-6 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
זיהוי הבלוק המכיל
אם נראה שהקישור המתוח לא עובד, כנראה שהגוש המכיל יהיה הגורם. מאפייני ה-CSS הבאים יהפכו אלמנט לבלוק המכיל:
- ערך
position
אחר מאשרstatic
- A
transform
אוperspective
ערך אחר מאשרnone
- ערך
will-change
שלtransform
אוperspective
- ערך
filter
שונהnone
אוwill-change
ערך שלfilter
(עובד רק בפיירפוקס)
כרטיס עם קישורים מתוחים
טקסט דוגמה מהיר לבניית כותרת הכרטיס ולהוות את עיקר התוכן של הכרטיס.
קישור מתוח לא יעבוד כאן, כי position: relative
הוא נוסף לקישור
הקישור המתוח הזה יתפזר רק על פני p
התג - מכיוון שהוחל עליו טרנספורמציה.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>
</div>