React Bootstrap

最新推荐文章于 2025-07-05 13:01:12 发布

赏花赏景赏时光

最新推荐文章于 2025-07-05 13:01:12 发布

阅读量3.9k

点赞数

分类专栏： react 文章标签： react bootstrap component

react 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍React-Bootstrap的安装与使用，包括Alert、Badge、Breadcrumb和Button等组件的配置与属性详解，助您快速掌握React-Bootstrap的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-boostrap是用React重建的bootstrap，完全不依赖于bootstrap和jQuery

1、安装

npm install react-bootstrap@next bootstrap

2、importing

要用到哪些component就引进具体的component，这样可以减少代码量

import Button from 'react-bootstrap/lib/Button';

// or less ideally
import { Button } from 'react-bootstrap';

也可以用CDNJS，在window对象有个全局对象ReactBootstrap

<script src="https://unpkg.com/react/umd/react.production.js" crossorigin></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<script>
  var Alert = ReactBootstrap.Alert;
</script>

<一> component

1、关于弹窗----Alert

1）<Alert>---书写属性variant是定义组件的背景颜色

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

2）<Alert.Link>---有链接的弹窗

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

3）<Alert.Heading>---弹窗标题

<Alert dismissible variant="danger">
  <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>;

2、关于徽章<Badge>----variant属性定义其背景颜色，pill属性是定义组件的边角有弧度

<div>
  <Badge pill variant="primary">
    Primary
  </Badge>
  <Badge pill variant="secondary">
    Secondary
  </Badge>
  <Badge pill variant="success">
    Success
  </Badge>
  <Badge pill variant="danger">
    Danger
  </Badge>
  <Badge pill variant="warning">
    Warning
  </Badge>
  <Badge pill variant="info">
    Info
  </Badge>
  <Badge pill variant="light">
    Light
  </Badge>
  <Badge pill variant="dark">
    Dark
  </Badge>
</div>;

3、关于Breadcrumb----用于导航，组件<Breadcrumb.Item>中不要同时书写属性active和href，active会替换掉href属性，<a>会渲染成<span>

<Breadcrumb>
  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
    Library
  </Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>;

4、Button---属性variant定义按钮的背景颜色如variant="primary",但是variant="outline-primary"只是边框和文字有颜色，无背景色；block属性设置成块级元素；size可以设置大小

<ButtonToolbar>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="success">Success</Button>
  <Button variant="warning">Warning</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="info">Info</Button>
  <Button variant="light">Light</Button>
  <Button variant="dark">Dark</Button>
  <Button variant="link">Link</Button>
</ButtonToolbar>;

通常情况下，<Button>会默认渲染成<button>，但是可以通过设置不同的属性来渲染成不同的tag，设置href属性渲染成<a>，可以设置as属性设置成想要的tag

<ButtonToolbar>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="success">Success</Button>
  <Button variant="warning">Warning</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="info">Info</Button>
  <Button variant="light">Light</Button>
  <Button variant="dark">Dark</Button>
  <Button variant="link">Link</Button>
</ButtonToolbar>;

官方文档地址：https://react-bootstrap.netlify.com/getting-started/introduction/