Bootstrap 5 链接

Bootstrap 5 是一个非常流行的前端 UI 框架，而链接（link）是其中一个核心组件之一。链接可以让用户点击跳转到其他页面或下载文件，是网页开发中常用的元素。

基本链接

HTML 代码

<a href="#">点击这里</a>

效果展示

点击这里

说明

以上代码创建了一个空链接，当用户点击后并不会跳转到其他页面，由于 href 属性为空（"#" 表示当前页面），在实际开发中需要替换为具体的 URL。

带图标链接

HTML 代码

<a href="#">
  <i class="bi bi-cart-fill"></i>
  添加到购物车
</a>

效果展示

说明

以上代码创建了一个带购物车图标的链接，通过在 a 标签内添加一个 i 标签，并为其指定对应的 Bootstrap 图标类名 .bi 和图标名称 .bi-cart-fill，就可以实现添加图标的效果。

下载链接

HTML 代码

<a href="/download/file.zip" download>下载</a>

效果展示

下载

说明

以上代码创建了一个下载链接，通过在 a 标签内添加 download 属性，表示该链接是一个下载链接，点击链接后会下载指定的文件 /download/file.zip。

禁用链接

HTML 代码

<a href="#" class="disabled" tabindex="-1" aria-disabled="true">禁用链接</a>

效果展示

禁用链接

说明

以上代码创建了一个已禁用的链接，通过在 a 标签内添加 class 属性 .disabled，以及 tabindex 和 aria-disabled 属性，表示该链接是禁用状态，不能点击跳转到其他页面。

总结

Bootstrap 5 的链接组件功能非常强大，通过简单的 HTML 代码就可以实现常见的链接效果，如基本链接、带图标链接、下载链接、禁用链接等等。当然，还有其他的属性和 API，如 tooltip、popover 等等，可以进一步增强链接功能。