reactStrap 常用总结

alert

 <Alert color="primary">This is a primary alert </Alert>
<Alert color="primary">
    <h4 className="alert-heading">Well done!</h4>
    <a href="#" className="alert-link">an example link</a>.
  </Alert>
有关闭x按钮
<Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
    I am an alert and I can be dismissed!
</Alert>
推荐写法【简洁】
<UncontrolledAlert color="info"> I can be dismissed!</UncontrolledAlert>
 过渡动画 fade
<Alert color="primary"  toggle={this.onDismiss} fade={false}>
 I can be dismissed without animating!
</Alert>

Badges 添加背景底色

 <Badge href="#" color="primary" pill>primary</Badge>
 手型 颜色 药片外形

Breadcrumbs 面包屑 导航 按钮

两种添加链接方式
<Breadcrumb tag="nav" listTag="div">
    <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
    <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
    <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
    <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
</Breadcrumb>

 <div>
      <Breadcrumb>
        <BreadcrumbItem active>Home</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
        <BreadcrumbItem active>Library</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
        <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
        <BreadcrumbItem active>Data</BreadcrumbItem>
      </Breadcrumb>
  </div>

Button Dropdown 下拉按钮

<ButtonDropdown isOpen={isOpen} toggle={toggle} direction="up">
  <DropdownToggle caret color="primary" size="lg">
    Text
  </DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Header</DropdownItem>
  </DropdownMenu>
</ButtonDropdown>
这两种区别在于下拉三角是否分离
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
  <Button id="caret" color="primary">{this.props.text}</Button>
  <DropdownToggle caret color="primary" size="lg"/>
  <DropdownMenu>
    <DropdownItem header>Header</DropdownItem>
  </DropdownMenu>
</ButtonDropdown>
推荐写法【简洁】
<UncontrolledButtonDropdown direction="up">
      <DropdownToggle caret>
        Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Another Action</DropdownItem>
      </DropdownMenu>
   </UncontrolledButtonDropdown>

direction="up" up/left/right 设置打开方向默认方向向下，


ButtonDropdown.propTypes = {
  disabled: PropTypes.bool,
  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
  group: PropTypes.bool,
  isOpen: PropTypes.bool,
  tag: PropTypes.string,
  toggle: PropTypes.func
};
可以在toggle中设置 tag="a" href 生成下拉选项的点击事件
DropdownToggle.propTypes = {
  caret: PropTypes.bool,
  color: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  'data-toggle': PropTypes.string,
  'aria-haspopup': PropTypes.bool
};

Button Group 按钮组

 可设置按钮 size 尺寸 方向 vertical[垂直]，默认不写为水平方向排列
 <ButtonGroup vertical size="lg">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
</ButtonGroup>
      
ButtonGroup.propTypes = {
  ariaLabel: PropTypes.string,
  className: PropTypes.string,
  role: PropTypes.string,
  size: PropTypes.string,
  vertical: PropTypes.bool
};
内嵌按钮
<ButtonGroup vertical size="lg">
  <Button>1</Button>
  <Button>2</Button>
  <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem>Dropdown Link</DropdownItem>
      <DropdownItem>Dropdown Link</DropdownItem>
    </DropdownMenu>
  </ButtonDropdown>
</ButtonGroup>

Buttons

颜色 尺寸 块结构 显示颜色区域outline
<Button outline color="primary" size="lg" block>primary</Button>
<Button outline color="primary" size="sm" block>primary</Button>
Active State
<Button color="secondary" size="lg" active>Link</Button>
Disabled State
<Button color="secondary" size="lg" disabled>Button</Button>
Radio Buttons 和Checkbox Buttons 控制ative状态
 <Button color="primary" onClick={() => this.onRadioBtnClick(1)} active={this.state.rSelected === 1}>One</Button>
<Button color="primary" onClick={() => this.onCheckboxBtnClick(1)} active={this.state.cSelected.includes(1)}>One</Button>

Close icon x 关闭按钮图标，一般和card 结合使用
 <Button close />
      <CardGroup>
      <Card>
        <CardBody>
          <CardTitle>
            <Button close />
          </CardTitle>
          <CardText>Default close icon</CardText>
        </CardBody>
      </Card>
    </CardGroup>

Card

card 内部可以实现完整布局
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button } from 'reactstrap';
 <div>
      <Card>
        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
        <CardBody>
          <CardTitle>Card title</CardTitle>
          <CardSubtitle>Card subtitle</CardSubtitle>
          <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
    </div>

card 的身体布局
  <div>
      <Card body>
        <CardTitle>Special Title Treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button>Go somewhere</Button>
      </Card>
</div>

