4-1. 버튼
■ 버튼 스타일
부트스트랩에서는 다양한 스타일의 버튼 클래스를 제공합니다.
<div class="container mt-3">
<h3>버튼 스타일</h3>
<button type="button" class="btn">button</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-secondary">secondary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-dark">dark</button>
<button type="button" class="btn btn-light">light</button>
<button type="button" class="btn btn-link">link</button>
</div>
ex4-1.html의 실행 결과
■ 테두리 버튼
부트스트랩에서는 테두리가 있는 버튼 클래스를 제공합니다.
<div class="container mt-3">
<h3>테두리 버튼</h3>
<button type="button" class="btn btn-outline-primary">primary</button>
<button type="button" class="btn btn-outline-secondary">secondary</button>
<button type="button" class="btn btn-outline-success">success</button>
<button type="button" class="btn btn-outline-info">info</button>
<button type="button" class="btn btn-outline-warning">warning</button>
<button type="button" class="btn btn-outline-danger">danger</button>
<button type="button" class="btn btn-outline-dark">dark</button>
<button type="button" class="btn btn-outline-light">light</button>
</div>
ex4-2.html의 실행 결과
■ 버튼 크기
부트스트랩에서는 3가지의 버튼 크기가 있습니다.
<div class="container mt-3">
<h3>버튼 크기</h3>
<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>
</div>
ex4-3.html의 실행 결과
■ 활성/비활성 버튼
클래스 .active는 버튼을 활성화 시키고 클래스 .disabled는 버튼을 비활성화 시킵니다.
<div class="container mt-3">
<h3>활성/비활성 버튼</h3>
<button type="button" class="btn btn-primary active">버튼1</button>
<button type="button" class="btn btn-primary" disabled>버튼2</button>
<a href="#" class="btn btn-info disabled">버튼3</a>
</div>
ex4-4.html의 실행 결과
■ 버튼 그룹
<div> 태그에 클래스 .btn-group을 적용하여 버튼 그룹을 만듭니다.
<div class="container mt-3">
<h3>버튼 그룹</h3>
<div class="btn-group">
<button type="button" class="btn btn-success px-3">메뉴1</button>
<button type="button" class="btn btn-success px-3">메뉴2</button>
<button type="button" class="btn btn-success px-3">메뉴3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger px-3">메뉴1</button>
<button type="button" class="btn btn-danger px-3">메뉴2</button>
<button type="button" class="btn btn-danger px-3">메뉴3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary px-3">메뉴1</button>
<button type="button" class="btn btn-secondary px-3">메뉴2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">메뉴3</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">서브 메뉴1</a>
<a class="dropdown-item" href="#">서브 메뉴2</a>
</div>
</div>
</div>
</div>
ex4-5.html의 실행 결과
■ 버튼 콘텐트 토글
클래스 .collapse을 적용하면 버튼을 클릭할 때 마다 콘텐트가 보이기와 감추기를 번갈아 합니다.
<div class="container mt-3">
<h3>버튼 콘텐트 토글</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse"
data-bs-target="#demo">버튼</button>
<div id="demo" class="collapse">
안녕하세요.
</div>
</div>
ex4-6.html의 실행 결과
