[Bootstrap] Bootstrap 예제: 1. 기본 컴포넌트

Bootstrap 예제: 1. 기본 컴포넌트

Bootstrap은 HTML 클래스 기반으로 다양한 컴포넌트를 제공합니다.

Button

btn 클래스와 함께 btn-* 형태의 클래스를 추가하여 스타일을 지정합니다.

<!-- 색상별 버튼 -->
<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-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

<!-- 버튼 크기 -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Card

콘텐츠를 담는 유연한 컨테이너입니다. 이미지, 텍스트, 버튼 등을 조합할 수 있습니다.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Alert

사용자에게 특정 정보를 알릴 때 사용합니다.

<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>