card 的头/尾 身体布局
 <div>
      <Card>
        <CardHeader>Header</CardHeader>
        <CardBody>
          <CardTitle>Special Title Treatment</CardTitle>
          <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
          <Button>Go somewhere</Button>
        </CardBody>
        <CardFooter>Footer</CardFooter>
      </Card>
</div>
图片
 <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
     
Background variants 背景色
 <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
        <CardTitle>Special Title Treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button>Button</Button>
      </Card>
      <Card body inverse color="primary">
        <CardTitle>Special Title Treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button color="secondary">Button</Button>
      </Card>


Groups 组
<CardGroup>
      <Card>
        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <CardBody>
          <CardTitle>Card title</CardTitle>
          <CardSubtitle>Card subtitle</CardSubtitle>
          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
</CardGroup>
平板化DecK 
 <CardDeck>
      <Card>
        <CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <CardBody>
          <CardTitle>Card title</CardTitle>
          <CardSubtitle>Card subtitle</CardSubtitle>
          <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
          <Button>Button</Button>
        </CardBody>
      </Card>
 </CardDeck>

Carousel 轮播效果

import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from 'reactstrap';

<Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
      >
        <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
        {slides}
        <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
        <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
      </Carousel>
      
UncontrolledCarousel 推荐使用
import { UncontrolledCarousel } from 'reactstrap';
const items = [
  {
    src: 'data:image/svg+xml;ch',
    altText: 'Slide 1',
    caption: 'Slide 1',
    header: 'Slide 1 Header'
  }
];

const Example = () => <UncontrolledCarousel items={items} />;

export default Example;

Collapse 点击导航折叠 效果

推荐使用
UncontrolledCollapse

import React from 'react';
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';

const Example = () => (
  <div>
    <Button color="primary" id="toggler" style={{ marginBottom: '1rem' }}>
      Toggle
    </Button>
    <UncontrolledCollapse toggler="#toggler">
      <Card>
        <CardBody>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis
          similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed
          dignissimos esse fuga! Minus, alias.
        </CardBody>
      </Card>
    </UncontrolledCollapse>
  </div>
);

export default Example;

Dropdowns

与button 相似
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Header</DropdownItem>
          <DropdownItem>Some Action</DropdownItem>
          <DropdownItem disabled>Action (disabled)</DropdownItem>
          <DropdownItem divider />
          <DropdownItem>Foo Action</DropdownItem>
          <DropdownItem>Bar Action</DropdownItem>
          <DropdownItem>Quo Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>

<UncontrolledDropdown>
      <DropdownToggle caret>
        Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem disabled>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Another Action</DropdownItem>
      </DropdownMenu>
    </UncontrolledDropdown>

Fade 过渡动画 慢慢消失或显现

import React from 'react';
import { Button, Fade } from 'reactstrap';

export default class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { fadeIn: true };
        this.toggle = this.toggle.bind(this);
    }

    render() {
        return (
            <div>
                <Button color="primary" onClick={this.toggle}>Toggle Fade</Button>
                <Fade in={this.state.fadeIn} tag="h5" className="mt-3">
                    This content will fade in and out as the button is pressed
                </Fade>
            </div>
        );
    }

    toggle() {
        this.setState({
            fadeIn: !this.state.fadeIn
        });
    }
};

FORM

  <Form>
        <FormGroup>
          <Label for="exampleEmail">Email</Label>
          <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
        </FormGroup>
        <FormGroup>
          <Label for="examplePassword">Password</Label>
          <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
        </FormGroup>
    
    <Form>
        <FormGroup row>
          <Label for="exampleEmail" sm={2}>Email</Label>
          <Col sm={10}>
            <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
          </Col>
        </FormGroup>
         <FormGroup row>
          <Label for="exampleFile" sm={2}>File</Label>
          <Col sm={10}>
            <Input type="file" name="file" id="exampleFile" />
            <FormText color="muted">
              This is some placeholder block-level help text for the above input.
              It's a bit lighter and easily wraps to a new line.
            </FormText>
          </Col>
        </FormGroup>
    <Form inline>
        
        <FormGroup>
          <Label for="exampleSelect">Select</Label>
          <Input type="select" name="select" id="exampleSelect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </Input>
        </FormGroup>
        多选写法 multiple
        <FormGroup>
          <Label for="exampleSelectMulti">Select Multiple</Label>
          <Input
            type="select"
            name="selectMulti"
            id="exampleSelectMulti"
            multiple
          >
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </Input>
        </FormGroup>

Input Group

文本输入框前/后添加按钮 文本 设置尺寸
<InputGroup size="lg">
    <InputGroupAddon addonType="prepend">@</InputGroupAddon>
    <Input placeholder="username" />
</InputGroup>
<InputGroup size="sm">
    <InputGroupAddon addonType="prepend">
        <InputGroupText>To the Left!</InputGroupText>
    </InputGroupAddon>
    <Input />
