부트스트랩 Bootstrap 3 구성요소 Input groups

input 요소는 크로스브라우징이 좀 힘든요소입니다. 

기본구조를 보면 input 에는 .form-control 이라는 클래스를 사용합니다. 이 클래스는 input 에 대한 기본 스타일을 지정하고 있습니다.

앞에 @ 같은 표시를 붙이고 싶다다면 addon 이라는것을 써서 .input-group-addon 클래스를 사용합니다.

물론 뒤에 붙일때도 사용합니다. html 순서상 다음에 위치하기만 하면 됩니다.

input 은 모두 .input-group 클래스로 감싸는 형태입니다.

Sizing(크기조정)

input 에서 크기조정은 input-group 클래스에 input-group-* 클래스를 추가해주기만 하면 됩니다. 여기서 * 는 lg,sm 등등 크기를 나타내는 단어를 똑같이 쓰면 됩니다.

Checkboxes and radio addons(체크박스와 라디오 에드온)

위에서보듯 addons 이라는것을 사용하여 input 의 앞이나 뒤에 위치하게 할 수 있습니다.

체크박스나 라디오버튼에 이 addons 을 사용하여 체크하는곳을 addons 의 위치에 놓을 수 있습니다.

input-group-addon 클래스 안에 문자가 들어가는것이 아니라 이번에는 input 이 들어가고 type 으로 checkbox 나 radio 가 들어가는 형태입니다.

Button addons(버튼 에드온)

에드온의 위치에 버튼을 사용하는 형태입니다.

위에서는 라디오버튼등을 input-group-addon 클래스 안에 넣었지만 버튼은 이 클래스 대신에 input-group-btn 클래스를 사용합니다.

input-group-btn 클래스가 button 을 감싸는 구조로 되어 있습니다.

Buttons with dropdowns(버튼 드롭다운 추가)

input 에 버튼을 사용하는 방법은 위에서 다뤘고, 여기는 버튼 드롭다운을 추가하는 방법입니다.

사용법은 똑같습니다. 

버튼의 자리에 버튼 드롭다운이 들어간다는것 뿐입니다.

아래 녹색으로 표시한것은 제가 버튼을 설명할 때 이야기했듯 우측으로 정렬이 되어서 드롭다운이 펼쳐진다는 점만 다를뿐 모든것이 같습니다.

Segmented buttons(분할 버튼)

분할버튼은 위처럼 드롭다운형태로 버튼이 들어가는 형태이지만 클릭을 하는 공간이 분리가 되어 있다는 뜻입니다.

드롭다운 버튼을 잘 보신분은 이해가 가시겠지만 여기서 좀더 자세히 설명을 해드리겠습니다.

위보다 한줄이 더 추가되었습니다. 

바로 버튼을 클릭하는 공간을 만들기 위해 button이 하나더 추가되었습니다. 그곳에 caret 라는 클래스가 위치하고 있으며 이 클래스가 삼각형모양의 아이콘입니다.

그 공간을 분리해서 만든것이 Segmented buttons 라고 합니다.