Getting started

https://getbootstrap.kr/docs/5.2/getting-started/introduction/

먼저 HTML에 CSS 와 JS 파일을 추가한다. (HTML5 사용)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Grid

부트스트랩은 반응형 웹을 지원한다. 12 grid-system 으로 12개의 컬럼으로 나뉜다.

<div class="row">
        <div class="col-md-4" style="background-color: red;">
            A
        </div>
        <div class="col-md-4" style="background-color: yellow;">
            B
        </div>
        <div class="col-md-4" style="background-color: blue;">
            C
        </div>
    </div>

div 태그가 4칸씩 3개를 차지하여 한 줄을 3등분 한 것처럼 보인다.

md는 화면 해상도가 medium size(768px)이상일 때는 4칸을 차지하고 그보다 작을 경우에는 원래 div의 속성으로 돌아가서 한 줄을 다 차지한다. md 외에 sm(Small, 576px), lg(Large, 992px), xl(Extra Large, 1200px)가 있고 아무 옵션이 없으면 (Extra Small, 576px이하)이다.

옵션은 여러개 사용이 가능하다.

<div class="col-lg-3 col-md-4 col col-sm-6" style="background-color: red;">

위 div는 한 row에서
Large size인 992px까지는 3칸을 차지하고,
Midium size인 768px까지는 4칸을 차지하고,
Small size인 576px까지는 6칸을 차지한다.

Components

자주 쓰는 UI를 컴포넌트로 만들어 가져다가 쓸 수 있다.

Alerts

alert의 색상을 지정할 수 있다.(primary, secondary, success, danger, warning, info, light, dark)
CSS로 색상을 정의할 수 있다.

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

Badge

new 또는 카운트 등을 표시할 때 사용한다.
alert처럼 색상 지정이 가능하고 모양도 바꿀 수 있다.

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

Breadcrumb

내비게이션 계층 내에서 현재 페이지의 위치를 표시한다.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Buttons

색상, 사이즈를 지정가능하다. disabled로 비활성화

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

Button group

여러 개의 버튼을 그룹화하여 배치(페이징 등). 수직 배치도 가능하다.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

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>

Carousel

이미지 또는 텍스트를 가로로 슬라이드시켜서 보여준다.
컨트롤, 인디케이터 등 추가 가능하다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Collapse

특정 컨텐츠를 표시하거나 숨긴다.
href에 id값으로 표시가 가능하다.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Dropdowns

링크 목록 등을 드랍다운으로 오버레이 해준다.
dropdown-menu 와 dropdown-item 으로 구성된다.
드랍다운 방향도 지정이 가능하다.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

List group

리스트를 표시한다. 배지를 사용하거나, 페이지 이동할 때 쓴다.

Modal

팝업창을 띄울 때 사용한다.
백드롭을 static으로 설정하면, 배경을 클릭해도 모달은 닫히지 않는다.
scrollable로 스크롤 컨트롤 가능.

Navs and tabs

메뉴와 탭을 만들 때 사용한다.

Navbar

내비게이션 바를 만들어준다.

Pagination

여러 페이지 관리와 컨트롤을 해준다.

Popovers

특정 컨텐츠에 대해서 부가 설명을 띄워준다.
마우스 오버할 때도 뜨게 하는 것도 좋은 방법이다.(Tooltip을 써도 됨)
물음표 버튼 등으로 설명을 띄운다.

Progress

진행 상황에 대한 프로그레스 바를 제공해준다.

Scrollspy

스크롤 위치를 추적하거나 위치로 이동하게 해준다.

Spinner

페이지 로딩 상태 등을 나타낸다.
버튼에도 삽입 가능하다.

Toast

푸시 알림처럼 띄워준다.
다른 토스트 플러그인도 좋은게 많다.

Forms

텍스트 입력, 셀렉트, 토글, 체크박스 등 입력 컨트롤을 한다.

Input group

그룹을 추가해 폼 컨트롤을 간단하게 확장할 수 있다.

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

Utilities

Colors

텍스트, 배경, 불투명도를 색상을 줄 수 있다.

Display

컨텐츠가 화면에 보이는지 여부를 관리한다.
화면 사이즈 별로 띄우거나 감춘다.
프린트 할 때 안보이게 하는 것도 가능하다.

Interactions

select-all 전부 선택
select-auto 더블 클릭하여 선택가능
select-none 선택 불가

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

Text

텍스트 관련 기능.
정렬, 래핑, 오버플로우, 대소문자 변환, 폰트 등등...