</InputGroup>
<InputGroup>
          <Input />
<InputGroupButtonDropdown addonType="append" isOpen={this.state.dropdownOpen} toggle=			{this.toggleDropDown}>
        <DropdownToggle caret>
            Button Dropdown
        </DropdownToggle>
        <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Another Action</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>

Jumbotron 超大屏幕

<div>
<Jumbotron>
        <h1 className="display-3">Hello, world!</h1>
        <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr className="my-2" />
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p className="lead">
          <Button color="primary">Learn More</Button>
        </p>
	</Jumbotron>
</div>

Layout

<Container>
 
        <Row>
          <Col xs="3">.col-3</Col>
          <Col xs="auto">.col-auto - variable width content</Col>
          <Col xs="3">.col-3</Col>
        </Row>
        <Row>
          <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
          <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
          <Col sm="4">.col-sm-4</Col>
    </Row>
        <Row>
          <Col sm="12" md={{ size: 6, offset: 3 }}>.col-sm-12 .col-md-6 .offset-md-3</Col>
        </Row>
        <Row>
          <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
          <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
        </Row>
      </Container>

ListGroup

<ListGroup>/<ListGroup flush>
    <ListGroupItem color="success">Cras justo odio</ListGroupItem>
    <ListGroupItem color="warning">Dapibus ac facilisis in</ListGroupItem>
    <ListGroupItem className="justify-content-between">Cras justo odio <Badge pill>14</Badge></ListGroupItem>
    <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
    <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
    
     <ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
     <ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
     <ListGroupItem active>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
          	Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget 					risus 				varius blandit.
          </ListGroupItemText>
        </ListGroupItem>
</ListGroup>

Media object 加载图片及添加描述，类似购物card

import { Media } from 'reactstrap';
<Media>
      <Media left href="#">
        <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
      </Media>
      <Media body>
        <Media heading>
          Media heading
        </Media>
        Cras sit amet nibh libero, in gravida nulla. 
        <Media>
          <Media left href="#">
            <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
          </Media>
          <Media body>
            <Media heading>
              Nested media heading
            </Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </Media>
        </Media>
      </Media>
    </Media>

Modals 模态弹窗[情态，神态]

import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
<div>
    <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
    <Modal isOpen={this.state.modal} toggle={this.toggle}			       className=this.props.className}>
        <ModalHeader toggle={this.toggle} charCode="Y">Modal title</ModalHeader>
        <ModalBody>
            Lorem ipsum dolor sit amet, 
        </ModalBody>
        <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
        </ModalFooter>
    </Modal>
</div>

 <div>
    <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
    <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
        <ModalHeader toggle={this.toggle} close={closeBtn}>Modal title</ModalHeader>
        <ModalBody>
            Lorem ipsum dolor sit amet
        </ModalBody>
        <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
        </ModalFooter>
    </Modal>
</div>

Navbar 导航按钮

 <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>

Navs 用于普通选项卡导航

可以设置垂直显示 vertical、选项卡显示 tabs、药片 pills 
<div>
        <p>List Based</p>
        <Nav> 或 <Nav vertical/tabs/pills>
          <NavItem>
            <NavLink href="#">Link</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#">Another Link</NavLink>
          </NavItem>
        </Nav>
        <hr />
        <p>Link Based</p>
        <Nav>
          <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
        </Nav>
      </div>

Pagination 分页导航

关键字  first/previous/next/last、 disable 、active、size
<Pagination size="lg" aria-label="Page navigation example">
      <PaginationItem disable >
          <PaginationLink first href="#" />
        </PaginationItem>
        <PaginationItem disable>
          <PaginationLink previous href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">
            2
          </PaginationLink>
        <PaginationItem>
          <PaginationLink next href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink last href="#" />
        </PaginationItem>
      </Pagination>
  
    Pagination.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  listClassName: PropTypes.string,
  cssModule: PropTypes.object,
  size: PropTypes.string,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  'aria-label': PropTypes.string
};

PaginationItem.propTypes = {
  active: PropTypes.bool,
  children: PropTypes.node,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  disabled: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
};

PaginationLink.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  next: PropTypes.bool,
  previous: PropTypes.bool,
  first: PropTypes.bool,
  last: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  'aria-label': PropTypes.string
};

Popovers 帮助弹出窗

