React Bootstrap开发

官网地址：https://react-bootstrap.github.io/getting-started/introduction/

#安装Bootstrap
npm install react-bootstrap bootstrap
#安装之后，并且开发好代码后，启动项目需要运行yarn进行初始化项目，初始化完成后，再yarn start启动项目

// 在index.tsx中引入Bootstrap css样式
import 'bootstrap/dist/css/bootstrap.min.css';

// 示例代码，这个是按钮下拉菜单，直接引入Dropdown组件就行
import React, { FC } from 'react';
import Dropdown from 'react-bootstrap/Dropdown';
import './Styles.css';

const DropdownEllipsis: FC<DropdownEllipsisProps> = ({ options }) => (
  <Dropdown>
    <Dropdown.Toggle id="dropdownEllipsis" style={{ backgroundColor: '#red', content: '' }}>
      Downdown
    </Dropdown.Toggle>

    <Dropdown.Menu>
      {options.map((option) => (
        <Dropdown.Item href="#/action-1" onClick={option.onClick} key={option.text}>{option.text}</Dropdown.Item>
      ))}
    </Dropdown.Menu>
  </Dropdown>
);

export interface DropdownEllipsisProps {
  options: [{text: string; onClick: () => void}];
}

export default DropdownEllipsis;

/*Styles.css 修改样式*/
#dropdownEllipsis {
    width: auto;
    padding: 0;
    border: none;
    background-color: #ffffff;
}

/*防止点击后，出现蓝色的边框*/
#dropdownEllipsis:focus,
#dropdownEllipsis:active:focus,
#dropdownEllipsis.active:focus,
#dropdownEllipsis.focus,
#dropdownEllipsis:active.focus,
#dropdownEllipsis.active.focus {
    outline: none;
    border-color: transparent;
    box-shadow:none;
}

#dropdownEllipsis:after {
    content: none;
}