5-3. 체크박스와 라디오 버튼
■ 체크박스
체크박스의 스타일을 지정하려면 래퍼 요소를 사용하여 클래스 .form-check 라벨과 체크박스의 여백이 적절하게 유지되도록 해야 합니다.
그런 다음 클래스 .form-check-label를 추가하여 요소에 라벨을 지정하고 클래스 .form_check 내에서 .form-check-input을 이용하여
체크박스의 스타일을 적절하게 지정합니다. 클래스 checked는 해당 체크박스가 선택된 상태로 만듭니다. 클래스 .disabled는 체크박스를
비활성화 상태로 설정합니다.
< div class=" container mt-3" >
< h3> 체크박스< /h3>
< form>
< div class=" form-check" >
< input type=" checkbox" class=" form-check-input" id=" check1" name=" option1" checked>
< label class=" form-check-label" for=" check1" > 항목1< /label>
< /div>
< div class=" form-check" >
< input type=" checkbox" class=" form-check-input" id=" check2" name=" option2" >
< label class=" form-check-label" for=" check2" > 항목2< /label>
< /div>
< div class=" form-check" >
< input type=" checkbox" class=" form-check-input" disabled>
< label class=" form-check-label" > 항목3< /label>
< /div>
< button type=" submit" class=" btn btn-primary mt-3" > 확인< /button>
< /form>
< /div>
ex5-7.html의 실행 결과
새 창에서 보기
■ 라디오 버튼
라디오 버튼도 체크박스와 같은 방식으로 폼 관련 클래스를 사용합니다.
< div class=" container mt-3" >
< h3> 라디오 버튼< /h3>
< form>
< div class=" form-check" >
< input type=" radio" class=" form-check-input" id=" radio1" name=" radios" checked>
< label class=" form-check-label" for=" radio1" > 항목1< /label>
< /div>
< div class=" form-check" >
< input type=" radio" class=" form-check-input" id=" radio2" name=" radios" >
< label class=" form-check-label" for=" radio2" > 항목2< /label>
< /div>
< div class=" form-check" >
< input type=" radio" class=" form-check-input" disabled>
< label class=" form-check-label" > 항목3< /label>
< /div>
< button type=" submit" class=" btn btn-primary mt-3" > 확인< /button>
< /form>
< /div>
ex5-8.html의 실행 결과
새 창에서 보기
■ 토글 스위치
체크박스를 토글 스위치로 스타일링하려면 클래스 .form-check과 .form-switch를 함께 사용합니다.
< div class=" container mt-3" >
< h3> 토글 스위치< /h3>
< form>
< div class=" form-check form-switch" >
< input class=" form-check-input" type=" checkbox" id=" switch1" name=" sw1" checked>
< label class=" form-check-label" for=" switch1" > 네트워크 연결< /label>
< /div>
< /form>
< /div>
ex5-9.html의 실행 결과
새 창에서 보기
