Form 사용하기 :
Form 패키지를 이용하면 기존 <html form> 태그에 깔끔하고 정리된 스타일을 간편하게 적용해 사용할 수 있다
- R044_ReactstrapFor.js
import React, { Component } from 'react';
import { Form, Label, Input, Row, Col, FormGroup } from 'reactstrap';
class R044_ReactstrapForm extends Component {
render() {
return(
<Form>
<Label for="exampleGender">Gender</Label>
<Input type="select" bsSize="sm">
<option>no select</option>
<option>woman</option>
<option>man</option>
</Input>
<Row form>
<Col md={6}>
<FormGroup>
<Label for="exampleAddress">address</Label>
<Input type="text" name="address" id="address"/>
</FormGroup>
</Col>
<Col md={4}>
<FormGroup>
<Label for="exampleMobile">mobile</Label>
<Input type="text" name="mobile" id="mobile"/>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleAge">age</Label>
<Input type="text" name="age" id="age"/>
</FormGroup>
</Col>
</Row>
</Form>
)
}
}
export default R044_ReactstrapForm;
- App.js
import React from 'react';
import './App.css';
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면
//'./..App.css'
import ReactstrapForm from './R044_ReactstrapForm'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapForm/>
</div>
);
}
export default App;
결과
'REACT' 카테고리의 다른 글
| REACT_reactstrap Jumbotron (0) | 2024.09.23 |
|---|---|
| REACT_reactstrap Input Group (0) | 2024.09.23 |
| REACT_reactstrap Fade (0) | 2024.09.23 |
| REACT_reactstrap Collapse (0) | 2024.09.23 |
| REACT_reactstrap Carousel (0) | 2024.09.23 |