React Bootstrap logoReact Bootstrap

Mark

基础排版

基于 Bootstrap 5 的高亮组件,用于标记或突出文本内容,如搜索结果、关键信息等,支持与加粗、斜体等样式自由组合

Component Demo

Basic usage and examples of the Mark component

基础用法

高亮显示的文本 可以突出段落中的重点内容。

搜索结果标记

搜索结果中共找到 3 处与关键词相关的匹配,请查看 第 2 页 的详细说明。

组合样式

高亮可以与 加粗 斜体 组合使用,也可以自定义类名调整样式。

API Documentation

Complete API reference for the Mark component

Props

属性名类型默认值描述
asElementType'mark'渲染的根元素类型,可传入 `span` 等以复用高亮样式
childrenReactNode-高亮内容
classNamestring-自定义类名
...restHTMLAttributes-根元素的所有原生属性(如 `title`、`style` 等)

Type Definitions

MarkProps

高亮组件属性接口

export interface MarkProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
}