Bootstrap 5 실용 도구

Utilities / Helper 클래스

Bootstrap 5는 CSS 코드를 사용하지 않고 요소 스타일을 빠르게 설정할 수 있는 많은 utilitarian/helper 클래스를 제공합니다.

테두리

사용자 정의 클래스를 사용하여 요소에 테두리 추가 또는 제거:

예제

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

직접 시험해 보세요

경계선 너비

스크린 리더 .border-1 부터 .border-5 경계선 너비를 변경하려면:

예제

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

직접 시험해 보세요

경계선 색상

어떤 컨텍스트 경계선 색상 클래스를 사용하여 경계선에 색상 추가:

예제

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

직접 시험해 보세요

모서리 둥글게

스크린 리더 rounded 요소에 둥글은 모서리 추가:

예제

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

직접 시험해 보세요

浮动 및 제거浮动

스크린 리더 .float-end 오른쪽으로浮动하는 요소 클래스를 사용하거나 .float-start 왼쪽으로浮动하고 .clearfix 浮动 제거 클래스：

예제

<div class="clearfix">
  <span class="float-start">왼쪽으로浮动</span>
  <span class="float-end">오른쪽으로浮动</span>
</div>

직접 시험해 보세요

반응형浮动

화면 너비에 따라 왼쪽이나 오른쪽으로浮动하는 요소를 사용하여 반응형浮动 클래스 (.float-*-left|right)،그 중 *는 다음과 같습니다：

  • sm (<= 576px)
  • md (>= 768px)
  • lg (>= 992px)
  • xl (>= 1200px)
  • xxl (>= 1400px)

예제

<div class="float-sm-end">소형 스크린이나 더 넓은 스크린에서 오른쪽으로浮动</div><br>
<div class="float-md-end">중형 스크린이나 더 넓은 스크린에서 오른쪽으로浮动</div><br>
<div class="float-lg-end">대형 스크린이나 더 넓은 스크린에서 오른쪽으로浮动</div><br>
<div class="float-xl-end">超大형 스크린이나 더 넓은 스크린에서 오른쪽으로浮动</div><br>
<div class="float-xxl-end">특대형 스크린이나 더 넓은 스크린에서 오른쪽으로浮动</div><br>
<div class="float-none">浮动하지 않음</div>

직접 시험해 보세요

중앙 정렬

스크린 리더 .mx-auto 중앙에 위치한 요소(마argin-left와 margin-right: auto를 추가):

예제

居中

직접 시험해 보세요

<div class="mx-auto bg-warning" style="width:150px">정중앙</div>

너비w-* 클래스를 사용하여 설정합니다（、.w-25、.w-50、.w-75、.w-100、.mw-auto.mw-100

예제

）요소의 너비를 설정합니다：
<div class="w-25 bg-warning">너비 25%</div>
<div class="w-50 bg-warning">너비 50%</div>
<div class="w-75 bg-warning">너비 75%</div>
<div class="w-100 bg-warning">너비 100%</div>
<div class="w-auto bg-warning">자동 너비</div>

직접 시험해 보세요

<div class="mw-100 bg-warning">최대 너비 100%</div>

높이h-* 클래스를 사용하여 설정합니다（、.h-25、.h-50、.h-75、.h-100、.mh-auto.mh-100

예제

）요소의 높이를 설정합니다：
  <div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">높이 25%</div>
  <div class="h-50 bg-warning">높이 50%</div>
  <div class="h-75 bg-warning">높이 75%</div>
  <div class="h-100 bg-warning">높이 100%</div>
  <div class="h-auto bg-warning">자동 높이</div>
</div>

직접 시험해 보세요

<div class="mh-100 bg-warning" style="height:500px">최대 높이 100%</div>

간격

  • xs Bootstrap 5는 광범위한 반응형 마진과 패딩实用程序 클래스를 가지고 있습니다. 모든 브레이크포인트에 적용됩니다：
  • sm (<= 576px)
  • md (>= 768px)
  • lg (>= 992px)
  • xl (>= 1200px)
  • xxl (>= 1400px)

이러한 클래스의 사용 형식은 다음과 같습니다：{property}{sides}-{size} 을 사용하여 xs， {property}{sides}-{breakpoint}-{size} 을 사용하여 sm、md、lg、xl 와 xxl。

property 다음 중 하나입니다:

  • m - 설정 margin
  • p - 설정 padding

sides 다음 중 하나입니다:

  • t - 설정 margin-top 或 padding-top
  • b - 설정 margin-bottom 或 padding-bottom
  • s - 설정 margin-left 或 padding-left
  • e - 설정 margin-right 或 padding-right
  • x - 동시에 설정 padding-left 와 padding-right 或 margin-left 와 margin-right
  • y - 동시에 설정 padding-top 와 padding-bottom 或 margin-top 와 margin-bottom
  • blank - 요소의 모든 네 가지 편이에 margin 或 padding

