Bootstrap 4 / Buttons – 버튼 꾸미기

Buttons

CSS로 꾸밀 때 손이 많이 가는 것 중의 하나가 버튼입니다. Bootstrap을 사용하면 여러 색의 버튼을 쉽게 만들 수 있습니다.

기본

클래스의 값으로 btn btn-xxx를 추가하면 버튼이 꾸며집니다. xxx에 들어갈 문자열에 따라 색이 달라집니다. 버튼에 마우스를 올리면 좀 더 진한 색으로 바뀝니다.

위 아래 여백이 없으므로, 줄바꿈이 있을 때 버튼이 붙는다는 것에 주의합니다.

버튼 모양으로 만들 수 있는 태그

꼭 button만 꾸밀 수 있는 것은 아닙니다. a, input, span, p 등 다른 요소도 꾸밀 수 있습니다.

테두리 모양의 버튼

outline 문자열을 추가하여 흰 배경에 테두리가 있는 버튼을 만들 수 있습니다.

크기

클래스에 btn-lg를 추가하면 버튼이 커지고, btn-sm을 추가하면 버튼이 작아집니다. btn-block을 추가하면 block 레벨의 버튼이 만들어집니다.

활성화와 비활성화

클래스에 active를 추가하면 색이 진해집니다. disabled를 축하면 색이 흐려집니다.

클래스 값으로 disabled를 추가해도 됩니다.