副队长BootStrap5探究(3)--彩色链接 Colored link

点此查看 所有教程、项目、源码导航

文章目录

[1. 开篇介绍与环境引入](#1. 开篇介绍与环境引入)
- [1.1 本章节学习背景](#1.1 本章节学习背景)
- [1.2 引入 Bootstrap 5](#1.2 引入 Bootstrap 5)
[2. 彩色链接使用方法](#2. 彩色链接使用方法)
- [2.1 基础彩色链接](#2.1 基础彩色链接)
- [2.2 在段落内混排](#2.2 在段落内混排)
- [2.3 和按钮搭配组合](#2.3 和按钮搭配组合)
[3. 底层实现关键点解析](#3. 底层实现关键点解析)
- [3.1 基础链接颜色](#3.1 基础链接颜色)
- [3.2 hover 悬浮样式](#3.2 hover 悬浮样式)
[4. 小结](#4. 小结)

1. 开篇介绍与环境引入

1.1 本章节学习背景

上一节我们学习了按钮以及按钮组，掌握了如何借助 Bootstrap 的类快速制作风格统一、自带交互效果的按钮。这一节，我们学习彩色链接。

网页中超链接使用频率极高，原生 <a> 标签默认样式单一，如果我们想要批量修改链接颜色、悬浮效果，每次手写 CSS 比较麻烦。Bootstrap 提供了一套 link-* 彩色链接类，直接添加类名，就能套用框架内置主题色，同时自带 hover、focus 状态的过渡变色。

按照本系列固定的学习思路，我们不会仅仅记住类名、复制代码。先学会彩色链接的使用方式，之后通过精简的 CSS 复刻，看懂它背后依靠哪些 CSS 特性实现，反过来巩固我们的 CSS 基础，完善前端技术体系。

彩色链接属于纯 CSS 组件，不需要 JavaScript，难度很低，适合作为按钮之后的第二个组件。

1.2 引入 Bootstrap 5

这里着重强调：引入 Bootstrap，本质就是引用别人提前写好的 CSS 类库以及配套的 JS 函数库，不需要把完整源码复制到我们自己的页面当中，通过外链引用的方式加载。想要使用彩色链接，只需要引入 Bootstrap 的 CSS 文件即可。推荐使用 CDN 的方式，不需要下载本地文件。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css">
</head>

<body>
    <!-- Bootstrap JS + Popper，用于部分交互 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
</body>

</html>

2. 彩色链接使用方法

2.1 基础彩色链接

只需要给 <a> 标签添加 link-* 系列类，即可快速赋予链接主题色，并且自带悬浮、获取焦点时的样式变化。

html 复制代码

<p>
  <a href="#" class="link-primary">主色链接 primary</a>
  <a href="#" class="link-success">成功链接 success</a>
  <a href="#" class="link-danger">危险链接 danger</a>
  <a href="#" class="link-warning">提醒链接 warning</a>
  <a href="#" class="link-info">提示链接 info</a>
  <a href="#" class="link-dark">深色链接 dark</a>
  <a href="#" class="link-light">浅色链接 light</a>
</p>

效果：

这里需要区分：link-* 和 text-* 文本色类并不一样。text-* 只是单纯修改文字颜色，不会专门维护链接悬浮、焦点的配套样式；而 link-* 是专门为超链接设计，保留链接语义，配套状态样式。

2.2 在段落内混排

彩色链接可以直接嵌入普通段落文字之中，不会打乱文本排版。

html 复制代码

<p>
  如果想要查看更多项目示例，可以点击
  <a href="#" class="link-info">参考文档</a>
  获取完整代码。
</p>

效果：

2.3 和按钮搭配组合

我们上一节刚学完按钮，链接本身也可以使用按钮样式；如果只是想要彩色文字跳转，则使用 link-*。

html 复制代码

<p>
  <a href="#" class="btn btn-primary">按钮样式跳转</a>
  <a href="#" class="link-primary">文字彩色跳转</a>
</p>

效果：

3. 底层实现关键点解析

下面是精简复刻版本，去掉大量浏览器兼容代码，只保留核心逻辑。

3.1 基础链接颜色

css 复制代码

/* link-primary：主色链接基础样式 */
.link-primary {
  color: #0d6efd;
  text-decoration-color: #0d6efd;
}

html 复制代码

<a href="#" class="link-primary">主色链接 primary</a>

效果：

3.2 hover 悬浮样式

css 复制代码

/* 鼠标悬浮，加深颜色 */
.link-primary:hover {
  color: #0b5ed7;
  text-decoration-color: #0b5ed7;
}

鼠标悬浮到按钮上，颜色变化了：

4. 小结

要点说明：

link-* 同时控制文字颜色和下划线颜色，保证下划线和文字色调统一；
专门设置 :hover，照顾鼠标操作；
如果我们只是修改文字颜色，用 text-*；如果是超链接，优先选择 link-*。

彩色链接看着简单，但体现了 Bootstrap 的设计思路：区分用途，为不同语义的元素提供配套状态样式。