master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_utilities_stretched_link.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>延伸链接 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">延伸链接</div></header>
        <div class="card-body">

          <p>通过CSS “stretching” 嵌套链接，使任何HTML元素或引导程序组件都可以单击。</p>
          <p>将 <code>.stretched-link</code> 添加到一个链接，使其包含的块可以通过 <code>a::after</code> 伪元素单击。在大多数情况下，这意味着一个 <code>position:relative</code> 的元素，它包含一个带有 <code>.stretched-link</code> 类的链接，是可以点击的。</p>
          <p>在Bootstrap中，卡片有 <code>position:relative</code>，因此在这种情况下，您可以安全地将 <code>.stretched-link</code> 类添加到卡片中的链接，而无需任何其他HTML更改。</p>
          <p>多个链接和点击目标不建议使用延伸链接。但是，如果需要，一些 <code>position</code> 和 <code>z-index</code> 样式可以提供帮助。</p>
          <div class="border-example">
            <div class="card card-bordered" style="width: 18rem;">
              <img src="images/slide/img-slide-1.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">东南纪事</h5>
                <p class="card-text">该书专记南明唐王、鲁王及其臣下的历史，反映了南明抗清的一些重要史实。资料丰富，取舍谨严，为清初稗史中的上乘之作。</p>
                <a href="#!" class="btn btn-primary stretched-link">点击查看详细</a>
              </div>
            </div>
          </div>
          <pre>&lt;div class="card card-bordered" style="width: 18rem;"&gt;
  &lt;img src="images/slide/img-slide-1.jpg" class="card-img-top" alt="..."&gt;
  &lt;div class="card-body"&gt;
    &lt;h5 class="card-title"&gt;东南纪事&lt;/h5&gt;
    &lt;p class="card-text"&gt;该书专记南明唐王、鲁王及其臣下的历史，反映了南明抗清的一些重要史实。资料丰富，取舍谨严，为清初稗史中的上乘之作。&lt;/p&gt;
    &lt;a href="#!" class="btn btn-primary stretched-link"&gt;点击查看详细&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <p>默认情况下，媒体对象没有 <code>position:relative</code>，因此需要在此处添加 <code>.position-relative</code> 以防止链接延伸到媒体对象之外。</p>
          <div class="border-example">
            <div class="media position-relative">
              <img src="images/users/avatar-1.png" class="mr-3" alt="...">
              <div class="media-body">
                <h5 class="mt-0">杨家将传</h5>
                <p>《北宋志传》(又名《杨家将传》、《杨家将演义》)写杨家将抗辽事迹。作者广泛搜集了宋元时期民间流传的杨家将故事、宋元话本和元杂剧中的有关剧目为基础加工整理而成。作品从北汉主刘钧摒逐忠臣，呼延赞出世写起，到杨业归宋，杨宗保大破天门阵，十二寡妇征西夏为止。通过杨业一门世代抵抗契丹侵扰的事迹，贯串了反抗外族入侵，歌颂抗敌英雄，谴责奸佞卖国的主题。</p>
                <a href="#!" class="stretched-link">点击查看详细</a>
              </div>
            </div>
          </div>
          <pre>&lt;div class="media position-relative"&gt;
  &lt;img src="images/users/avatar-1.png" class="mr-3" alt="..."&gt;
  &lt;div class="media-body"&gt;
    &lt;h5 class="mt-0"&gt;杨家将传&lt;/h5&gt;
    &lt;p&gt;《北宋志传》(又名《杨家将传》、《杨家将演义》)写杨家将抗辽事迹。作者广泛搜集了宋元时期民间流传的杨家将故事、宋元话本和元杂剧中的有关剧目为基础加工整理而成。作品从北汉主刘钧摒逐忠臣，呼延赞出世写起，到杨业归宋，杨宗保大破天门阵，十二寡妇征西夏为止。通过杨业一门世代抵抗契丹侵扰的事迹，贯串了反抗外族入侵，歌颂抗敌英雄，谴责奸佞卖国的主题。&lt;/p&gt;
    &lt;a href="#!" class="stretched-link"&gt;点击查看详细&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <p>默认情况下，列是 <code>position:relative</code>，因此可单击的列只需要链接上的 <code>.stretched-link</code> 类。但是，在整个 <code>.row</code> 上延伸链接需要 <code>.position-static</code> 在列上，而 <code>.position-relative</code> 在行上。</p>
          <div class="border-example">
            <div class="row no-gutters bg-light position-relative">
              <div class="col-md-6 mb-md-0 p-md-4">
                <img src="images/img-placeholder.png" class="w-100" height="200" alt="...">
              </div>
              <div class="col-md-6 position-static p-4 pl-md-0">
                <h5 class="mt-0">天龙八部</h5>
                <p>《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。</p>
                <a href="#!" class="stretched-link">点击查看详细</a>
              </div>
            </div>
          </div>
          <pre>&lt;div class="row no-gutters bg-light position-relative"&gt;
  &lt;div class="col-md-6 mb-md-0 p-md-4"&gt;
    &lt;img src="images/img-placeholder.png" class="w-100" height="200" alt="..."&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6 position-static p-4 pl-md-0"&gt;
    &lt;h5 class="mt-0"&gt;天龙八部&lt;/h5&gt;
    &lt;p&gt;《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。&lt;/p&gt;
    &lt;a href="#!" class="stretched-link"&gt;点击查看详细&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>识别包含块</h6>
          <p>如果延伸的链接看起来不起作用，则包含块可能是原因。以下CSS属性将使元素成为包含块：</p>
          <ul>
            <li><code>position</code> 值不是 <code>static</code></li>
            <li><code>transform</code> 或者 <code>perspective</code> 值不是 <code>none</code></li>
            <li><code>will-change</code> 值是 <code>transform</code> 或者 <code>perspective</code></li>
            <li><code>filter</code> 值不是none，或者 <code>will-change</code> 值是 <code>filter</code>（仅适用于Firefox）</li>
          </ul>
          <div class="border-example">
            <div class="card card-bordered" style="width: 18rem;">
              <img src="images/slide/img-slide-5.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">神雕侠侣</h5>
                <p class="card-text">讲述了南宋末年，杨过和小龙女经历了一番凄美爱情与江湖恩怨的故事。一样的故事，不一样的情节，力求展现一个可歌可泣的江湖往事。</p>
                <p class="card-text">
                  <a href="#!" class="stretched-link text-danger" style="position: relative;">拉伸链接在此处不起作用，因为 <code>position: relative</code> 已添加到链接中</a>
                </p>
                <p class="card-text bg-light" style="transform: rotate(0);">
                  这个 <a href="#!" class="text-warning stretched-link">延伸链接</a> 将只分布在 <code>p</code> 标签, 因为 一个<code>transform</code> 被应用到它。
                </p>
              </div>
            </div>
          </div>
          <pre>&lt;div class="card card-bordered" style="width: 18rem;"&gt;
  &lt;img src="images/slide/img-slide-5.jpg" class="card-img-top" alt="..."&gt;
  &lt;div class="card-body"&gt;
    &lt;h5 class="card-title"&gt;神雕侠侣&lt;/h5&gt;
    &lt;p class="card-text"&gt;讲述了南宋末年，杨过和小龙女经历了一番凄美爱情与江湖恩怨的故事。一样的故事，不一样的情节，力求展现一个可歌可泣的江湖往事。&lt;/p&gt;
    &lt;p class="card-text"&gt;
      &lt;a href="#!" class="stretched-link text-danger" style="position: relative;"&gt;拉伸链接在此处不起作用，因为 &lt;code&gt;position: relative&lt;/code&gt; 已添加到链接中&lt;/a&gt;
    &lt;/p&gt;
    &lt;p class="card-text bg-light" style="transform: rotate(0);"&gt;
      这个 &lt;a href="#!" class="text-warning stretched-link"&gt;延伸链接&lt;/a&gt; 将只分布在 &lt;code&gt;p&lt;/code&gt; 标签, 因为 一个&lt;code&gt;transform&lt;/code&gt; 被应用到它。
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>