BootStrap4工具类之Stretched-link

最新推荐文章于 2023-05-11 01:47:08 发布

爱喝水的qdy

最新推荐文章于 2023-05-11 01:47:08 发布

阅读量1k

点赞数

分类专栏： BootStrap4 文章标签： bootstrap4 工具类 stretched-link

本文链接：https://blog.csdn.net/qq_32617703/article/details/103430309

版权

BootStrap4 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

官方文档地址

https://getbootstrap.com/docs/4.4/utilities/stretched-link/

介绍

添加.stretched-link类到链接以使其包含块整体可被点击.
在大多数情况下, 包含块具有position: relative;属性, 当包含带有.stretched-link类链接的元素, 则整体是可单击的。
组件Card默认具有position: relative，
因此，在这种情况下，可以安全地将.stretched-link类添加到组件Card中的链接，而无需进行其他任何HTML更改。
媒体对象组件Media默认情况下是没有position: relative，
因此我们需要在组件上添加.position-relative，以防止链接延伸到媒体对象外部。
列Col默认上具有position: relative，因此可点击的列仅需要将.stretched-link类添加至链接上即可。
但是，如果想要将在.stretched-link延伸到整个行Row上, 需要在列上添加.position-static以及在行上添加.position-relative。
.stretched-link不建议使用多个链接和点击目标。
然而，一些position和z-index风格可以帮助这应该是必需。

应用于组件Card

<div class="container">
    <div class="card" style="width: 18rem;">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
             preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="卡图像盖"><title>Card image
            cap</title>
            <rect width="100%" height="100%" fill="#868e96"></rect>
        </svg>
        <div class="card-body">
            <h5 class="card-title">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        带有延伸链接的卡
                    </font>
                </font>
            </h5>
            <p class="card-text">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。
                    </font>
                </font>
            </p>
            <a href="#" class="btn btn-primary stretched-link">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">去某地</font>
                </font>
            </a>
        </div>
    </div>
</div>

应用于媒体组件Media

<h1>媒体组件Media</h1>
<div class="container">
    <div class="media position-relative">
        <svg class="bd-placeholder-img mr-3" width="144" height="144" xmlns="http://www.w3.org/2000/svg"
             preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="通用占位符图像"><title>Generic
            placeholder image</title>
            <rect width="100%" height="100%" fill="#868e96"></rect>
        </svg>
        <div class="media-body">
            <h5 class="mt-0">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        具有延伸链接的媒体
                    </font>
                </font>
            </h5>
            <p><font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">
                    Cras坐在gravida nulla的ametnibh libero。
                </font>
                <font style="vertical-align: inherit;">
                    Nulla vel metus scelerisque ante sollicitudin。
                </font>
                <font style="vertical-align: inherit;">
                    Cras purus odio，前庭在腐殖质处，tempus viverra turpis。
                </font>
                <font style="vertical-align: inherit;">
                    Fusce调味品nunc ac nisi寻常小菜鸟。
                </font>
                <font style="vertical-align: inherit;">
                    Donec lacinia在faucibus中抢夺了猫。
                </font>
            </font>
            </p>
            <a href="#" class="stretched-link">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        去某地
                    </font>
                </font>
            </a>
        </div>
    </div>
</div>

应用于row 与 col

<h1>row 与 col</h1>
<div class="container">
    <div class="row no-gutters bg-light position-relative">
        <div class="col-md-6 mb-md-0 p-md-4">
            <svg class="bd-placeholder-img w-100" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                 preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="通用占位符图像"><title>Generic
                placeholder image</title>
                <rect width="100%" height="100%" fill="#868e96"></rect>
            </svg>
        </div>
        <div class="col-md-6 position-static p-4 pl-md-0">
            <h5 class="mt-0">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        具有拉伸链接的列
                    </font>
                </font>
            </h5>
            <p><font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">
                    Cras坐在gravida nulla的amet
                    nibh libero。
                </font>
                <font style="vertical-align: inherit;">
                    Nulla vel metus scelerisque ante
                    sollicitudin。
                </font>
                <font style="vertical-align: inherit;">
                    Cras purus odio，前庭在腐殖质处，tempus viverra
                    turpis。
                </font>
                <font style="vertical-align: inherit;">
                    Fusce调味品nunc ac nisi寻常小菜鸟。</font>
                <font style="vertical-align: inherit;">
                    Donec lacinia在faucibus中抢夺了猫。
                </font>
            </font>
            </p>
            <a href="#" class="stretched-link">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        去某地
                    </font>
                </font>
            </a>
        </div>
    </div>
</div>

包含块

A position value other than static
A transform or perspective value other than none
A will-change value of transform or perspective
A filter value other than none or a will-change value of filter (only works on Firefox)

由于英文水平有限加上前端方面术语接触较少, 翻译不通...

根据给定的例子:

解决.stretched-link失效的问题, 将 style="position: relative;" 添加至p, 另外将a的结束标签缩小范围, 即可.
如果组件例如Card默认有position: relative;想要将.stretched-link限制到链接的直接父元素, 需要在父元素上添加style="transform: rotate(0);"
对于第二点, 还可以将style="position: relative;"添加至父元素, 子元素a链接直接添加.stretched-link类即可.

<div class="container">
    <div class="card" style="width: 18rem;">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
             preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Card image cap"><title>Card
            image cap</title>
            <rect width="100%" height="100%" fill="#868e96"></rect>
        </svg>
        <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>
</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>16Stretched-Link</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<h1>介绍</h1>
<pre class="pre-scrollable">
添加.stretched-link到链接以使其包含的块可通过::after伪元素单击。

在大多数情况下, 包含块具有position: relative;属性, 当包含带有.stretched-link类链接的元素, 则整体是可单击的。

