From a885ecae56b804581edf97d967d2f3bcbd469cf2 Mon Sep 17 00:00:00 2001
From: bicijinlian <bicijinlian@163.com>
Date: Mon, 24 Apr 2023 01:15:06 +0800
Subject: [PATCH] =?UTF-8?q?feats:=20=E5=A4=9A=E5=BD=A9=E8=BF=9E=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wwwroot/index.html                        |  3 ++
 .../wwwroot/pages/Helpers/多彩连接.html   | 38 +++++++++++++++++++
 .../pages/Helpers/颜色与背景.html        | 14 +++----
 3 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/多彩连接.html
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/index.html b/BlazorStudy.Bootstrap5Study/wwwroot/index.html
index 78f1eaf..0ec15e4 100644
--- a/BlazorStudy.Bootstrap5Study/wwwroot/index.html
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/index.html
@@ -36,6 +36,9 @@
             <div class="card-body">
                 <a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a>
             </div>
+            <div class="card-body">
+                <a target="_blank" href="pages/Helpers/多彩连接.html">多彩连接</a>
+            </div>
         </div>
     </div>
     <script src="jquery/jquery-3.6.4.min.js"></script>
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/多彩连接.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/多彩连接.html
new file mode 100644
index 0000000..029b12f
--- /dev/null
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/多彩连接.html
@@ -0,0 +1,38 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>多彩连接</title>
+    <base href="/" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="/plugs/holder/holder.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="card mt-3">
+            <div class="card-header .bg-dark-subtle">
+                多彩连接：通过 .link-* 类可以为链接着色，与 .text-* 类 不同的是，这些类支持 :hover 和 :focus 状态。
+            </div>
+            <div class="card-body">
+                <a href="#" class="link-primary">Primary link</a>
+                <a href="#" class="link-secondary">Secondary link</a>
+                <a href="#" class="link-success">Success link</a>
+                <a href="#" class="link-danger">Danger link</a>
+                <a href="#" class="link-warning">Warning link</a>
+                <a href="#" class="link-info">Info link</a>
+                <a href="#" class="link-light">Light link</a>
+                <a href="#" class="link-dark">Dark link</a>
+            </div>
+            <div class="card-footer text-warning">
+                特色：支持 :hover :focus即是鼠标放到连接上会变色(稍微，不太明显！)
+            </div>
+        </div>
+    </div>
+
+    <script src="jquery/jquery-3.6.4.min.js"></script>
+    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html
index e909aa7..641ce95 100644
--- a/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html
+++ b/BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html
@@ -17,13 +17,13 @@
             </div>
             <div class="card-body">
                 <div class="text-bg-primary p-3">Primary 具有对比色的主色 .text-bg-primary</div>
-                    <div class="text-bg-secondary p-3">具有对比色的次色 .text-bg-secondary</div>
-                    <div class="text-bg-success p-3">具有对比色的成功色 .text-bg-success</div>
-                    <div class="text-bg-danger p-3">具有对比色的危险色 .text-bg-danger</div>
-                    <div class="text-bg-warning p-3">具有对比色的警告色 .text-bg-warning</div>
-                    <div class="text-bg-info p-3">具有对比色的信息色 .text-bg-info</div>
-                    <div class="text-bg-light p-3">具有对比色的㳀色 .text-bg-light</div>
-                    <div class="text-bg-dark p-3">具有对比色的深色 .text-bg-dark</div>
+                <div class="text-bg-secondary p-3">具有对比色的次色 .text-bg-secondary</div>
+                <div class="text-bg-success p-3">具有对比色的成功色 .text-bg-success</div>
+                <div class="text-bg-danger p-3">具有对比色的危险色 .text-bg-danger</div>
+                <div class="text-bg-warning p-3">具有对比色的警告色 .text-bg-warning</div>
+                <div class="text-bg-info p-3">具有对比色的信息色 .text-bg-info</div>
+                <div class="text-bg-light p-3">具有对比色的㳀色 .text-bg-light</div>
+                <div class="text-bg-dark p-3">具有对比色的深色 .text-bg-dark</div>
             </div>
             <div class="card-footer text-warning">
                 v5.2 中新增
