Bootstrap
/
BootstapStudy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feats: 多彩连接

Browse Source
main
bicijinlian 2 years ago
parent bdfad3cb1c
commit a885ecae56
3 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File

3
BlazorStudy.Bootstrap5Study/wwwroot/index.html
Unescape Escape View File

@ -36,6 +36,9 @@
<div class="card-body"> <div class="card-body">
<a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a> <a target="_blank" href="pages/Helpers/颜色与背景.html">颜色与背景</a>
</div> </div>
<div class="card-body">
<a target="_blank" href="pages/Helpers/多彩连接.html">多彩连接</a>
</div>
</div> </div>
</div> </div>
<script src="jquery/jquery-3.6.4.min.js"></script> <script src="jquery/jquery-3.6.4.min.js"></script>

38
BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/多彩连接.html
Unescape Escape View File

@ -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>

14
BlazorStudy.Bootstrap5Study/wwwroot/pages/Helpers/颜色与背景.html
Unescape Escape View File

@ -17,13 +17,13 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="text-bg-primary p-3">Primary 具有对比色的主色 .text-bg-primary</div> <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-secondary p-3">具有对比色的次色 .text-bg-secondary</div>
<div class="text-bg-success p-3">具有对比色的成功色 .text-bg-success</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-danger p-3">具有对比色的危险色 .text-bg-danger</div>
<div class="text-bg-warning p-3">具有对比色的警告色 .text-bg-warning</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-info p-3">具有对比色的信息色 .text-bg-info</div>
<div class="text-bg-light p-3">具有对比色的㳀色 .text-bg-light</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-dark p-3">具有对比色的深色 .text-bg-dark</div>
</div> </div>
<div class="card-footer text-warning"> <div class="card-footer text-warning">
v5.2 中新增 v5.2 中新增

Write Preview
Loading…
Cancel
Save