Bootstrap 5 버튼

버튼 스타일

Bootstrap 5는 다양한 스타일의 버튼을 제공합니다:

예제

<button type="button" class="btn">기본</button>
<button type="button" class="btn btn-primary">주요</button>
<button type="button" class="btn btn-secondary">부차적</button>
<button type="button" class="btn btn-success">성공</button>
<button type="button" class="btn btn-info">정보</button>
<button type="button" class="btn btn-warning">경고</button>
<button type="button" class="btn btn-danger">위험</button>
<button type="button" class="btn btn-dark">어두운 색상</button>
<button type="button" class="btn btn-light">연한 색상</button>
<button type="button" class="btn btn-link">링크</button>

본인이 직접 시험해 보세요

버튼 클래스는 다음과 같이 사용할 수 있습니다: <a>、<button> 또는 <input> 요소:

예제

<a href="#" class="btn btn-success">링크 버튼</a>
<button type="button" class="btn btn-success">버튼</button>
<input type="button" class="btn btn-success" value="입력 버튼">
<input type="submit" class="btn btn-success" value="제출 버튼">
<input type="reset" class="btn btn-success" value="重置 버튼">

본인이 직접 시험해 보세요

왜 링크의 href 속성에 '#'을 썼는가요？

링크로 연결할 수 있는 페이지가 없으며 "404" 메시지를 받고 싶지 않아서 #을 링크로 사용했습니다. 실제로는 "검색" 페이지의 실제 URL이어야 합니다.

버튼 프로파일

Bootstrap 5는 또한 여덟 개의 프로파일/경계 버튼을 제공합니다。

마우스를 위로 가져가면 추가적인 "hover" 효과를 볼 수 있습니다：

예제

<button type="button" class="btn btn-outline-primary">주요</button>
<button type="button" class="btn btn-outline-secondary">부수적</button>
<button type="button" class="btn btn-outline-success">성공</button>
<button type="button" class="btn btn-outline-info">정보</button>
<button type="button" class="btn btn-outline-warning">경고</button>
<button type="button" class="btn btn-outline-danger">위험</button>
<button type="button" class="btn btn-outline-dark">dark</button>
<button type="button" class="btn btn-outline-light text-dark">가벼운</button>

본인이 직접 시험해 보세요

버튼 크기

큰 버튼에 사용하세요 .btn-lg 클래스를 작은 버튼에 사용하세요 .btn-sm 클래스：

예제

<button type="button" class="btn btn-primary btn-lg">대형</button>
<button type="button" class="btn btn-primary">기본</button>
<button type="button" class="btn btn-primary btn-sm">소형</button>

본인이 직접 시험해 보세요

블록 버튼

부모 요소 전체 너비를 가로채는 블록 버튼을 생성하려면 부모 요소에 사용하세요 .d-grid "helper" 클래스：

예제

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">전체 너비 버튼</button>
</div>

본인이 직접 시험해 보세요

많은 블록버튼이 있을 경우, 다음과 같이 사용할 수 있습니다: .gap-* 클래스는 간격을 제어합니다:

예제

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">전체 너비 버튼</button>
  <button type="button" class="btn btn-primary btn-block">전체 너비 버튼</button>
  <button type="button" class="btn btn-primary btn-block">전체 너비 버튼</button>
</div>

본인이 직접 시험해 보세요

활성/비활성 버튼

버튼은 활성(눌린 상태로 표시) 또는 비활성(클릭할 수 없음) 상태로 설정할 수 있습니다:

클래스 .active 버튼이 눌린 상태로 표시되도록 합니다. disabled 속성은 버튼을 클릭할 수 없게 합니다. 주의할 것은, <a> 요소는 disabled 속성을 지원하지 않으므로 다음과 같이 사용해야 합니다: .disabled 클래스를 사용하여 시각적으로 비활성 상태로 표시합니다.

예제

<button type="button" class="btn btn-primary active">활성 주요 버튼</button>
<button type="button" class="btn btn-primary" disabled>비활성 주요 버튼</button>
<a href="#" class="btn btn-primary disabled">비활성 링크</a>

본인이 직접 시험해 보세요

로드 버튼

버튼에 "spinner"를 추가할 수 있으며, 우리의 BS5 Spinner 교육에서 더 많은 내용을 배울 수 있습니다:

예제

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  로딩 중..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  로딩 중..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  로딩 중..
</button>

본인이 직접 시험해 보세요