프로그래밍/Bootstrap 5

[ Bootstrap 5 ] 부트스트랩 컴포넌트 살펴보기 (1/2)

blu3fishez 2022. 11. 11. 20:49

본 포스트는 w3school 을 기반으로 작성되었습니다.

개인 필기용으로 작성된 글이므로 난해할 수 있습니다. 부가설명이 필요하다면 언제든지 댓글 달아주세요.

강조 색상

모든 부트스트랩 컴포넌트들에는 강조할 색상을 템플릿으로 만들어 지원해주고 있다.

primary
success
info (하늘색)
warning
danger
secondary
dark (어두운색)
light (밝은색)

background 같은 경우 bg-, text 의 경우 text- 를 앞에 써주고 위에 해당되는 색깔에 따라 강조색상을 입력하면 적용된다.

버튼

말 그대로 <button> 요소 내에 클래스로 스타일링할 때 사용되는 컴포넌트이다. 다만 꼭 그렇다고 <button> 태그 내에서만 쓰이는 건 아니고, <input> 구현에 따라서는 div 나 span 등 아무 요소 내에 적용해도 상관없다.

기본적으로 부트스트랩의 버튼 클래스의 기본형은 btn 으로, 기본적인 버튼의 구성 모양새를 구현해준다. 아래는 구현 예제 코드이다.

<div class="content">
  <div class="row text-center justify-content-center align-content-center">

    <div class="col-10">
      <h1>Normal Buttons</h1>
      <button class="btn btn-warning">Click me!</button>
    </div>

  </div>
</div>
<div class="content">
  <div class="row text-center justify-content-center">

    <div class="col-10">
      <h1>Outline Buttons</h1>
      <button class="btn btn-outline-primary">Click Me!</button>
    </div>

  </div>
</div>

미리 만들어져있는 템플릿 색상 들을 오버라이딩 하여 사용할 수 있다. 기억이 안날 경우 아래 코드블럭을 참고하자

<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

아웃 라인 버튼

버튼의 테두리에만 색상이 있고 버튼의 색 자체는 투명한 버튼은 outline 버튼 클래스를 이용하자.

<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

크기 조정

btn-lg , btn-sm, btn 이렇게 3가지 단계로 버튼의 크기를 조정할 수 있다.

활성 및 비활성화

버튼을 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>

버튼 그룹

버튼 여러개를 한 막대기로 모아놓아서 클릭할 수 있게 만들어둔 컴포넌트이다.

btn 항목 위에 <div> 요소로 묶어주고, 해당 요소에 .btn-group 클래스를 적용하면된다.

  • .btn-group : 버튼들을 그룹으로 묶어준다.
  • .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>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

테이블

부트스트랩으로 멋진 테이블을 만들수도 있다.

버튼과 마찬가지로 .table 속성을 넣어주면된다.

html에서 기본적으로 테이블은 table > tbody , thead > tr > th,td 로 구성됨을 잊지말자!

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

테이블을 꾸미기 위해서는 여러가지 옵션들이 있다.

  • table-striped : 줄무늬 테이블로 꾸며준다.
  • table-bordered : 테이블의 가장자리에 경계선을 만들어준다. # borderless 하면 아예 없애준다.
  • table-hover : 테이블 열에 마우스를 올리면 강조색을 표시해준다.
  • table-dark : 다크모드 테이블로 만들어준다. 이때 위의 항목과 호환가능 하다.

마지막으로 테이블에는 <table>, <th>, <td> 항목에 강조 색상을 추가할 수 있다.

이미지

부트스트랩에서 이미지를 지원한다는게 무슨 뜻인지 잘 모를것인데, 이미지의 모양 형태를 지원한다.

  • .rounded : 꼭짓점부분을 뭉특하게 만들어준다. (이미지가 아닌 모든 컴포넌트에 적용 가능)
  • .rounded-circle : 원형으로 만들어준다. 참고로 원형으로 만들어주는 css는 border-radius : 50% 로 하면 원형으로 만들어준다.
  • .img-thumbnail : 이미지를 썸네일 형식처럼(경계선) 만들어준다.

이미지 정렬

보통 이미지는 CSS float 속성 을 활용하여 정렬한다.

  • float-start float-end

이미지를 가운데로 정렬하기 위해서는 .mx-auto, d-block 속성을 두개 넣어주면 된다.

반응형 이미지

  • container fluid 처럼 .img-fluid 속성을 넣어주면 창 크기에 맞춰 조절된다.
  • 이때, 실제 CSS 속성은 max-height:100% , height:auto; 를 이용한다.

알림창

부트스트랩에서 간단한 알림메세지 템플릿을 제공합니다.

.alert 클래스를 기본적으로 추가하고, .alert- 뒤에 오는 강조색상을 활용하여 표시합니다.

알림 태그는 <div> 태그에 추가하고, 해당 태그 내부에 <a> 태그 같이 링크를 추가할 때 이를 꾸며주는 태그 .alert-link 를 추가할 수 있습니다.

알림창 닫는 방법

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

배지

배지란, 글귀 나 컴포넌트 요소들 사이에서 인라인으로 넣어 텍스트를 강조할 수 있다. 텍스트를 강조할 때 생김새가 정말 말그대로 배지같이 나온다.

배지의 크기는 부모 요소의 텍스트의 크기를 따라간다


<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>

이렇게 생으로 사용할 수도 있고, 문구 뒤에 사용하거나 컴포넌트 내부에 사용될 수도 있다.

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

버튼의 형태는 .rounded-pill 클래스를 더해주면 둥글게도 표현가능하다. (알약같이 생겼다고해서 pill 형태인듯하다..)

프로그레스 바

부트스트랩을 참고하면 CSS에서 실제로 구현할 때 프로그레스 바를 어떻게 구현하는지도 알 수 있다.


부트스트랩에서는 프로그레스바를 두 요소를 통해 표현한다. 프로그레스 > 프로그레스바 구조로 표현을 하는데, 부모 요소에서는 프로그레스바 전체 껍데기 (회색부분) 을, 자식 프로그레스바 요소에서는 현재 할당된 영역만큼을 채우는 역할을 한다.

또한 부트스트랩에서는 프로그레스바 요소의 width의 퍼센트를 조절함으로써 프로그레스 정도를 표시할 수 있다.

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>
  • progress div 에 height를 설정하면 프로그레스바의 높이를 지정할 수 있다.

  • 프로그레스 요소 내부에 innerText 는 프로그레스 바에 라벨로 표시된다.
<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

또한 프로그레스바의 색상은 “프로그레스바 요소 (안쪽 요소)” 에 bg-색상 태그를 입력함으로써 조절 가능하다.

프로그레스바 내부 스타일링 가능 요소 (bg-색상 과 조합가능)

  • progress-bar-striped : 줄무늬
  • progress-bar-striped, progress-bar-animated : 줄무늬의 애니메이션을 활성화시킴

프로그레스바는 또한 여러 항목을 표시할 수도 있다.


<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>