Bootstrap Progress Bar除反应组件中的所有Bootstrap组件
之外 class Demo extends Component {
render() {
return (
<div>
<div className="profile_record">
<h5 className="progress-label"><strong>PROFILE COMPLETENESS</strong></h5>
<div className="progress">
<div className="progress-bar" role="progressbar" style={{width: "25%"}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
)
}
}
答案 0 :(得分:0)
看起来它按预期工作,你将山雀设置为:
aria-valuenow="25"
您确定包含了正确的bootstrap css
和'js'文件吗?
class Demo extends React.Component {
render() {
return (
<div>
<div className="profile_record">
<h5 className="progress-label"><strong>PROFILE COMPLETENESS</strong></h5>
<div className="progress">
<div className="progress-bar" role="progressbar" style={{width: "25%"}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('root'));
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
答案 1 :(得分:0)
从2018年9月开始,您可以使用Bootstrap ProgressBar,此处的积分为BootStrap ProgressBar
import { ProgressBar } from "react-bootstrap";
<div>
<ProgressBar variant="success" now={40} />
<ProgressBar variant="info" now={20} />
<ProgressBar variant="warning" now={60} />
<ProgressBar variant="danger" now={80} />
</div>