size 다음 중 하나입니다:

  • 0 - 설정 margin 或 padding 설정 0
  • 1 - 설정 margin 或 padding 설정 .25rem
  • 2 - 설정 margin 或 padding 설정 .5rem
  • 3 - 설정 margin 或 padding 설정 1rem
  • 4 - 설정 margin 或 padding 설정 1.5rem
  • 5 - 설정 margin 或 padding 설정 3rem
  • auto - 설정 margin auto로 설정

예제

<div class="pt-4 bg-warning">위 내간격만(1.5rem) 있습니다.</div>
<div class="p-5 bg-success">모든 편의에 내간격(3rem)이 있습니다.</div>
<div class="m-5 pb-5 bg-info">모든 편의에 외간격(3rem)과 아래 내간격(3rem)이 있습니다.</div>

직접 시험해 보세요

더 많은 간격 예제

.m-# / m-*-# 모든 편의 외간격 시도해보세요
.mt-# / mt-*-# 위 외간격 시도해보세요
.mb-# / mb-*-# 아래 외간격 시도해보세요
.ms-# / ms-*-# 왼쪽 외간격 시도해보세요
.me-# / me-*-# 오른쪽 외간격 시도해보세요
.mx-# / mx-*-# 좌우 내간격 시도해보세요
.my-# / my-*-# 상하 외간격 시도해보세요
.p-# / p-*-# 모든 편의 간격(패딩) 시도해보세요
.pt-# / pt-*-# 위 내간격 시도해보세요
.pb-# / pb-*-# 아래 내간격 시도해보세요
.ps-# / ps-*-# 왼쪽 내간격 시도해보세요
.pe-# / pe-*-# 오른쪽 내간격 시도해보세요
.py-# / py-*-# 상하 내간격 시도해보세요
.px-# / px-*-# 좌우 내간격 시도해보세요

우리의 CSS 단위 참조 매뉴얼 rem과 다른 크기 단위에 대해 더 알아보세요.

그림자

사용하십시오 shadow- 요소에 그림자 추가하기:

예제

<div class="shadow-none p-4 mb-4 bg-light">애니메이션 없음</div>
<div class="shadow-sm p-4 mb-4 bg-white">소형 그림자</div>
<div class="shadow p-4 mb-4 bg-white">기본 그림자</div>
<div class="shadow-lg p-4 mb-4 bg-white">대형 그림자</div>

직접 시험해 보세요

수직 정렬

사용하십시오 align- 클래스는 요소의 정렬 방식을 변경합니다(단, inline, inline-block, inline-table 및 테이블 셀 요소에만 적용됩니다)：

예제

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

직접 시험해 보세요

비율

부모 요소의 너비에 따라 반응형 비디오나 슬라이드 쇼를 생성합니다。

추가합니다 .ratio 클래스는 선택한 비율과 일치합니다 .aspect-ratio-* 부모 요소에 추가하고 그 안에 삽입물(비디오 또는 iframe)을 추가합니다：

예제

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

직접 시험해 보세요

보이는성

스크린 리더 .visible 或 .invisible 클래스는 요소의 보이는지 여부를 제어할 수 있습니다：

주의사항：이 클래스는 CSS display 값을 변경하지 않습니다. 그들은 단지 추가합니다 visibility:visible 或 또는

예제

visibility:hidden.
<div class="visible">내가 보입니다.</div>

직접 시험해 보세요

<div class="invisible">내가 보이지 않습니다.</div>

스크린 리더 닫기 아이콘 .btn-close

예제

클래스는 닫기 아이콘의 스타일을 설정할 수 있습니다. 대부분 경고 상자와 모달에서 사용됩니다.

직접 시험해 보세요

<button type="button" class="btn-close"></button>

스크린 리더 사용 .visually-hidden

예제

클래스는 모든 장치에서 요소를 숨기고(스크린 리더를 제외), 다음과 같습니다：

직접 시험해 보세요

<span class="visually-hidden">스크린 리더를 제외한 모든 화면에서 숨겨질 것입니다.</span>

색상

颜色 챕터에서 설명한 것처럼, 모든 텍스트 및 배경색 클래스 목록이 다음과 같습니다：

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body기본적으로 body의 색상(보통 검정색)입니다.
  • .text-light

예제

직접 시험해 보세요

컨텍스트 텍스트 클래스는 링크에도 사용될 수 있습니다：

예제

직접 시험해 보세요

.text-black-50 또는 .text-white-50 클래스를 사용하여 검정색 또는 흰색 텍스트에 50%의 불투명도를 추가할 수 있습니다：

예제

직접 시험해 보세요

배경색

배경색에 대한 클래스는 다음과 같습니다：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

배경색을 설정하지 않기 때문에 일부 경우에만 배경색과 함께 설정해야 할 수 있습니다. .text-* 클래스를 함께 사용합니다.

예제

직접 시험해 보세요