BootStrap5(BS5) 공부하기 5

부트스트랩에는 다양한 형태의 버튼이 존재한다. 버튼의 색은 이전에 공부했던 색깔과 동일하다.

<div class="container mt-3">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</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>

버튼 클래스는 <a>, <button>, <input>에서 사용될 수 있다.

<div class="container mt-3">
  <h2>Button Elements</h2>
  <a href="#" class="btn btn-success">Link Button</a>
  <button type="button" class="btn btn-success">Button</button>
  <input type="button" class="btn btn-success" value="Input Button">
  <input type="submit" class="btn btn-success" value="Submit Button">
  <input type="reset" class="btn btn-success" value="Reset Button">
</div>

button-outline은 hover 효과를 위한 것이다. 다음과 같이 하면, hover효과를 가지는 버튼을 만들 수 있다.

<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 text-dark">Light</button>

버튼의 크기도 지정할 수 있는데,

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Default</button>    
<button type="button" class="btn btn-primary btn-sm">Small</button>

위와 같이 lg, sm, md로 크기 지정이 가능하다.

parent요소의 전체 너비에 걸친 블록 수준의 단추를 만드려면 helper 클래스를 사용한다. (d-grid)
그리고 블록 레벨 버튼이 많다면 gap-* 으로 사이에 갭을 줄 수 있다.

<div class="d-grid gap-3">
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
    <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
  </div>

gap-3가 없다면 다닥다닥 붙은 버튼이 만들어진다.

활성화/비활성화 버튼을 만들 수 있는데, 다음과 같이 사용한다.

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

a태그는 disabled 속성을 지정할 수 없으므로 disabled 클래스를 통해 비활성화 버튼을 구현한다.

뱅글뱅글 도는 스피너 버튼을 구현할 수 있다.

  <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>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>

"spinner-grow spinner-grow-sm"에서와 같이, 앞과 뒤의 형태를 맞춰주면서 크기까지 지정해주어야 한다. "spinner-grow spinner-sm" 처럼하면, spinner-grow의 형태는 엄청 크고 버튼의 글자는 작은 불상사가 발생한다.

버튼 그룹은 버튼들이 붙어 있는 형태다

<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>

버튼의 사이즈를 조정할땐, 버튼에 개별로 일일히 사이즈를 부여하는 대신, 버튼 그룹에 사이즈를 부여한다.

<div class="btn-group btn-group-sm">
<div class="btn-group">
<div class="btn-group btn-group-lg">

버튼그룹을 세로형태로 만들고 싶으면 vertical을 사용한다.

<div class="btn-group-vertical">

버튼 그룹은 디폴트값으로, inline이다.

버튼 그룹 내 토글 버튼을 만들고자 하면 다음과 같이 하면 된다.

 <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>

토글 버튼도 버튼 그룹처럼 묶어 생성한다.

badge는 내용에 추가적인 정보를 더하기 위해 사용한다.
badge클래스를 bg-secondary와 같은 컨텍스트 클래스와 사용해 직사각형의 badge를 만든다.
badge는 상위요소와 크기가 일치하도록 배율을 조정한다.

<span class="badge bg-secondary">New</span></h6>

위와 같이 <span>태그와 같이 사용한다.

bg-와 같은 컨텍스트 클래스를 사용해 badge의 색상을 바꾼다.

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>

전에 색상관련해 언급했던 컬러들과 같은 요소를 사용한다.

badge를 둥그런 모양으로 만들고자 할땐 rounded-pill을 사용한다.

<span class="badge rounded-pill bg-primary">Primary</span>

이때 요소들의 순서를 바꿔도 상관이 없다.

badge를 요소 안에 넣어 작성할 수 있는데, 버튼안에 작성하려면 다음과 같이 하면 된다.

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-danger">4</span>
</button>
<button type="button" class="btn btn-danger">
  Notifications <span class="badge bg-dark">7</span>
</button>

button타입 안에 span클래스를 사용해 뱃지를 가두면 된다.

기본 프로그레스바를 만들기 위해서는 progress 클래스를 컨테이너 요소에 작성하고, progress-bar클래스를 자식 요소로 집어 넣는다. css width 속성으로 프로그레스바의 너비를 설정한다.

<div class="progress">
    <div class="progress-bar" style="width:70%"></div>
</div>

프로그레스바의 높이(두께)는 1rem(16px)이 기본이다. css height를 사용하면 조정이 가능하다.
만약 height를 바꾼다면 progress container에도 동일한 height를 적용해주어야 한다.

<div class="progress" style="height:10px">
    <div class="progress-bar" style="width:40%;height:10px"></div>
</div>

div태그 사이에 문자열을 적어넣어 라벨값을 주는것도 가능하다.

색깔이 있는 프로그레스바를 만들 수도 있는데, 다음과 같이 하면 된다.

  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>

  <!-- Green -->
  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
  </div><br>

  <!-- Turquoise -->
  <div class="progress">
    <div class="progress-bar bg-info" style="width:30%"></div>
  </div><br>

  <!-- Orange -->
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:40%"></div>
  </div><br>

  <!-- Red -->
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
  </div><br>

  <!-- White -->
  <div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
  </div><br>

  <!-- Grey -->
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  </div><br>

  <!-- Light Grey -->
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
  </div><br>

  <!-- Dark Grey -->
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
  </div>

만약 프로그레스바에 빗금이 쳐진 모양을 원하면 progress bar striped태그를 사용한다.

  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
  </div>

프로그레스바가 움직이게 하고 싶다면 progress-bar-animated를 사용한다.

  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>

프로그레스바는 쌓아 사용할 수 있다.

<div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      Warning
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      Danger
    </div>
</div>

이렇게 같은 progress 컨테이너 안에서 div로 나눠 작성하면 가능하다.

spinner를 생성하려면 spinner-border을 사용한다.
spinner를 사용할때 색상을 주기 위해서는 text color 도구들을 사용한다.

  <div class="spinner-border text-muted"></div>
  <div class="spinner-border text-primary"></div>
  <div class="spinner-border text-success"></div>
  <div class="spinner-border text-info"></div>
  <div class="spinner-border text-warning"></div>
  <div class="spinner-border text-danger"></div>
  <div class="spinner-border text-secondary"></div>
  <div class="spinner-border text-dark"></div>
  <div class="spinner-border text-light"></div>

다음은 growing spinner을 사용하는 예시다.

  <div class="spinner-grow text-muted"></div>
  <div class="spinner-grow text-primary"></div>
  <div class="spinner-grow text-success"></div>
  <div class="spinner-grow text-info"></div>
  <div class="spinner-grow text-warning"></div>
  <div class="spinner-grow text-danger"></div>
  <div class="spinner-grow text-secondary"></div>
  <div class="spinner-grow text-dark"></div>
  <div class="spinner-grow text-light"></div>

spinner의 사이즈를 작게할땐 spinner-border-sm 을 사용한다.

  <div class="spinner-border spinner-border-sm"></div>
  <div class="spinner-grow spinner-grow-sm"></div>