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