부트스트랩5, 체크박스/라디오버튼/스위치

부트스트랩5에서 체크박스나 라디오 버튼을 어떻게 사용하는지 알아보고자 한다. 

 

알고 있듯이 부트스트랩은 클래스에 대부분을 정의한다.

 

체크박스

 

부트스트랩5에서 체크박스는 아래와 같다. 부트스트랩5에서 사용할 때 클래스에 form-check를 추가한 후 input 클래스에 form-check-input을 추가한다. label 클래스에 form-check-label을 추가하여 정의한다.  참고로 체크박스의 체크 여부는 클래스를 제외하고  label이 아니고 input에 checked를 추가한다.

 

여담으로 크롬과 웨일로 checks를 둘 다 수표라고 번역했다. 만약 번역본을 읽으면 수표가 무엇을 말하는지 이해가 될지 모르겠다. 나는 체크라는 말이 익숙하고 이해가 쉽다.

 

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

 

비활성화

 

체크박스를 사용할 수 없게 한다면 얼마 전에 알아 보았듯이 disabled를 추가하면 된다고 추측할 수 있다. 예상대로 input에 diabled를 추가하면 체크박스가 회색으로 변하고 클릭하지 못하게 비활성화 한다는 것을 알 수 있다.

여담으로 오늘 알았는데 disabled를 크롬에서는 장애인이라고 번역했다. 뜬금없이 장애인... 그렇다고 항상 장애인이라고만 번역하는 것이 아니라 비활성화라고도 번역한다. 나는 비활성화가 마음에 든다. 구글에서 disabed의 뜻을 찾으니 불구가 된다라는 뜻이었다. 체크박스를 적다가 갑자기 영어 단어 공부...

 

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

 

라디오 버튼

 

아래 그림과 같은 라디오 버튼을 만드는 경우 체크박스와 다른 점이 별로 없다. 단지 체크박스를 라디오 버튼으로 변경할 때 input type를 checkbox에서 radio로 변경해주면 되고 나머지는 같다. 참고로 클릭하지 못하게 하는 비활성화 경우 input에 disabled를 추가하면 된다.

 

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

 

스위치

 

아래 그림처럼 스위치를 on과 off과 같은 것을 만드는 것은 클래스에 form-switch를 추가하면 된다. 이 블로그는 부트스트랩3으로 만들었는데 스위치 효과는 비밀글 on/off를 사용할 때 사용했다.

 

부트스트랩3은 스위치가 없어서 스위치 효과를 구현하는 CSS를 사용했다. 참고로 소스를 보듯이 비활성화는 input에 disabled를 추가하면 된다. 지금 사용하는 스위치 버튼이 멋있지만 CSS를 불러와야 되니 복잡하다. 만약 부트스트랩3에도 부트스트랩5와 같은 스위치가 있다면 CSS를 사용하지 않았을 것이다.

 

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

 

인라인 체크박스

 

아래 그림처럼 인라인 체크박스를 만들고자 한다면 클래스에 form-check-inline을 추가하면 된다. 아래 소스처럼 form-check form-check-inline이라고 해주면 된다. 참고로 특정 체크박스 비활성화는 input에 disabled를 추가한다.

 

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

 

인라인 라디오 버튼 

 

라디오 버튼 인라인 경우도 인라인 체크박스와 비슷하다. 변경할 것은 아래 소스처럼 input type을 checkbox에서 radio로 변경만 해주면 된다. 물론 클래스에 form-check-inline을 추가해야 한다.

 

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

 

버튼

 

폼에서도 버튼을 만들 수 있다. label에 btn을 정의하는 것 같은데 아래 간단한 소스만 보고 자세히 모르겠다. 부트스트랩3으로 이 블로그를 만들어서 label에 있는 btn btn-primary는 아래 그림과 같은 파란색 버튼을 만든다는 것이다. 

 

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

 

이 블로그에서 댓글 받을 때 만든 버튼은 아래 그림처럼 <lable>이 아닌 <button>을 사용하여 만들었다. 내가 알기로 3에서 폼으로 button이 아니면 버튼을 만들 수 없는 것으로 안다.