其实 bootstrap 号称最流行前端ui框架，不过也确实很厉害，基本上学过前端的小伙伴 都有学习bootstrap的经历，

毕竟bs中的 样式书写 可以堪称大师级别的写法了。现在大多数ui框架 都是深受bootstrap的影响了。

但工作之后 发现其实用的也有bs,但是比较少，用vue的时候，我用的是 vant,element， 使用 react的时候 用的是 antd。

今天写这个就是一个抛砖引玉的效果哈，
使用react-boot版本 重新体验下 当年学习 boot的那种感觉

现在的r-bs 还处于 2.* 测试版本 不过 1.* 已经比较稳定了
下面就是 使用了

1. 安装使用 快速上手

npm install react-bootstrap bootstrap@4.6.0

2. 全局中 引入 样式文件

import 'bootstrap/dist/css/bootstrap.min.css';

3. 引入组件使用了

import { Button, Carousel } from 'react-bootstrap';
function App() {
  return (
    <div className="App">
      <Button variant="danger">点击</Button>
      <Button variant="primary">点击</Button>
      <Button variant="warning">点击</Button>

      <Carousel fade style={{ height: 500, width: 800}}>
        <Carousel.Item>
          <img 
            height="500px"
            style={{objectFit: 'cover'}}
            className="d-block w-100"
            src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img 
            height="500px"
            style={{objectFit: 'cover'}}
            className="d-block w-100"
            src="https://img1.baidu.com/it/u=4268324981,3384091170&fm=26&fmt=auto&gp=0.jpg"
            alt="Second slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img 
            height="500px" 
            style={{objectFit: 'cover'}}
            className="d-block w-100"
            src="https://img0.baidu.com/it/u=685972578,3792329641&fm=26&fmt=auto&gp=0.jpg"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

4. 我们看下实际的效果哈
   

是不是 很熟悉的感觉 ， boot的按钮 和 轮播图
其实 还是可以使用 哎

有人问博主，从vue转到 react有啥变化没， 博主的回答 就是 我再找vue的工作人家不要我了，这个就是变化！
关注我 持续 更新前端知识