1. 组件Card默认具有position: relative，
因此，在这种情况下，可以安全地将.stretched-link类添加到组件Card中的链接，而无需进行其他任何HTML更改。

2. 媒体对象组件Media默认情况下是没有position: relative，
因此我们需要在组件上添加.position-relative，以防止链接延伸到媒体对象外部。

3. 列Col默认上具有position: relative，因此可点击的列仅需要将.stretched-link类添加至链接上即可。
但是，如果想要将在.stretched-link延伸到整个行Row上, 需要在列添加.position-static以及在行上添加.position-relative。

.stretched-link不建议使用多个链接和点击目标。

然而，一些position和z-index风格可以帮助这应该是必需。
</pre>

<h1>组件Card</h1>
<div class="container">
    <div class="card" style="width: 18rem;">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
             preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="卡图像盖"><title>Card image
            cap</title>
            <rect width="100%" height="100%" fill="#868e96"></rect>
        </svg>
        <div class="card-body">
            <h5 class="card-title">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        带有延伸链接的卡
                    </font>
                </font>
            </h5>
            <p class="card-text">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        一些快速的示例文本可在卡片标题上构建，并构成卡片内容的大部分。
                    </font>
                </font>
            </p>
            <a href="#" class="btn btn-primary stretched-link">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">去某地</font>
                </font>
            </a>
        </div>
    </div>
</div>

<hr/>

<h1>媒体组件Media</h1>
<div class="container">
    <div class="media position-relative">
        <svg class="bd-placeholder-img mr-3" width="144" height="144" xmlns="http://www.w3.org/2000/svg"
             preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="通用占位符图像"><title>Generic
            placeholder image</title>
            <rect width="100%" height="100%" fill="#868e96"></rect>
        </svg>
        <div class="media-body">
            <h5 class="mt-0">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        具有延伸链接的媒体
                    </font>
                </font>
            </h5>
            <p><font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">
                    Cras坐在gravida nulla的ametnibh libero。
                </font>
                <font style="vertical-align: inherit;">
                    Nulla vel metus scelerisque ante sollicitudin。
                </font>
                <font style="vertical-align: inherit;">
                    Cras purus odio，前庭在腐殖质处，tempus viverra turpis。
                </font>
                <font style="vertical-align: inherit;">
                    Fusce调味品nunc ac nisi寻常小菜鸟。
                </font>
                <font style="vertical-align: inherit;">
                    Donec lacinia在faucibus中抢夺了猫。
                </font>
            </font>
            </p>
            <a href="#" class="stretched-link">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        去某地
                    </font>
                </font>
            </a>
        </div>
    </div>
</div>

<hr/>

<h1>row 与 col</h1>
<div class="container">
    <div class="row no-gutters bg-light position-relative">
        <div class="col-md-6 mb-md-0 p-md-4">
            <svg class="bd-placeholder-img w-100" width="100%" height="200" xmlns="http://www.w3.org/2000/svg"
                 preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="通用占位符图像"><title>Generic
                placeholder image</title>
                <rect width="100%" height="100%" fill="#868e96"></rect>
            </svg>
        </div>
        <div class="col-md-6 position-static p-4 pl-md-0">
            <h5 class="mt-0">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        具有拉伸链接的列
                    </font>
                </font>
            </h5>
            <p><font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">
                    Cras坐在gravida nulla的amet
                    nibh libero。
                </font>
                <font style="vertical-align: inherit;">
                    Nulla vel metus scelerisque ante
                    sollicitudin。
                </font>
                <font style="vertical-align: inherit;">
                    Cras purus odio，前庭在腐殖质处，tempus viverra
                    turpis。
                </font>
                <font style="vertical-align: inherit;">
                    Fusce调味品nunc ac nisi寻常小菜鸟。</font>
                <font style="vertical-align: inherit;">
                    Donec lacinia在faucibus中抢夺了猫。
                </font>
            </font>
            </p>
            <a href="#" class="stretched-link">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">
                        去某地
                    </font>
                </font>
            </a>
        </div>
    </div>
</div>

<hr/>

<h1>包含块</h1>
<ul>
    <li>A <code class="highlighter-rouge">position</code> value other than <code class="highlighter-rouge">static</code>
    </li>
    <li>A <code class="highlighter-rouge">transform</code> or <code class="highlighter-rouge">perspective</code> value
        other than <code class="highlighter-rouge">none</code></li>
    <li>A <code class="highlighter-rouge">will-change</code> value of <code class="highlighter-rouge">transform</code>
        or <code class="highlighter-rouge">perspective</code></li>
    <li>A <code class="highlighter-rouge">filter</code> value other than <code class="highlighter-rouge">none</code> or
        a <code class="highlighter-rouge">will-change</code> value of <code class="highlighter-rouge">filter</code>
        (only works on Firefox)
    </li>
</ul>
<p>
    由于英文水平有限 加上 前端方面术语接触较少, 翻译不通...
</p>
<p>
    根据给定的例子:
    1. 解决.stretched-link失效的问题, 将 style="position: relative;" 添加至p, 另外将a的结束标签缩小范围, 即可.

    2. 如果组件例如Card默认有position: relative; 想要将.stretched-link限制到链接的直接父元素, 需要添加style="transform: rotate(0);"

    3. 对于第二点, 还可以将style="position: relative;"添加至父元素, 子元素a链接直接添加.stretched-link类即可.
</p>
<div class="container">
    <div class="card" style="width: 18rem;">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
             preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Card image cap"><title>Card
            image cap</title>
            <rect width="100%" height="100%" fill="#868e96"></rect>
        </svg>
        <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>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>