Bootstrap 3.3.7 | 입력폼(form)과 GUI 구성 요소 | 체크 박스(checkbox)와 라디오 버튼(radio)


입력폼 스타일 설정에 주의가 필요한 것은 체크 박스와 라디오 버튼이다. 이것들은 class="form-group"class="form-control"은 사용하지 않는다. 대신에 전용의 클래스가 준비되어 있다.

체크 박스

<div class="checkbox">
    <label for="foo">
        <input type="checkbox" id="foo">
        라벨
    </label>
</div>

체크 박스는 <div class="checkbox">라는 태그로 묶어 작성한다. 그러면 Bootstrap 스타일 체크 박스가 표시된다.

라디오 버튼

<div class="radio">
    <label for="foo">
        <input type="radio" id="foo">
        라벨
    </label>
</div>

라디오 버튼은 <div class="radio">라는 태그로 묶어 작성한다. 이것으로 라디오 버튼 Bootstrap 스타일을 완성한다.

어째든, 실제 이용에는 <label>을 사용하여 라벨 표시를 결합이 될 것이다. <label><div> 태그 안에 포함시켜 표시해야 한다.

비활성화(disabled) 클래스

체크 박스나 라디오 버튼을 사용할 수 없게 하려면, 해당 태그에 “disabled"를 지정할 수 있다. 이 경우 <div> 태그의 class에 “disabled” 클래스를 추가해야 한다. 그러면 마우스 포인터가 컨트롤 위에 오면 사용할 수 없다는 것을 나타내는 커서로 바뀌게 된다.

 

그럼, 이것도 간단한 사용 예제는 아래에 올려둔다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2 >form</h2>
        </div>
         
        <form>
            <div class="checkbox">
                <label for="cb1">
                    <input type="checkbox" id="cb1">
                    Check Box
                </label>
            </div>
            <div class="checkbox disabled">
                <label for="cb2">
                    <input type="checkbox" id="cb2" disabled>
                    Check Box
                </label>
            </div>
            <div class="radio">
                <label for="rb1">
                    <input type="radio" id="rb1" name="rb">
                Radio Button No, 1.
                </label>
            </div>
            <div class="radio">
                <label for="rb2">
                    <input type="radio" id="rb2" name="rb" checked>
                Radio Button No, 2.
                </label>
            </div>
            <div class="radio disabled">
                <label for="rb3">
                    <input type="radio" id="rb3" name="rb" disabled>
                Radio Button No, 3.
                </label>
            </div>
            <div class="form-group">
                <input type="button" class="btn" value="Click">
            </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

체크 박스와 라디오 버튼에 각각 사용 가능한 것과 이용 불가인 것을 표시하고 있다.