[CSS Framework] Bootstrap | Button

버튼을 다루는 작업에서는 항상 btn 클래스가 사용된다.

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

오른쪽이 전형적인 버튼인게 부트스트랩 버튼과 다른 것을 파악할 수 있다.

기본 값으로 설정된 색상들이다. 중요한것은 시맨틱! 의미가 중요하다! (부트스트랩의 주요 컬러는 보라색 같은 의미가 중 요한 것이다.) 다 바꿀 수 있는 빌트인 옵션이다. 중요한것은 레이블과 용어 뒤에 있는 의미이다. 

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Primary</button>
    <button type="button" class="btn btn-info">Primary</button>

btn btn 뒤 시맨틱 컬러를 쓴 구문을 다양한 형태로 만들었다. 

 

 

 

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>

type="button" 속성은 제출이나 재설정 버튼이 아니라 그냥 기본값으로 지정된 동작이 없는 버튼이다. 

 

 

 

Outline 변형도 할 수 있다.

실제 클래스 이름은 다르다. btn은 같지만 btn-outline-색상 이름 형태이

다. 

  <button class="btn btn-outline-warning">Warning Outline</button>

마우스를 Warning Outline에 올리니 반전 효과가 생겼다.

 

스펠링이 조금만 틀려도 이러한 효과들은 적용되지 않는다!

btn-lg, btn-sm

더 큰 버튼을 만들려면 btn-lg

더 작은 버튼을 만들려면 btn-sm

 

 

 

<button class="btn btn-outline-info btn-lg">Info Outline</button>

Info Outline 버튼은 다른 버튼들에 비해 사이즈가 커졌다.

 

<button class="btn btn-outline-secondary btn-sm">Secondary Outline</button>

Secondaty Outline 버튼은 다른 버튼들에 비해 사이즈가 작아졌다. 

 

 

블록 레벨 버튼

블록 레벨 버튼도 만들 수 있다. display 특성을 직접 변경하지 않고도 블록 레벨 버튼을 만들 수 있다.

display를 블록 상태로 설정하면 활성화 상태와 비활성화된 상태로도 만들 수 있다. 

<button type="button" class="btn btn-success" disabled>Success Disabled</button>

success 버튼이 비활성화되었다.

 

 

 

 

button의 색상들을 바꿀 수 있지만 담긴 의미가 중요하다! 왜냐하면 색상은 레이블이기때문이다.