Components

이윰빌더에서 사용하는 시즌3 Components의 ShortCodes 입니다.

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

라벨 (Label)

예제

.label .label-색상

  • Default
  • Light
  • Dark
  • Red
  • Blue
  • Green
  • Yellow
  • Purple
  • Brown
  • Orange
  • Indigo
  • Teal
  • Pink

예제

.label .label-색상 .rounded

  • Default
  • Light
  • Dark
  • Red
  • Blue
  • Green
  • Yellow
  • Purple
  • Brown
  • Orange
  • Indigo
  • Teal
  • Pink

예제

.label .label-색상 .rounded-3x

  • Default
  • Light
  • Dark
  • Red
  • Blue
  • Green
  • Yellow
  • Purple
  • Brown
  • Orange
  • Indigo
  • Teal
  • Pink
배지 (Badge)

예제

.badge .badge-색상

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

예제

.badge .badge-색상 .rounded

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

예제

.badge .badge-색상 .rounded-3x

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

예제

버튼 옵션과 배지 옵션을 조합하여 사용할수 있습니다.

소셜 아이콘

예제


예제

.rounded-2x


예제

.rounded-x

진행바

예제 - 상태

10% Complete
30% Complete
50% Complete
70% Complete
90% Complete

.progress-bar .progress-bar-info .progress-bar-success .progress-bar-warning .progress-bar-danger

예제 - 줄무늬

10% Complete
30% Complete
50% Complete
70% Complete
90% Complete

.progress-striped


예제 - 액티브

10% Complete
30% Complete
50% Complete
70% Complete
90% Complete

.progress-striped .active

예제 - 응용

20% Complete (danger)
40% Complete (warning)
30% Complete (success)
20% Complete (danger)
40% Complete (warning)
30% Complete (success)
20%
40%
30%
20% Complete (danger)
40% Complete (warning)
30% Complete (success)
20%
40%
30%

여러가지 조합으로 응용이 가능합니다.


예제 - 색상

진행률 20%
진행률 30%
진행률 40%
진행률 50%
진행률 60%
진행률 70%

.progress-bar-default .progress-bar-dark .progress-bar-red .progress-bar-blue .progress-bar-green .progress-bar-yellow

예제 - 색상

진행률 20%
진행률 30%
진행률 40%
진행률 50%
진행률 60%
진행률 70%

.progress-bar-purple .progress-bar-brown .progress-bar-orange .progress-bar-indigo .progress-bar-teal .progress-bar-pink


예제 - 크기

진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.progress-xxs .progress-xs .progress-sm .progress-lg

예제 - 라운드, 응용

진행률
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.rounded .rounded-2x .rounded-3x .rounded-4x


예제 - 줄무늬

진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.progress-striped

예제 - 액티브

진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%
진행률 50%

.progress-striped .active


위 옵션들의 조합으로 좀더 다양한 응용이 가능합니다.

진행바 - Vertical

예제 - 색상

30%
70%
50%
20%
40%
90%

예제 - 색상, 라운드

30%
70%
50%
20%
40%
90%

예제 - 줄무늬

30%
70%
50%
20%
40%
90%

예제 - 액티브

30%
70%
50%
20%
40%
90%