设置点击按钮在按钮旁边显示小的弹窗 显示信息 ，placement可以设置方向top/left/right/bottom
target 可以设置点击目标对象
<div>
      <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover  placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Popover Title</PopoverHeader>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover>
    设置触发
     // space separated list of triggers (e.g. "click hover focus")
  	trigger: PropTypes.string,
      
     <Button id="PopoverLegacy" type="button">
          Launch Popover (Legacy)
        </Button>
        <UncontrolledPopover trigger="focus" placement="bottom" target="PopoverFocus">
          <PopoverHeader>Focus Trigger</PopoverHeader>
          <PopoverBody>Focusing on the trigging element makes this popover appear. Blurring (clicking away) makes it disappear. You cannot select this text as the popover will disappear when you try.</PopoverBody>
        </UncontrolledPopover>
      </div>
  
    placement: PropTypes.oneOf([
    'auto',    'auto-start',    'auto-end',
    'top',    'top-start',    'top-end',
    'right',    'right-start',    'right-end',
    'bottom',    'bottom-start',    'bottom-end',
    'left',    'left-start',    'left-end',
  ]),

Progress 进度条显示

可以设置进度条中显示为动态滚动条纹效果animated 静态条纹striped	
多个显示在一个中关键字 multi
color 设置进度条颜色
在多个进度条中 需要关键字 bar


	<div className="text-center">463 of 500</div>进度条上面的内容
      <Progress value="463" max={500} />
       <Progress bar color="success" value="35">Wow!进度条中显示内容</Progress>   
	  <div className="text-center">With Labels</div>
      <Progress multi> 多个内容在一个进度条中显示，分为多段，效果像断点续传
        <Progress bar value="15">Meh 关键字 bar</Progress>
        <Progress bar striped  color="success" value="35">Wow!</Progress>
        <Progress bar animated color="warning" value="25">25%</Progress>
        <Progress bar color="danger" value="25">LOOK OUT!!</Progress>
      </Progress>

Spinners 过渡动画 转动的圈

可设置颜色color 大小size,size="sm" 类型type ,默认类型为board
Spinner.propTypes = {
  type: PropTypes.string, // default: 'border'
  size: PropTypes.string,
  color: PropTypes.string,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  children: PropTypes.string, // default: 'Loading...'
};

<div>
        <Spinner color="primary" />
        <Spinner type="grow" color="primary" />
        <Spinner color="secondary" />
        <Spinner size="sm" color="primary" />
    <Spinner color="danger" style={{ width: '3rem', height: '3rem' }} />
                        <Spinner color="warning" style={{ width: '3rem', height: '3rem' }} type="grow" />
      </div>

Tabs 选项卡导航 显示不容显现内容

与Nav 结合使用 关键字 tabs
<TabContent activeTab={this.state.activeTab}>
 <TabPane tabId="1">
       示例：
	<Nav tabs>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}> Tab1  </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '2' })}
              onClick={() => { this.toggle('2'); }} >
              Moar Tabs
            </NavLink>
          </NavItem>
        </Nav>
    <TabContent activeTab={this.state.activeTab}>
          <TabPane tabId="1">
            <Row>  <Col sm="12"><h4>Tab 1 Contents</h4> </Col> </Row>
          </TabPane>
          <TabPane tabId="2">
            <Row>
              <Col sm="6">
                <Card body> 1321 </Card>
              </Col>
            </Row>
          </TabPane>
        </TabContent>

Toasts 与modal 类似为弹出提示信息

Toast.propTypes = {
  className: PropTypes.string,
  color: PropTypes.string, // default: 'success'
  isOpen: PropTypes.bool,  // default: true
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  // Controls the transition of the toast fading in and out
  // See Fade for more details
  transition: PropTypes.shape(Fade.propTypes),
}
添加了 toggle={this.toggle｝在头部会有x关闭按钮
<div>
        <Button color="primary" onClick={this.toggle}>{this.props.buttonLabel}</Button>
      
        <Toast isOpen={this.state.show}>
          <ToastHeader toggle={this.toggle}>Toast title</ToastHeader>
          <ToastBody>
            Lorem ipsum dolor sit amet
          </ToastBody>
        </Toast>
        默认为显示 isOpen为true    
        <Toast>
        <ToastHeader icon={<Spinner size="sm" />}>
          Reactstrap
        </ToastHeader>
        <ToastBody>
          This is a toast with a custom icon — check it out!
        </ToastBody>
      </Toast>
      </div>
            
       

Tooltips 工具提示文本信息与Popovers 相似

可设置提示位置，是否显示，target 为触发显示的目标的Id，鼠标移动到目标 提示信息显示。propovers需要点击触发。

      <div>
        <p>Sometimes you need to allow users to select text within a <span style={{textDecoration: "underline", color:"blue"}} href="#" id="DisabledAutoHideExample">tooltip</span>.</p>
        <Tooltip placement="top" isOpen={this.state.tooltipOpen} autohide={false} target="DisabledAutoHideExample" toggle={this.toggle}>
          Try to select this text!
        </Tooltip>
  推荐使用
<p>Somewhere in here is a <span style={{textDecoration: "underline", color:"blue"}} href="#" id="UncontrolledTooltipExample">tooltip</span>.</p>
      <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
        Hello world!
      </UncontrolledTooltip>
</div>