警报

使用各种可用且灵活的警报消息，为典型的用户操作提供上下文反馈消息。

示例

警报适用于任何长度的文本，以及可选的关闭按钮。为了获得正确的样式，请使用八种variant之一。

结果

加载中...

实时编辑器

import Alert from 'react-bootstrap/Alert'; function BasicExample() { return ( <> {[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', ].map((variant) => ( <Alert key={variant} variant={variant}> This is a {variant} alert—check it out! </Alert> ))} </> ); } export default BasicExample;

import Alert from 'react-bootstrap/Alert';

function BasicExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert—check it out!
        </Alert>
      ))}
    </>
  );
}

export default BasicExample;

传达信息给辅助技术

仅使用颜色来添加含义只提供视觉指示，不会传达给辅助技术用户（例如屏幕阅读器）。确保通过颜色表示的信息要么从内容本身（例如可见文本）中显而易见，要么通过其他方式（例如使用 .visually-hidden 类隐藏的附加文本）包含在内。

链接

对于链接，使用 <Alert.Link> 组件在任何警报中提供匹配颜色的链接。

结果

加载中...

实时编辑器

import Alert from 'react-bootstrap/Alert'; function LinksExample() { return ( <> {[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', ].map((variant) => ( <Alert key={variant} variant={variant}> This is a {variant} alert with{' '} <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like. </Alert> ))} </> ); } export default LinksExample;

import Alert from 'react-bootstrap/Alert';

function LinksExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert with{' '}
          <Alert.Link href="#">an example link</Alert.Link>. Give it a click if
          you like.
        </Alert>
      ))}
    </>
  );
}

export default LinksExample;

附加内容

警报可以包含您喜欢的任何内容。标题、段落、分隔线，尽情发挥。

结果

加载中...

实时编辑器

import Alert from 'react-bootstrap/Alert'; function AdditionalContentExample() { return ( <Alert variant="success"> <Alert.Heading>Hey, nice to see you</Alert.Heading> <p> Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. </p> <hr /> <p className="mb-0"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </Alert> ); } export default AdditionalContentExample;

import Alert from 'react-bootstrap/Alert';

function AdditionalContentExample() {
  return (
    <Alert variant="success">
      <Alert.Heading>Hey, nice to see you</Alert.Heading>
      <p>
        Aww yeah, you successfully read this important alert message. This
        example text is going to run a bit longer so that you can see how
        spacing within an alert works with this kind of content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things
        nice and tidy.
      </p>
    </Alert>
  );
}

export default AdditionalContentExample;

关闭

添加 dismissible 属性以向警报添加一个可用的关闭按钮。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; function AlertDismissibleExample() { const [show, setShow] = useState(true); if (show) { return ( <Alert variant="danger" onClose={() => setShow(false)} dismissible> <Alert.Heading>Oh snap! You got an error!</Alert.Heading> <p> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> </Alert> ); } return <Button onClick={() => setShow(true)}>Show Alert</Button>; } export default AlertDismissibleExample;

import { useState } from 'react';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';

function AlertDismissibleExample() {
  const [show, setShow] = useState(true);

  if (show) {
    return (
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>
          Change this and that and try again. Duis mollis, est non commodo
          luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
          Cras mattis consectetur purus sit amet fermentum.
        </p>
      </Alert>
    );
  }
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
}

export default AlertDismissibleExample;

您也可以直接控制视觉状态，如果您想构建更复杂的警报，这将非常有用。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; function AlertDismissible() { const [show, setShow] = useState(true); return ( <> <Alert show={show} variant="success"> <Alert.Heading>My Alert</Alert.Heading> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <hr /> <div className="d-flex justify-content-end"> <Button onClick={() => setShow(false)} variant="outline-success"> Close me </Button> </div> </Alert> {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>} </> ); } export default AlertDismissible;

import { useState } from 'react';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';

function AlertDismissible() {
  const [show, setShow] = useState(true);

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>My Alert</Alert.Heading>
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
          lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
          fermentum.
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Close me
          </Button>
        </div>
      </Alert>

      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
    </>
  );
}

export default AlertDismissible;

API

警报

警报标题

警报链接