twitter-bootstrap
버튼

통사론

• 클래스 : .btn-default | .btn-primary | .btn-success | .btn-info | .btn 경고 | .btn-danger | .btn-link;
• 크기 : .btn-lg | .btn-md | .btn-sm | .btn-xs;
• 상태 : 활성 | dissabled.

버튼 클래스

부트 스트랩은 스타일 지정 버튼에 대한 여러 클래스를 제공하고 두드러지게 만듭니다.

요소에 .btn 클래스를 추가하여 부트 스트랩 단추를 만들 수 있습니다.

단추 크기

.btn-size 클래스를 사용하여 다양한 크기의 버튼을 만들 수도 있습니다.

버튼 활성화

active 클래스는 버튼이 눌러 진 것처럼 보이게합니다.

<button type="button" class="btn btn-primary active">Active Primary</button>

버튼 사용 중지

disabled 클래스를 버튼에 추가하면 버튼을 클릭 할 disabled 렌더링되고 커서를 가져 가면 금지 된 커서가 표시됩니다.

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

버튼을 함께 수평으로 렌더링

.btn-group 클래스를 사용하면 여러 단추를 가로로 렌더링 할 수 있습니다. 컨테이너 요소 안에 버튼을 넣고 그 요소에 btn-group 클래스를 지정하기 만하면됩니다.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

수직으로 버튼 렌더링

컨테이너 요소에 .btn-group-vertical 클래스를 적용합니다.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

버튼 그룹을 전체 너비로 만듭니다.

.btn-group 요소 안에 래핑 된 버튼은 필요한만큼의 너비 만 차지합니다. 그룹을 화면의 전체 너비로 확장하려면 대신 .btn-group-justified 사용하십시오.

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apples</a>
  <a href="#" class="btn btn-primary">Oranges</a>
  <a href="#" class="btn btn-primary">Pineapples</a>
</div>