React配置使用Bootstrap

岳泳
2023-12-01

1.安装Bootstrap依赖

npm install bootstrap@3 --save

2.在入口文件里(src下的index.js)导入Bootstrap依赖和css样式表

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

import 'bootstrap/dist/js/bootstrap';

3.引入Jquery的在线依赖(public下的index.html)

<script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

4.使用

<form >
          <div className="form-group">
            <label >账号:</label>
            <input type="text" className="form-control" id="exampleInputEmail1" placeholder="输入账号"></input>
          </div>
          <div className="form-group">
            <label >密码:</label>
            <input type="password" className="form-control" id="exampleInputPassword1" placeholder="输入密码"></input>
          </div>
          <button type="submit" className="btn btn-info">登录</button>
          <button type="reset" className="btn btn-danger" >重置</button>
        </form>

注:onSubmit={this.getFrom.bind(this)} --表单提交事件

       onReset={this.resetFrom}  --表单重置事件

       e.preventDefault() || (e.returnValue = false); --阻止页面刷新

       this.props.history.replace('/Home') --事件跳转

 类似资料: